Các thẻ cơ bản trong HTML

Thảo luận trong 'Tự Học HTML' bắt đầu bởi Tâm Vĩnh, 8/6/16.

  1. Tâm Vĩnh

    Tâm Vĩnh Member

    Tham gia ngày:
    6/4/16
    Bài viết:
    39
    Đã được thích:
    0
    Điểm thành tích:
    6
    Giới tính:
    Nam
    Nghề nghiệp:
    iZdesigner Team
    Nơi ở:
    Hà Nam
    Các thẻ cơ bản trong HTML - Bất kỳ tài liệu nào cũng đều bắt đầu với một heading. Bạn có thể sử dụng các kích cỡ khác nhau cho heading của bạn. HTML cũng có 6 cỡ khác nhau cho heading, sử dụng các thẻ cơ bản là <h1>, <h2>, <h3>, <h4>, <h5>, và <h6>. Trong khi hiển thị bất cứ một heading nào, các trình duyệt sẽ thêm (để cách) một dòng trước và một dòng sau heading đó.

    Các thẻ cơ bản trong HTML

    Ví dụ:
    Mã:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Heading Example</title>
    </head>
    <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
    </body>
    </html>
    Khi chạy, code trên sẽ hiển thị kết quả:

    html_heading_tags.jpg
    Thẻ đoạn văn

    Thẻ <p> cung cấp cách cấu trúc văn bản của bạn vào các paragraph (đoạn văn) khác nhau. Mỗi một paragraph trong văn bản sẽ ở trong một thẻ mở <p> và một thẻ đóng </p> như ví dụ bên dưới.

    Ví dụ
    Mã:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Paragraph Example</title>
    </head>
    <body>
    <p>Here is a first paragraph of text.</p>
    <p>Here is a second paragraph of text.</p>
    <p>Here is a third paragraph of text.</p>
    </body>
    </html>
    
    Chạy đoạn code này sẽ hiển thị kết quả:

    Thẻ ngắt dòng

    Bất cứ khi nào bạn sử dụng thẻ <br /> thì các đối tượng theo sau nó sẽ bắt đầu từ dòng tiếp theo. Thẻ này là một ví dụ cho một khoảng trống (empty) trong tài liệu, tại đó bạn không cần các thẻ mở và đóng vì sẽ không có gì trong đó.

    Thẻ <br /> có một khoảng trống giữa hai ký từ br và dấu gạch chéo theo sau. Nếu bạn bỏ sót khoảng trống này, các trình duyệt cũ hơn sẽ gặp vấn đề trong việc hiển thị sự ngắt dòng, trong khi nếu bạn quên dấu gách chéo theo sau và chỉ sử dụng <br> thì sẽ không có hiệu lực trong XHTML.

    Mã:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Line Break  Example</title>
    </head>
    <body>
    <p>Hello<br />
    You delivered your assignment ontime.<br />
    Thanks<br />
    Mahnaz</p>
    </body>
    </html>
    Chạy đoạn code sẽ hiển thị kết quả sau:
    Căn chỉnh nội dung trung tâm

    Bạn có thể sử dụng thẻ <center> để nhập bất kỳ nội dung vào phần trung tâm (thân bài) của trang hoặc của bất kỳ ô nào trong bảng.

    Mã:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Centring Content Example</title>
    </head>
    <body>
    <p>This text is not in the center.</p>
    <center>
    <p>This text is in the center.</p>
    </center>
    </body>
    </html>
    Chạy đoạn code sẽ hiển thị kết quả sau:

    [​IMG]
    Các dòng ngang

    Các đường ngang cách dòng được sử dụng để ngăn cách các khu vực trong tài liệu. Thẻ <hr> tạo một dòng ngang từ vị trí hiện tại trong tài liệu đến lề phải và do đó tạo ra một dòng ngắt.

    Ví dụ, bạn muốn có một dòng ngang để ngăn cách 2 paragraph:

    Mã:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Horizontal Line Example</title>
    </head>
    <body>
    <p>This is paragraph one and should be on top</p>
    <hr />
    <p>This is paragraph two and should be at bottom</p>
    </body>
    </html>
    Nó sẽ hiển thị kết quả sau khi bạn chạy đoạn code trên:

    [​IMG]
    Thẻ <hr /> là một ví dụ cho một khoảng trống trong tài liệu, tại đó bạn không cần các thẻ đóng và mở bởi vì không có đối tượng nào trong đó.

    Thẻ <hr /> có một khoảng trống giữa 2 ký tự hr và dấu gạch chéo. Nếu bạn bỏ quên khoảng trống, các trình duyệt cũ sẽ khó khăn trong việc hiển thị các đường ngang, trong khi đó, nếu bạn quên ký tự dấu gạch chéo và chỉ sử dụng <hr> thì sẽ không có hiệu lực trong XHTML.

    Duy trì định dạng

    Đôi khi bạn muốn văn bản của bạn tuân theo một định dạng mà đã được viết trong HTML. Trong những trường hợp này, bạn có thể sử dụng thẻ xác định định dạng trước là <pre>.

    Khi đó, bất kỳ văn bản nào xuất hiện trong thẻ mở <pre> và thẻ đóng </pre> sẽ duy trì cái định dạng trong tài liệu nguồn.

    Mã:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Preserve Formatting Example</title>
    </head>
    <body>
    <pre>
    function testFunction( strText ){
       alert (strText)
    }
    </pre>
    </body>
    </html>
    
    Kết quả hiển thị khi bạn chạy đoạn code trên là:

    [​IMG]

    Bạn thử sử dụng code tương tự mà không sử dụng 2 thẻ <pre>...</pre> để so sánh sự khác nhau trong kết quả hiển thị.

    Các khoảng trống không ngắt

    Giả sử bạn muốn sử dụng cụm từ "12 Angry Men." Bạn không muốn một trình duyệt Web chia (ngắt) cụm từ trên thành "12, Angry" và "Men" ở hai dòng:

    Mã:
    An example of this technique appears in the movie "12 Angry Men."
    
    Trong tình huống này bạn không muốn trình duyệt ngắt văn bản của bạn, bạn nên sử dụng khoảng trống không ngắt &nbsp; thay vì sử dụng một khoảng trống thông thường. Ví dụ khi gõ code "12 Angry Men" vào một paragraph, bạn nên dùng đoạn code tương tự như sau:

    Mã:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Nonbreaking Spaces Example</title>
    </head>
    <body>
    <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
    </body>
    </html>
     

Chia sẻ trang này