HTML <details> 标签

定义和用法

<details> 标签规定用户可以根据需要打开和关闭的其他详细信息。

<details> 标签通常用于创建用户可以打开和关闭的交互式小部件。默认情况下，小部件是关闭的。打开时，它会展开并显示其中的内容。

任何类型的内容都可以放在 <details> 标签中。

提示：<summary> 标签 与 <details> 结合使用，可为详细信息指定可见的标题。用户点击标题时，会显示出 <details> 定义的内容。

另请参阅：

HTML DOM 参考手册：Details 对象

实例

例子 1

定义用户可以按需打开和关闭的详细信息：

<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>

亲自试一试

属性

属性 值 描述
open open 规定详细信息应该对用户可见（打开）。

全局属性

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

事件属性

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

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <details> 元素：

details {
  display: block;
}

浏览器支持

表中的数字注明了首个完全支持该元素的浏览器版本。

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