Thẻ HTML <details>
Thí dụ
Chỉ định các chi tiết mà người dùng có thể mở và đóng theo yêu cầu:
<details>
<summary>Epcot Center</summary>
<p>Epcot is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</details>
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thẻ <details>chỉ định các chi tiết bổ sung mà người dùng có thể mở và đóng theo yêu cầu.
Thẻ <details>thường được sử dụng để tạo một widget tương tác mà người dùng có thể mở và đóng. Theo mặc định, tiện ích được đóng. Khi mở, nó sẽ mở rộng và hiển thị nội dung bên trong.
Bất kỳ loại nội dung nào cũng có thể được đưa vào bên trong <details>thẻ.
Mẹo: Thẻ <summary> được sử dụng <details>để chỉ định một tiêu đề hiển thị cho các chi tiết.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.
| Element | |||||
|---|---|---|---|---|---|
| <details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Thuộc tính
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies that the details should be visible (open) to the user |
Thuộc tính toàn cầu
Thẻ <details>cũng hỗ trợ Thuộc tính chung trong HTML .
Thuộc tính sự kiện
Thẻ <details>cũng hỗ trợ Thuộc tính sự kiện trong HTML .
Các ví dụ khác
Thí dụ
Sử dụng CSS để tạo kiểu cho <details> và <summary>:
<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney
World Resort featuring exciting attractions, international pavilions,
award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
Các trang liên quan
Tham chiếu DOM HTML: Đối tượng Chi tiết
Cài đặt CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị <details>phần tử với các giá trị mặc định sau:
details {
display: block;
}