HTML <summary> 标签

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

<summary> thẻ <details> phần tử định nghĩa một tiêu đề hiển thị. Bấm vào tiêu đề để xem/ẩn thông tin chi tiết.

Lưu ý:<summary> phần tử nên là <details> phần tử thứ nhất của nó.

Xin xem thêm:

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

thí dụ

ví dụ 1

sử dụng <summary> Thành phần:

<details>
  <summary>Trung tâm Thế giới Mở (Epcot Center)</summary>
  <p>Epcot là công viên chủ đề của khu nghỉ dưỡng Walt Disney World, với những điểm đến thú vị, các gian hàng quốc tế, pháo hoa đoạt giải thưởng và các hoạt động mùa vụ.</p>
</details>

Thử ngay

ví dụ 2

sử dụng CSS để thiết lập <details> và <summary> các樣式:

<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>Trung tâm Thế giới Mở (Epcot Center)</summary>
  <p>Epcot là công viên chủ đề của khu nghỉ dưỡng Walt Disney World, với những điểm đến thú vị, các gian hàng quốc tế, pháo hoa đoạt giải thưởng và các hoạt động mùa vụ.</p>
</details>
</body>
</html>

Thử ngay

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

<summary> Thẻ này cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<summary> Thẻ này cũng 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ẽ hiển thị các giá trị mặc định sau <summary> Thành phần:

summary {
  display: block;
}

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0