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