Phần tử trong HTML

Định dạng tiêu đề

Thay vì trong HTML bạn dùng các thẻ h1, h2, h3, h4, h5, h6 để chỉ tiêu đề của đầu mục. Bạn có thể chuyển đổi tương ứng qua Markdown bằng cách gõ #, ##, ###, ####, #####, ###### tương ứng

Ví dụ tôi gõ

class="highlight">
1
2
3
4
5
6
# Tiêu đề 1 
## Tiêu đề 2
### Tiêu đề 3
#### Tiêu đề 4
##### Tiêu đề 5
###### Tiêu đề 6

Và dưới đây là kết quả mà Markdown hiển thị

Tiêu đề 1

Tiêu đề 2

Tiêu đề 3

Tiêu đề 4

Tiêu đề 5
Tiêu đề 6
Đặt biệt khi viết tiêu đề dạng Markdown như vậy, thì ID của tiêu đề chính là tên tiêu đề (viết toàn bộ chữ thường và giữa mỗi từ phải có dấu "-").

Ví dụ đối với Tiêu đề 1 ở trên thì sẽ có id ="tiêu-đề-1" (tuyệt đối không được bỏ dấu câu). Điều này sẽ tạo điều kiện thuận tiện hơn cho việc bạn muốn viết tiêu đề bằng Markdown nhưng muốn lấy id bằng HTML để làm 1 số việc gì đó.

Định dạng các đoạn văn

Thay vì dùng thẻ b hay thẻ strong để in đậm văn bản thì trong Markdown cung cấp cho ta cặp ** ** hoặc __ __ để làm việc

Tương tự:

  • Dùng cặp * * hoặc _ _ để in nghiêng văn bản
  • Dùng cặp *** *** hoặc __* *__ hoặc _** **_ hoặc **_ _** để có thể hiển thị vừa in đậm và nghiêng cho văn bản

  • Ví dụ tôi gõ
    class="highlight">
    1
    
      **Đây là đoạn văn  in đậm**, *đây là đoạn văn in nghiêng*
    

    Và dưới đây là kết quả

    Đây là đoạn văn in đậm, đây là đoạn văn in nghiêng

    Dùng [<đoạn văn lấy link>](<link>) để chèn 1 đường link nào đó vào văn bản bạn muốn

    Dùng ![<alt tên ảnh>](<link>) để chèn 1 hình ảnh nào đó vào văn bản mà bạn muốn

    Ví dụ tôi gõ

    class="highlight">
    1
    2
    
    [Đây là một link dẫn đến facebook](https://vi-vn.facebook.com/)
    ![Test](https://user-images.githubusercontent.com/86739367/143173794-ef2ac736-f3d6-4fa0-8b1a-87e86d74afa3.jpg)
    

    Và dưới đây là kết quả

    Đây là một link dẫn đến facebook

    Chèn trích dẫn

    Dùng > để chèn 1 đoạn trích dẫn

    Dùng dạng dưới đây để có thể chèn 1 trích dẫn nhiều dòng

    class="highlight">
    1
    2
    3
    4
    5
    
    > abc
    >
    > cde
    >
    > efg
    

    Dùng lần lược >, >>, >>>,... để có thể chèn trích dẫn trong trích dẫn

    Ví dụ tôi gõ

    class="highlight">
    1
    2
    3
    4
    5
    6
    7
    
    > abc
    >>
    >> cde
    >>
    >> efg
    >> 
    > akaa
    

    và dưới đây là kết quả

    Chèn danh sách

    Danh sách có thứ tự

    Để tạo một danh sách có thứ tự, chỉ cần thêm các chữ số và dấu . trước đoạn danh sách cần thêm.

    Ví dụ tôi gõ

    class="highlight">
    1
    2
    3
    
    1. abc
    2. cde
    3. edf
    

    hay

    class="highlight">
    1
    2
    3
    
    1. abc
    1. cde
    1. edf
    

    hay

    class="highlight">
    1
    2
    3
    
    1. abc
    9. cde
    3. edf
    

    hay

    class="highlight">
    1
    2
    3
    4
    5
    
    1. abc
    2. cde
        1. ABC
        2. CDE
    3. edf
    

    hay

    class="highlight">
    1
    2
    3
    4
    5
    
    1. abc
    22. cde
        1. ABC
        2. CDE
    3. edf
    

    Và kết quả hiển thị:

    • Đoạn code 1
      1. abc
      2. cde
      3. edf
    • Đoạn code 2
      1. abc
      2. cde
      3. edf
    • Đoạn code 3
      1. abc
      2. cde
      3. edf
    • Đoạn code 4
      1. abc
      2. cde
        1. ABC
        2. CDE
      3. edf
    • Đoạn code 5
      1. abc
      2. cde
        1. ABC
        2. CDE
      3. edf

    Danh sách không thứ tự

    Để tạo một danh sách có thứ tự, chỉ cần thêm các dạng - hoặc + hoặc * trước đoạn danh sách cần thêm.

    Ví dụ tôi gõ

    class="highlight">
    1
    2
    3
    
    - abc
    - cde
    - edf
    

    hay

    class="highlight">
    1
    2
    3
    
    * abc
    * cde
    * edf
    

    hay

    class="highlight">
    1
    2
    3
    
    + abc
    + cde
    + edf
    

    hay

    class="highlight">
    1
    2
    3
    4
    5
    
    - abc
    - cde
        - ABC
        - CDE
    - edf
    

    hay

    class="highlight">
    1
    2
    3
    4
    5
    
    - abc
    - cde
        - ABC
            - CDE
    - edf
    

    Và kết quả hiển thị:

    • Đoạn code 1
      • abc
      • cde
      • edf
    • Đoạn code 2
      • abc
      • cde
      • edf
    • Đoạn code 3
      • abc
      • cde
      • edf
    • Đoạn code 4
      • abc
      • cde
        • ABC
        • CDE
      • edf
    • Đoạn code 5
      • abc
      • cde
        • ABC
          • CDE
      • edf

    Chèn bảng

    Các bạn có thể dùng cú pháp dưới đây để tạo 1 bảng danh sách các sinh viên cơ bản

    Lưu ý:

    • Kí tự :--- dưới cột STT tức là căn lề trái
    • Kí tự :----: dưới cột Họ và tên tức là căn giữa
    • Kí tự ---: dưới cột Tuổi tức là căn lề phải
      class="highlight">
      1
      2
      3
      4
      5
      6
      
        | STT | Họ và tên | Tuổi|
        |:----|:---------:|----:|
        | 1   | A         | 1   |
        | 2   | B         | 1   |
        | 3   | C         | 3   |
        | 4   | D         | 4   |
      

      Và kết quả hiển thị

      Tạo ghi chú

      Xem ví dụ về tạo các đoạn ghi chú dưới đây:

      • Ghi chú bình thường

        Ghi chú bình thường trên một dòng

        class="highlight">
        1
        2
        
          Ghi chú bình thường
          Gồm nhiều dòng
        
      • Ghi chú đoạn code (thêm loại vào sau đoạn ghi chú)

      • Code ghi chú bằng ngôn ngữ C++
        Code ghi chú bằng ngôn ngữ python


        Lời kết

        Sau những gì mà tôi đã chia sẻ ở trên mong rằng sẽ giúp ích được phần nào đó cho bạn đọc. Mọi thắc mắc hoặc góp ý bạn đọc có thể liên hệ tại đây.


        Đang cập nhật

        - Bạn đã truy cập: Đang cập nhật

        Copyright © 2022 Deuteri