定义和用法
<details> 标签规定用户可以根据需要打开和关闭的其他详细信息。
<details> 标签通常用于创建用户可以打开和关闭的交互式小部件。默认情况下，小部件是关闭的。打开时，它会展开并显示其中的内容。
任何类型的内容都可以放在 <details> 标签中。
提示：<summary> 标签 与 <details> 结合使用，可为详细信息指定可见的标题。用户点击标题时，会显示出 <details> 定义的内容。
另请参阅：
HTML DOM 参考手册：Details 对象
浏览器支持
表中的数字注明了首个完全支持该元素的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
默认的 CSS 设置
大多数浏览器将使用以下默认值显示 <details> 元素：
|
1 2 3 |
details { display: block; } |
属性
| 属性 | 值 | 描述 |
|---|---|---|
| open | open | 规定详细信息应该对用户可见（打开）。 |
实例
例子 1
定义用户可以按需打开和关闭的详细信息：
|
1 2 3 4 |
<details> <summary>脚本之家介绍</summary> <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p> </details> |
效果
脚本之家介绍
例子 2
使用 CSS 设置 <details> 和 <summary> 的样式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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>脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p> </details> </body> </html> |
details与summary标签
一，details标签
用于描述文档或文档某个部分的内容
二，summary标签
与details配合使用，可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
