Khối HTML và các phần tử nội tuyến
Mọi phần tử HTML đều có giá trị hiển thị mặc định, tùy thuộc vào loại phần tử đó.
Hai giá trị hiển thị phổ biến nhất là khối và nội tuyến.
Các phần tử cấp khối
Phần tử cấp khối luôn bắt đầu trên một dòng mới và trình duyệt tự động thêm một số khoảng trắng (lề) trước và sau phần tử.
Phần tử cấp khối luôn chiếm toàn bộ chiều rộng có sẵn (kéo dài sang trái và phải hết mức có thể).
Hai phần tử khối thường được sử dụng là: <p> và <div> .
Phần tử <p> xác định một đoạn văn trong tài liệu HTML.
Phần tử <div> xác định một phần hoặc một phần trong tài liệu HTML.
Phần tử <p> là phần tử cấp khối.
Dưới đây là các phần tử cấp khối trong HTML:
Các phần tử nội tuyến
Phần tử nội tuyến không bắt đầu trên một dòng mới.
Phần tử nội tuyến chỉ chiếm nhiều chiều rộng nếu cần thiết.
Đây là phần tử <span> bên trong một đoạn văn.
Dưới đây là các phần tử nội tuyến trong HTML:
Lưu ý: Phần tử nội tuyến không thể chứa phần tử cấp khối!
Phần tử <div>
Phần tử <div> thường được sử dụng làm vùng chứa cho các phần tử HTML khác.
Phần tử <div> không có thuộc tính bắt buộc nhưng style , class và id là phổ biến.
Khi được sử dụng cùng với CSS, phần tử <div> có thể được sử dụng để tạo kiểu cho các khối nội dung:
Ví dụ
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Hãy tự mình thử » Bạn sẽ tìm hiểu thêm về phần tử <div> trong chương tiếp theo .
Phần tử <span>
Phần tử <span> là phần chứa nội tuyến được sử dụng để đánh dấu một phần văn bản hoặc một phần của tài liệu.
Phần tử <span> không có thuộc tính bắt buộc nhưng style , class và id là phổ biến.
Khi được sử dụng cùng với CSS, phần tử <span> có thể được sử dụng để tạo kiểu cho các phần của văn bản:
Ví dụ
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold;">dark
green</span> eyes.</p>
Hãy tự mình thử »Tóm tắt chương
- Phần tử cấp khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn
- Phần tử nội tuyến không bắt đầu trên một dòng mới và nó chỉ chiếm đủ chiều rộng nếu cần thiết
- Phần tử
<div>ở cấp độ khối và thường được sử dụng làm vùng chứa cho các phần tử HTML khác - Phần tử
<span>là phần chứa nội tuyến được sử dụng để đánh dấu một phần văn bản hoặc một phần của tài liệu
Bài tập HTML
Thẻ HTML
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi.
Video: Khối HTML và Nội tuyến
