Kết nối

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

355 lượt xem 
 Cập nhật lần cuối: 29/08/2017 lúc 18:43:53
Thể loại: HTML/HTML5, Thiết kế Web 

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ình luận Facebook

1
Để lại bình luận

avatar
1000
0 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Các tác giả bình luận
Các tác giả bình luận gần đây
  Theo dõi  
mới nhất cũ nhất được bình chọn nhiều nhất
Thông báo của