HTML <details> 标签
示例
指定用户可以按需打开和关闭的详细信息
<details>
<summary>Epcot 中心</summary>
<p>Epcot 是位于沃尔特迪士尼世界度假区的主题公园，拥有激动人心的景点、国际馆、屡获殊荣的烟花表演和季节性特别活动。</p>
</details>
自己试试 »
下面还有更多“自己试试”的示例。
定义和用法
The <details> 标签指定用户可以按需打开和关闭的附加详细信息。
The <details> 标签通常用于创建一个用户可以打开和关闭的交互式小部件。默认情况下，小部件是关闭的。当打开时，它会展开并显示其中的内容。
The <details> 标签可以包含任何类型的内容。
提示： The <summary> 标签与 <details> 标签结合使用，为详细信息指定一个可见的标题。
浏览器支持
表中的数字指定了完全支持该元素的第一个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
属性
| 属性 | 值 | 描述 |
|---|---|---|
| open | open | 指定详细信息对用户应该是可见的（打开的）。 |
全局属性
The <details> 标签还支持 HTML 中的全局属性。
事件属性
The <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>Epcot 中心</summary>
<p>Epcot 是位于沃尔特迪士尼世界度假区的主题公园，拥有激动人心的景点、国际馆、屡获殊荣的烟花表演和季节性特别活动。</p>
</details>
</body>
</html>
自己试试 »
相关页面
HTML DOM 参考： Details 对象
默认 CSS 设置
大多数浏览器会使用以下默认值显示 <details> 元素。
details {
display: block;
}
