Tanda <summary> HTML
定义和用法
<summary>
标签为 <details> 元素 定义了一个可见的标题。点击标题可以查看/隐藏详细信息。
注意:<summary>
元素应该是 <details> 元素 的第一个子元素。
另请参阅:
HTML DOM 参考手册:Summary 对象
实例
例子 1
使用 <summary>
Elemen:
<details> <summary>Center Dunia masa Depan (Epcot Center)</summary> <p>Epcot adalah taman tema di Disney World Resort, yang memiliki tempat menarik, pavilion internasional, kembang api yang mendapat penghargaan dan acara musiman.</p> </details>
例子 2
使用 CSS 设置 <details> 和 <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>Center Dunia masa Depan (Epcot Center)</summary> <p>Epcot adalah taman tema di Disney World Resort, yang memiliki tempat menarik, pavilion internasional, kembang api yang mendapat penghargaan dan acara musiman.</p> </details> </body> </html>
Atribut Global
<summary>
Tanda ini juga mendukung Atribut Global di HTML.
Atribut Acara
<summary>
Tanda ini juga mendukung Atribut Acara di HTML.
Pengaturan CSS Default
Sebagian besar browser akan menampilkan nilai default berikut <summary>
Elemen:
summary { display: block; }
Dukungan Browser
Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
12.0 | 79.0 | 49.0 | 6.0 | 15.0 |