Các thẻ cơ bản thông dụng trong HTML7 phút đọc

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ụ:

See the Pen mdVNxzx by DavidKhai (@davidkhai) on CodePen.dark

 

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:

See the Pen ExPqEOg by DavidKhai (@davidkhai) on CodePen.dark

 

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ụ:

See the Pen OJMKvaB by DavidKhai (@davidkhai) on CodePen.dark

 

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ụ:

See the Pen qBbeoLm by DavidKhai (@davidkhai) on CodePen.dark

Đườ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ụ:

See the Pen OJMKvrB by DavidKhai (@davidkhai) on CodePen.dark

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ụ:

See the Pen JjGgLxW by DavidKhai (@davidkhai) on CodePen.dark

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ụ:

See the Pen mdVNxvL by DavidKhai (@davidkhai) on CodePen.dark

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

.
.
.
.