HTML <details> 標籤
示例
指定使用者可以按需開啟和關閉的詳細資訊
<details>
<summary>未來世界中心</summary>
<p>未來世界中心是華特迪士尼世界度假區的一個主題公園,擁有激動人心的景點、國際展館、屢獲殊榮的煙花表演和季節性特別活動。</p>
</details>
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
<details>
標籤指定使用者可以按需開啟和關閉的額外詳細資訊。
<details>
標籤通常用於建立一個使用者可以開啟和關閉的互動式小部件。預設情況下,該小部件是關閉的。當開啟時,它會展開並顯示其內部內容。
任何型別的內容都可以放在 <details>
標籤內。
提示: <summary> 標籤與 <details>
結合使用,以指定詳細資訊的可見標題。
瀏覽器支援
表格中的數字表示完全支援該元素的首個瀏覽器版本。
元素 | |||||
---|---|---|---|---|---|
<details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
屬性
Attribute | 值 | 描述 |
---|---|---|
open | open | 指定詳細資訊應向用戶可見(開啟) |
全域性屬性
<details>
標籤還支援 HTML 全域性屬性。
事件屬性
<details>
標籤還支援 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 參考:Details 物件
預設 CSS 設定
大多數瀏覽器將以以下預設值顯示 <details>
元素
details {
display: block;
}