Ngôn ngữ đánh dấu siêu văn bản còn được gọi là HTML, được sử dụng để xây dựng các ứng dụng web. Các thẻ HTML, thường được gọi là các phần tử, là khía cạnh quan trọng nhất của ngôn ngữ HTML. Các thẻ HTML nhúng và hiển thị nội dung hoặc thông tin trên các trang web. Có hai loại thẻ HTML: thẻ trống và thẻ chứa.
Blog này sẽ hướng dẫn cách làm việc với thẻ rỗng và thẻ chứa trong HTML.
Thẻ trống
Các thẻ trống còn được gọi là “ độc thân ' hoặc là ' khoảng trống ” thẻ. Thẻ void không bao giờ chứa bất kỳ nội dung nào, nhưng có thể chỉ định các thuộc tính. Các thẻ này không có thẻ kết thúc và có thể chứa dấu gạch chéo ngược trong thẻ. Ví dụ về các thẻ trống là “
”, “”, “”, “
cú pháp
Cú pháp đề cập đến các phần tử void trong HTML như sau:
< thẻ rỗng />
Để xem cách làm việc với các thẻ trống, hãy xem ví dụ bên dưới. Các '
Thẻ ” được gọi là thẻ ngắt dòng và được sử dụng để ngắt dòng:
< P > Thẻ trống HTML < anh > Dòng nghỉ Nhãn P >
Đầu ra chỉ ra rằng “
” thẻ đã ngắt dòng:
Chúng ta có thể thêm các thuộc tính tạo kiểu CSS vào các thẻ HTML. Các '
< giờ Phong cách = 'đường viền trên cùng: 3px nét đứt màu đỏ;' > Dòng nghỉ Nhãn
P >
Các ' đường viền trên cùng ” Thuộc tính CSS được áp dụng cho “
đầu ra
Cho đến giờ, chúng ta đã thảo luận về các thẻ rỗng HTML. Bây giờ, chúng ta sẽ xem xét các thẻ vùng chứa HTML trong phần tiếp theo.
Thẻ vùng chứa
Các thẻ vùng chứa HTML bao gồm ba phần: thẻ bắt đầu, nội dung và thẻ kết thúc. Cú pháp của thẻ chứa HTML được đưa ra như sau:
< ngày bắt đầu > Nội dung thẻ kết thúc >Hãy xem các ví dụ bên dưới để tìm hiểu cách hoạt động của thẻ vùng chứa trong HTML.
Ví dụ 1: Cách thêm một đoạn văn trong HTML?
Các ' ” Thẻ được sử dụng để nhúng đoạn văn vào tài liệu HTML:
< P > Đây là thẻ đoạn văn P >đầu ra
Ví dụ 2: Cách thêm tiêu đề trong HTML?
Có sáu cấp độ thẻ chứa tiêu đề có thể được sử dụng để thêm tiêu đề vào trang web. Hãy đặt chúng vào một tài liệu HTML để xem cách chúng hoạt động và hiển thị trên trang web:
< h1 > Linux h1 >< h2 > Linux h2 >
< h3 > Linux h3 >
< h4 > Linux h4 >
< h5 > Linux h5 >
< h6 > Linux h6 >
đầu ra
Chúng tôi có thể cung cấp kiểu nội tuyến cho các thẻ này. Xem xét ví dụ bên dưới, ví dụ này cho biết cách áp dụng các thuộc tính tạo kiểu CSS khác nhau cho các thẻ này:
< h1 Phong cách = 'background-color: thistle; font-family: cursive;' > Linux h1 >< h2 Phong cách = 'màu nền: lúa mì; text-align: center;' > Linux h2 >
< h3 Phong cách = 'màu nền: cà chua; màu: trắng;' > Linux h3 >
< h4 Phong cách = 'họ phông chữ: 'Trebuchet MS'; màu nền: vàng xanh;' > Linux h4 >
< h5 Phong cách = 'màu nền: tím;' > Linux h5 >
< h6 Phong cách = 'màu nền: khói trắng;' > Linux h6 & gt
Dưới đây là lời giải thích về các thuộc tính đã nêu ở trên:
- Các ' màu nền ” thuộc tính thêm màu vào nền của phần tử.
- “ họ phông chữ ” thuộc tính điều chỉnh kiểu phông chữ của phần tử.
- “ căn chỉnh văn bản ” thuộc tính điều chỉnh vị trí hoặc căn chỉnh văn bản.
đầu ra
Chúng tôi đã chỉ cho bạn cách sử dụng thẻ rỗng và thẻ chứa của HTML.
Phần kết luận
Các thẻ trống và thẻ vùng chứa là các thành phần chính của tài liệu HTML nhúng nội dung và thông tin trên trang web. Các thẻ trống không chứa bất kỳ nội dung nào và chỉ bao gồm thẻ bắt đầu có dấu gạch chéo ngược ở cuối thẻ, chẳng hạn như
. Tuy nhiên, các thẻ vùng chứa chứa thẻ bắt đầu và thẻ kết thúc cùng với nội dung. Blog này đã trình bày chi tiết về hoạt động của các phần tử trống và vùng chứa trong HTML.