HTML <summary> 标签

在html中，summary标签是html5中新增标签，是使用来为details元素定义一个可见的标题，当用户点击该标题的时候，将显示出详细信息。summary标签必须和details标签配合使用，单独使用没有任何意义。

实例

<!DOCTYPE html>
<html>
<body>
<h1>summary 元素</h1>
<details>
  <summary>未来世界</summary>
  <p>未来世界(Epcot Center)，是迪士尼的高科技馆，可以参观太空地球馆、动力世界、大地之旅、海底奇观、生命探索、能源馆、大地馆、色香味全立体感触电影。</p>
</details>
</body>
</html>

运行一下

定义和用法

<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。

浏览器支持

元素
<summary>	12.0	79.0	49.0	6.0	15.0

HTML 4.01 与 HTML 5 之间的差异

<summary> 标签是 HTML 5 中的新标签。

提示和注释

提示：请与<details> 标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。注释："summary" 元素应该是 "details" 元素的第一个子元素。

全局属性

<summary> 标签支持 HTML 中的全局属性。

事件属性

<summary> 标签支持 HTML 中的事件属性。

更多实例

<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>未来世界(Epcot Center)，是迪士尼的高科技馆，可以参观太空地球馆、动力世界、大地之旅、海底奇观、生命探索、能源馆、大地馆、色香味全立体感触电影。</p>
</details>
</body>
</html>