Block trong HTML – Học HTML online – VietTuts

Posted on by mtoplistChuyên mục:Top List

Tất cả các phần tử trong HTML có thể được chia thành hai loại: block elements – các phần tử cấp khối và inline elements – các phần tử nội tuyến.

Phần tử cấp khối thường bắt đầu và kết thúc với một dòng mới khi hiển thị trong trình duyệt. Ví dụ cho các phần tử này là <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, và <address>. Tất cả chúng bắt đầu bởi một dòng mới, và bất cứ cái gì theo sau chúng, đều xuất hiện trên dòng mới này.

Các phần tử nội tuyến xuất hiện trong một câu và không cần phải cách dòng. Ví dụ cho các phần tử này là <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, và <var>.

Có 2 thẻ quan trọng mà chúng ta sử dụng thường xuyên để tạo nhóm các thẻ HTML khác là (i) <div> và (ii) <span>.

Đây là một thẻ cấp khối rất quan trọng đóng vai trò lớn trong việc tạo nhóm các thẻ HTML khác và áp dụng CSS trong nhóm các phần tử. Ngay trong hiện tại thì thẻ <div> có thể được sử dụng để tạo cách bố trí (layout) cho web, tại đây chúng ta xác định các phần khác nhau (trái, phải, trên,…) của trang bằng cách sử dụng thẻ này. Thẻ này không cung cấp bất cứ sự thay đổi về thị giác trên khối nhưng nó có nhiều ý nghĩa hơn khi được sử dụng cùng với CSS.

Dưới đây là một ví dụ đơn giản về việc sử dụng thẻ <div>:


<!DOCTYPE html>
<html>
<head>
<title>Vi du the div trong HTML</title>
</head>
<body>
<!-- Nhom so 1 -->
<div style="color:red">
   <h4>Day la nhom dau tien</h4>
   <p>Danh sach ngon ngu lap trinh:</p>
   <ul>
   <li>C++</li>
   <li>Java</li>
   <li>PHP</li>
   <li>Python</li>
   </ul>
</div>
<!-- Nhom so 2 -->
<div style="color:green">
   <h4>Day la nhom thu hai</h4>
   <p>Danh sach cac hang dien thoai:</p>
   <ul>
   <li>Apple</li>
   <li>Xiaomi</li>
   <li>Samsung</li>
   <li>Sony</li>
   </ul>
</div>
</body>
</html>

mtoplist