HTML <details> 标签用于创建包含一些信息的披露小部件，当小部件切换到打开状态时可见。应使用 HTML <summary> 标签提供摘要（或标签）。
在屏幕上使用一个小的黑色三角形表示披露小部件，该三角形旋转以指示打开和关闭状态，三角形旁边有标签。摘要的内容用作披露小部件的标签。
语法
<details>.....</details>
属性
<details> 标签支持 HTML 的 全局属性 和 事件属性。也接受下面列出的特定属性。
| 属性 | 值 | 描述 |
|---|---|---|
| open | open | 指定披露小组件是否打开状态，默认情况下它处于关闭状态。 |
<details> 标签的示例
下面的示例将说明<details> 标签的用法。在何处、何时以及如何使用<details> 标签来创建任何网站的详细信息元素。
创建 <details> 标签元素
以下程序显示了 <details> 标签的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML details tag</title>
</head>
<body>
<!--create details tag-->
<p>Click on the below label to open the details.</p>
<details>
<summary>Open</summary>
You clicked on label(i.e. summary).
</details>
</body>
</html>
具有 Open 属性的 <details> 标签
在这里，我们在 'details' 元素中使用 'open' 属性来设置网页加载后应可见的详细信息内容。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML details tag</title>
</head>
<body>
<!--create details tag-->
<p>HTML 'details' element example.</p>
<details open>
<summary>Open</summary>
You have used the 'open' attribute,
so by default, it opened already.
</details>
</body>
</html>
使用<details> 标签的披露小部件
让我们看一下以下示例，我们正在创建一个披露小部件，使用 <details> 标签来添加用户可以切换打开和关闭的其他信息。我们使用 CSS 来设置带有 <details> 标签的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML details tag</title>
<style>
details {
border: 1px solid blue;
border-radius: 10px;
padding: 4px;
color: green;
}
details[open] {
padding: 1px;
}
details[open] summary {
border-bottom: 1px solid black;
margin-bottom: 5px;
color: red;
}
</style>
</head>
<body>
<!--create details tag-->
<p>HTML 'details' element example.</p>
<details>
<summary>Open</summary>
A disclosure widget is represented onscreen using a
small black triangle that rotates to indicate open
and closed status, with labels next to the triangles.
The content of the summary is used as a label for the
disclosure widget.
</details>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
