HTML <details> 标签
例子
Specify details that the user can open and close on demand:
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
亲自尝试 »
下面有更多“自己尝试”的示例。
定义和用法
这 <details> tag specifies additional details that the user can open and close on demand.
这 <details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within.
Any sort of content can be put inside the <details> tag.
Tip: 这 <summary> tag is used in conjuction with <details> to specify a visible heading for the details.
浏览器支持
The numbers in the table specify the first browser version that fully supports the element.
| 元素 | |||||
|---|---|---|---|---|---|
| <details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
属性
| 属性 | 价值 | 描述 |
|---|---|---|
| open | open | Specifies that the details should be visible (open) to the user |
全局属性
这 <details> 标签还支持HTML 中的全局属性.
事件属性
这 <details> 标签还支持HTML 中的事件属性.
更多示例
例子
Use CSS to style <details> and <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 is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
亲自尝试 »
相关页面
HTML DOM 参考： Details Object
默认 CSS 设置
大多数浏览器会显示 <details> 元素具有以下默认值：
details {
display: block;
}
