[HTML/HTML5] Phần 18: Các phần tử nội dòng và khối

Cập nhật lần cuối: 29/08/2017 lúc 18:43:53

Mỗi phần tử HTML có 1 giá trị hiển thị mặc định tùy theo dạng phần tử. Giá trị hiển thị mặc định của đa số phần tử là khối hoặc nội dòng.

Phần tử mức khối (phần tử khối)
Một phần tử ở mức khối (block-level) luôn bắt đầu ở dòng mới và chiếm độ rộng toàn phần sẵn có (kéo căng theo chiều trái và phải đến mức có thể). Phần tử div là phần tử điển hình của một phần tử mức khối. Ngoài ra các phần tử mức khối còn có h1, h2, h3, h4, h5, h6, p, và form.

Phần tử nội dòng
Một phần tử nội dòng không bắt đầu ở dòng mớ và chỉ chiếm độ rộng khi cần thiết. Phần tử span là phần tử nội dòng bên trong 1 đoạn văn bản. Một số phần tử nội dòng là span, a và img.

Phần tử div
Phần tử div thường được dùng là 1 vùng chứa các phần tử khác. Vì vậy, div là phần tử rất phổ biến trong giao diện thiết kế web của hầu hết các website trên Internet hiện nay.

Phần tử div không cần thuộc tính, nhưng hai thuộc tính style và class lại rất hay được sử dụng. Khi sử dụng cùng với CSS, phần tử div có thể định nghĩa phong cách cho các khối nội dung mà nó chứa bên trong.

<!DOCTYPE html>
<html>
<body>
<div style="background-color:yellow;color:blue;padding:20px;">
  <h2>Dammio</h2>
  <p>Dammio là 1 website chứa nội dung kiến thức về thiết kế, lập trình Web và học tiếng Anh, được thành lập vào năm 2016.</p>
</div>
</body>
</html>

Phần tử span
Phần tử span thường được dùng là vùng chứa văn bản. Tương tự như div, phần tử span không cần thuộc tính, nhưng hai thuộc tính style và class lại được sử dụng phổ biến. Khi sử dụng cùng với CSS, phần tử span có thể định nghĩa phong cách cho các đoạn văn bản bên trong.

<!DOCTYPE html>
<html>
<body>
<h1>Xin chào <span style="color:red">Dammio</span> !</h1>
</body>
</html>

Kết luận: Bài viết đã trình bày về các phần tử khối và nội dòng trong HTML. Trong đó, phần tử div và span là 2 phần tử quan trọng trong thiết kế Web, các bạn nên áp dụng và hiểu rõ hai phần tử này.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: [HTML/HTML5] Phần 38: Chuyển đổi mã HTML4 thành HTML5

Trích dẫn bài viết

APA:
Dammio. (2017). [HTML/HTML5] Phần 18: Các phần tử nội dòng và khối. https://www.dammio.com/2017/08/26/htmlhtml5-phan-18-cac-phan-tu-noi-dong-va-khoi.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 18: Các phần tử nội dòng và khối}, year = {2017}, url = {https://www.dammio.com/2017/08/26/htmlhtml5-phan-18-cac-phan-tu-noi-dong-va-khoi}, urldate = {2024-09-07} }

Kết nối