STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    HTML - Phần 2: Các Thẻ Định Dạng Văn Bản

    Giới thiệu và hướng dẫn sử dụng 1 số thẻ định dạng văn bản HTML.
    25/10/2015
    29/08/2020
    5 phút đọc
    HTML - Phần 2: Các Thẻ Định Dạng Văn Bản

    Cấu trúc một phần tử HTML

    Đa số các thẻ trong HTML đều có cấu trúc như sau:

    <tagName atrtibute="value">content</tagName>
    • tagName: tên của thẻ được HTML định nghĩa sẵn, mỗi thẻ được bắt đầu bởi cặp thẻ đóng mở <tagName>...</tagName>. hoặc mở và đóng ngay <tagName/>.
    • attribute: thuộc tính của thẻ HTML, cung cấp các thông tin về thẻ HTML đó, thuộc tính luôn luôn nằm trong thẻ mở <>. Mỗi thẻ HTML có thể có nhiều attribute, ví dụ thẻ <img> có thuộc tính là heightwidth quy định chiều cao và chiều rộng của 1 ảnh.
    • value: giá trị đi kèm với attribute. Ví dụ height="500".
    • content: nội dung của thẻ HTML, nằm giữa cặp thẻ đóng mở.

    Ví dụ 1 thẻ HTML

    <a href="https://www.stdio.vn/">Trang chủ STDIO</a>

    * Trong HTML vẫn có 1 số thẻ không tuân thủ quy tắc thẻ đóng mở, ví dụ như thẻ hiển thị ảnh <img>, thẻ nhập liệu <input>.

    Các thẻ định dạng văn bản

    Thẻ định dạng tiêu đề <h1>...</h1> ... <h6>...</h6>

    HTML định nghĩa 1 loạt thẻ dùng để định nghĩa tiêu đề (heading) từ <h1> đến <h6> mô tả độ quan trọng giảm dần.

    Các thẻ tiêu đề có cấu trúc là: <hx>Nội dung tiêu đề</hx>

    <!DOCTYPE html>
    <html>
      <head></head>
      <body>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
      </body>
    </html>
    Các thẻ heading trong HTML.

    Thẻ định dạng đoạn văn <p>...<p>

    Thẻ paragraph <p> định nghĩa một đoạn văn.

    Thẻ tiêu đề có cấu trúc <p>Nội dung đoạn văn</p>.

    <!DOCTYPE html>
    <html>
      <head></head>
      <body>
        <p>Paragraph 1 - long part.</p>
        <p>Paragraph 2 - short part.</p>
      </body>
    </html>
    Thẻ paragraph - p - đoạn văn.

    Mỗi thẻ <p> tương ứng với một đoạn văn, sau mỗi thẻ <p> thì tự động xuống hàng.

    Thẻ định dạng ngắt dòng <br/>

    Trình duyệt web xem tất cả khoảng trắng liên tiếp hoặc xuống dòng đều là 1 khoảng trắng.

    Để có thể ngắt dòng sử dụng thẻ <br/>.

    Trường hợp không sử dụng <br/>

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       Đoạn văn gồm có nhiều dòng:
       Dòng 1
       Dòng 2
       Dòng 3
     </body>
    </html>
    Không sử dụng thẻ <br/> để ngắt dòng.

    Trường hợp sử dụng <br/>

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
      Đoạn văn gồm có nhiều dòng:<br/>
      Dòng 1<br/>
      Dòng 2<br/>
    Dòng 3
     </body>
    </html>
     
    Sử dụng <br/> ngắt dòng.

    Thẻ định dạng dữ liệu thô <pre>

    Mặc định thì trình duyệt sẽ bỏ qua tất cả các khoảng trắng liên tiếp, tab, xuống dòng và xem như đó là 1 khoảng trắng, để giữ chính xác định dạng của dữ liệu, HTML định nghĩa thẻ dữ liệu thô <pre>.

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <pre>
    for(int i = 0; i < 10; i++)
    {
     printf("%s", "Lập trình HTML"); 
    }</pre>
    </body>
    </html>
    Sử dụng thẻ <pre>

    Thẻ định dạng trích dẫn cho câu <q>

    Thẻ <q> dùng để trích dẫn trực tiếp một lời nói, lời dẫn trực tiếp.

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <p>
         Thơ lục bát
         <q>Công cha như núi Thái Sơn<br />
           Nghĩa mẹ như nước trong nguồn chảy ra.</q>
       </p>
     </body>
    </html>
     
    Thẻ trích dẫn câu nói <q>

    Thẻ định dạng chữ viết

    Thẻ in đậm <b>

    Thẻ <b> (bold) dùng để định dạng chữ in đậm.

    Họ tên: <b>Nguyễn Văn Nghĩa</b>

    Kết quả:

    Họ tên: Nguyễn Văn Nghĩa

    Thẻ in nghiêng <i>

    Thẻ <i> (italic) dùng để định dạng chữ in nghiêng.

    Ngành: <i>Khoa học máy tính</i>

    Kết quả:

    Ngành: Khoa học máy tính

    Thẻ gạch dưới <u>

    Thẻ <u> (underline) dùng để định dạng chữ gạch dưới.

    Công việc: <u>Kỹ sư phần mềm</u>

    Kết quả:

    Công việc: Kỹ sư phần mềm

    Có thể kết hợp các thẻ <u>, <i>, <b> với nhau

    Địa chỉ: <b><u><i>Quận 7, TPHCM</i></u></b>

    Kết quả:

    Địa chỉ: Quận 7, TPHCM

    Thẻ siêu ký tự

    Siêu ký tự là các ký tự được đặt cao hơn hoặc thấp hơn các ký tự chính. Ví dụ:

    • H2O
    • ax2 + bx + c = 0

    Thẻ siêu ký tự <sub>

    H<sub>2</sub>SO<sub>4</sub>

    Kết quả:

    H2SO4

    Thẻ siêu ký tự <sup>

    f(x) = 2x<sup>3</sup> + 5x<sup>2</sup> + 6x

    Kết quả:

    f(x) = 2x3 + 5x2 + 6x

    inline và block

    HTML phân ra thành hai loại thẻ: inline và block.

    inline

    Các thẻ inline là các thẻ có nội dung của nó cùng nằm trên 1 dòng, thường dùng để trình bày nội dung cho web.

    Ví dụ:

    <i>In nghiêng</i>, <b>In đậm</b>, <u>Gạch chân</u>

    Kết quả:

    In nghiêng, In đậm, Gạch chân

    Thẻ <i>, <b>, <u> là các thẻ inline nên nội dung của nó được thể hiện liên tục, cùng nằm trên 1 dòng.

    Các thẻ inline phổ biến: <i>, <u>, <b>, <span>, <a>, <sub>, <sup>, <strong>, <code>, <em>.

    block

    Các thẻ block tạo nên những khối riêng biệt, thường dùng để trình bày bố cục cho web.

    Ví dụ:

    <h3>Các thẻ HTML</h3>
    <p>HTML có định nghĩa cho chúng ta những thẻ, ...</p>

    <h3><p> là những thẻ block nên nội dung trong các khối sẽ không liên tục.

    Các thẻ block phổ biến: <h1>, ..., <h6>, <p>, <div>, <ol>, <ul>.

    Bài chung series

    0 Bình luận
    HTML Cheat Sheet

    HTML Cheat Sheet

    STDIO Training - Đào tạo lập trình Front-end.

    Đề xuất

    HTML - Phần 4: Các Thẻ Định Dạng Danh Sách
    Các thẻ định dạnh danh sách <ul>, <ol>, <li> trong HTML. Các thẻ danh ...
    HTML - Phần 6: Các Thẻ Input trong HTML
    Các loại thẻ <input> hỗ trợ nhập liệu chuỗi, số, mật khẩu, ... trong ...

    Khám phá

    HTML - Phần 1: Cơ Bản Về HTML
    Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu ...
    HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio
    Âm thanh, hình ảnh, video clip làm cho trang web thêm tiện ích, đẹp và ...
    Định Dạng Ảnh Bitmap - Giới Thiệu và Các Thao Tác Cơ Bản
    Trong đời thường, bạn sẽ gặp các file ảnh có định dạng .PNG, .JPG, .TGA, ...
    Các Thẻ - Tag Thông Dụng trong HTML
    Liệt kê các loại thẻ (tag) thường dùng trong HTML để trình bày 1 trang ...
    HTML - Phần 3: Thẻ Liên Kết trong HTML
    Thẻ liên kết <a href="...">...</a> được xem như là trái tim của 1 trang ...
    Tìm Hiểu Về WebM
    WebM là một loại định dạng video file mã nguồn mở, royalty-free, được ...
    18/07/2016
    HTML - Phần 8: Thẻ Form trong HTML
    Thẻ <form> - "khung nhập liệu" trong HTML điền thông tin ứng dụng trong ...
    HTML - Phần 7: Thẻ Table Trong HTML
    Trình bày dữ liệu thống kê theo dòng và cột với thẻ <table>.
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020