HTML <summary> 標簽

定義和用法

<summary> 標簽為 <details> 元素 定義了一個可見的標題。點擊標題可以查看/隱藏詳細信息。

注意：<summary> 元素應該是 <details> 元素 的第一個子元素。

另請參閱：

HTML DOM 參考手冊：Summary 對象

實例

例子 1

使用 <summary> 元素：

<details>
  <summary>未來世界中心（Epcot Center）</summary>
  <p>Epcot 是華特迪士尼世界度假區的主題公園，擁有令人興奮的景點、國際展館、屢獲殊榮的煙花和季節性活動。</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>未來世界中心（Epcot Center）</summary>
  <p>Epcot 是華特迪士尼世界度假區的主題公園，擁有令人興奮的景點、國際展館、屢獲殊榮的煙花和季節性活動。</p>
</details>
</body>
</html>

親自試一試

全局屬性

<summary> 標簽還支持 HTML 中的全局屬性。

事件屬性

<summary> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <summary> 元素：

summary {
  display: block;
}

瀏覽器支持

表中的數字注明了首個完全支持該屬性的瀏覽器版本。

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