HTML 中的 <details> 标签用于定义用户可以查看或隐藏的补充细节。它是一个交互式控件,允许用户通过点击来展开或收起内容。默认情况下,<details> 中的内容是隐藏的,除非设置了 open 属性,此时内容会默认显示出来。
通常,<details> 标签会与 <summary> 标签一起使用。<summary> 用来定义一个可见的标题或摘要,用户点击这个标题时,就会切换 <details> 内容的显示状态。
例如:
<details> <summary>点击查看详情</summary> <p>这里是详细内容。</p> </details>
在这个例子中,“点击查看详情”是可见的标题,用户点击后可以查看或隐藏详细内容。
<details> 是 HTML5 中引入的一个语义化标签,旨在减少对 JavaScript 的依赖,实现原生的可折叠功能。