HTML <summary> 標籤
示例
使用 <summary> 元素
<details>
<summary>未來世界中心</summary>
<p>未來世界中心是華特迪士尼世界度假區的一個主題公園，擁有激動人心的景點、國際展館、屢獲殊榮的煙花表演和季節性特別活動。</p>
</details>
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
<summary> 標籤定義了 <details> 元素的可見標題。點選標題可以檢視/隱藏詳細資訊。
注意：<summary> 元素應該是 <details> 元素的第一個子元素。
瀏覽器支援
表格中的數字表示完全支援該元素的首個瀏覽器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <summary> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
全域性屬性
<summary> 標籤還支援 HTML 中的全域性屬性。
事件屬性
<summary> 標籤還支援 HTML 中的事件屬性。
更多示例
示例
使用 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>未來世界中心</summary>
<p>未來世界中心是華特迪士尼世界度假區的一個主題公園，擁有激動人心的景點、國際展館、屢獲殊榮的煙花表演和季節性特別活動。</p>
</details>
</body>
</html>
自己動手試一試 »
相關頁面
HTML DOM 參考：Summary 物件
預設 CSS 設定
大多數瀏覽器將以以下預設值顯示 <summary> 元素
summary {
display: block;
}
