Thẻ HTML <div>

  • Trang trước <dir>
  • Trang tiếp theo <dl>

Định nghĩa và cách sử dụng

<div> Thẻ định nghĩa phân chia hoặc phần (phần hoặc mục, phân vùng hoặc mục, division/section) trong tài liệu HTML.

<div> Thẻ có thể chia tài liệu thành các phần độc lập và khác nhau. Nó có thể được sử dụng làm công cụ tổ chức chặt chẽ và không liên quan đến bất kỳ định dạng nào.

Mọi loại nội dung đều có thể đặt được <div> trong thẻ!<div> sử dụng làm hộp chứa phần tử HTML, sau đó đặt phong cách bằng CSS hoặc thực hiện thao tác bằng JavaScript.

Nếu thẻ id hoặc class để đánh dấu <div>nếu sử dụng class hoặc id Thuộc tính, có thể dễ dàng <div> thiết lập phong cách cho thẻ.

Lưu ý:Mặc định, trình duyệt luôn <div> Đặt một dấu cách mới trước và sau phần tử.

Cách sử dụng

<div> Là phần tử cục bộ. Điều này có nghĩa là nội dung của nó tự động bắt đầu một dòng mới. Thực tế, dòng mới là <div> biểu hiện định dạng duy nhất của nó. Có thể thông qua <div> của class hoặc id định dạng bổ sung.

Không cần phải áp dụng <div> class hoặc id, mặc dù việc này cũng có một số lợi ích nhất định.

Có thể thêm cùng một <div> Áp dụng phần tử class hoặc id Thuộc tính, nhưng trường hợp phổ biến hơn là chỉ áp dụng một trong hai. Sự khác biệt chính giữa两者 là class được sử dụng cho nhóm phần tử (phần tử tương tự, hoặc có thể hiểu là phần tử thuộc một loại), trong khi id được sử dụng để xác định phần tử duy nhất.

Xin xem thêm:

Giáo trình HTML:HTML Phần tử khối và phần tử nội bộ

Giáo trình HTML:HTML Lập kế hoạch

HTML DOM Tài liệu tham khảo:Đối tượng Div

Mẫu

Phần <div> sử dụng CSS để đặt định dạng trong tài liệu:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Đây là tiêu đề trong phần div</h2>
  <p>Đây là văn bản trong phần div.</p>
</div>
</body>
</html>

Thử ngay

Phân tích trường hợp

<body>
 <h1>Website mới</h1>
  <p>Một số văn bản. Một số văn bản. Một số văn bản...</p>
  ...
 <div class="news">
  <h2>Titile tin tức 1</h2>
  <p>Một số văn bản. Một số văn bản. Một số văn bản...</p>
  ...
</div>
 <div class="news">
  <h2>Titile tin tức 2</h2>
  <p>Một số văn bản. Một số văn bản. Một số văn bản...</p>
  ...
 </div>
 ...
</body>

Giải thích ví dụ

Như bạn đã thấy, đoạn HTML trên này mô phỏng cấu trúc của trang tin tức. Mỗi div kết hợp tiêu đề và tóm tắt của mỗi tin tức, có nghĩa là div thêm vào cấu trúc bổ sung cho tài liệu. Đồng thời, vì các div thuộc cùng một loại元素, nên có thể sử dụng class="news" để đánh dấu các div này, điều này không chỉ thêm vào ý nghĩa hợp lý cho div mà còn便于 tiếp tục định dạng div bằng cách sử dụng phong cách, có thể nói là một việc làm hai tại một lúc.

Lưu ý:Nếu muốn học sâu hơn về cách sử dụng class và id, hãy đọc chương 'W3school Cấu trúc đánh dấu' phần 'div, id và các trợ thủ khác'.

Thuộc tính toàn cục

<div> Thẻ còn hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<div> Thẻ còn hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ sử dụng giá trị mặc định sau để hiển thị <div> Thành phần:

div {
  display: block;
}

Thử ngay

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ
  • Trang trước <dir>
  • Trang tiếp theo <dl>