Bài viết dưới đây webaffiliatevn.com sẽ liệt kê các thẻ thông dụng nhất trong html.
Thẻ tiêu đề (Heading Tags)
Bất kỳ tài liệu nào đều bắt đầu với một tiêu đề. Bạn có thể sử dụng các kích cỡ khác nhau cho các tiêu đề của bạn. HTML cũng có sáu cấp độ tiêu đề, sử dụng các yếu tố <h1>, <h2>, <h3>, <h4>, <h5> và <h6> . Trong khi hiển thị bất kỳ tiêu đề nào, trình duyệt sẽ thêm một dòng trước và một dòng sau tiêu đề đó.
Ví dụ:
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”mdVNxzx” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/mdVNxzx’>mdVNxzx</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Thẻ đoạn văn (Paragraph Tag)
Thẻ <p> cung cấp một cách để cấu trúc văn bản của bạn thành các đoạn khác nhau. Mỗi đoạn văn bản phải ở giữa một thẻ mở <p> và thẻ đóng </ p> như trong ví dụ dưới đây:
Ví du:
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”ExPqEOg” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/ExPqEOg’>ExPqEOg</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Thẻ ngắt dòng (Line Break Tag)
Bất cứ khi nào bạn sử dụng phần tử <br /> , mọi thứ theo sau nó đều bắt đầu từ dòng tiếp theo. Thẻ này là một ví dụ về một yếu tố trống , nơi bạn không cần mở và đóng thẻ, vì không có gì để đi giữa chúng.
Thẻ <br /> có khoảng trắng giữa ký tự br và dấu gạch chéo về phía trước. Nếu bạn bỏ qua khoảng trắng này, các trình duyệt cũ hơn sẽ gặp khó khăn khi hiển thị ngắt dòng, trong khi nếu bạn bỏ lỡ ký tự gạch chéo chuyển tiếp và chỉ sử dụng <br> thì nó không hợp lệ trong XHTML.
Ví dụ:
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”OJMKvaB” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/OJMKvaB’>OJMKvaB</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Nội dung căn giữa (Centering Content)
Bạn có thể sử dụng thẻ <center> để đặt bất kỳ nội dung nào vào giữa trang hoặc bất kỳ ô bảng nào.
Ví dụ:
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”qBbeoLm” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/qBbeoLm’>qBbeoLm</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]Đường ngang (Horizontal Lines)
Các đường ngang được sử dụng để phân chia trực quan các phần của tài liệu. Thẻ <hr> tạo một dòng từ vị trí hiện tại trong tài liệu sang lề phải và ngắt dòng tương ứng.
Ví dụ: bạn có thể muốn đưa ra một dòng giữa hai đoạn như trong ví dụ đã cho bên dưới.
Ví dụ:
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”OJMKvrB” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/OJMKvrB’>OJMKvrB</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]Một lần nữa thẻ <hr /> là một ví dụ về phần tử trống , nơi bạn không cần mở và đóng thẻ, vì không có gì để đi giữa chúng.
Phần tử <hr /> có khoảng trắng giữa các ký tự hr và dấu gạch chéo về phía trước. Nếu bạn bỏ qua khoảng trắng này, các trình duyệt cũ hơn sẽ gặp khó khăn khi hiển thị đường kẻ ngang, trong khi nếu bạn bỏ lỡ ký tự gạch chéo chuyển tiếp và chỉ sử dụng <hr> thì nó không hợp lệ trong XHTML
Giữ nguyên định dạng
Đôi khi, bạn muốn văn bản của bạn tuân theo định dạng chính xác về cách nó được viết trong tài liệu HTML. Trong những trường hợp này, bạn có thể sử dụng thẻ được định dạng sẵn <pre> .
Bất kỳ văn bản nào giữa thẻ <pre> mở và thẻ đóng </ pre> sẽ giữ nguyên định dạng của tài liệu nguồn.
Ví dụ:
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”JjGgLxW” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/JjGgLxW’>JjGgLxW</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]Thử sử dụng cùng một mã mà không cần giữ nó bên trong thẻ <pre> … </ pre>
Khoảng trắng đặc biệt trong HTML
Giả sử bạn muốn sử dụng cụm từ ” Fast and Furious “. Tại đây, bạn sẽ không muốn trình duyệt chia ” Fast, and ” và ” Furious ” thành hai dòng :
Môt bộ phim mà tôi thích nhất là “ Fast and Furious”
Trong trường hợp, khi bạn không muốn trình duyệt máy khách ngắt văn bản, bạn nên sử dụng kí tự HTML đặc biệt & nbsp; thay vì khoảng cách bằng phím ”space” bình thường. Ví dụ: khi mã hóa ” Fast and Furious ” trong một đoạn văn, bạn nên sử dụng một cái gì đó tương tự như đoạn mã sau :
Ví dụ:
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”mdVNxvL” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/mdVNxvL’>mdVNxvL</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]>> Xem thêm:
