HTML5 <details> 标签

HTML5 中的 <details> 标签用于创建一个可以显示或隐藏内容的折叠区块。通过在 <details> 元素中包裹一个 <summary> 元素来提供折叠区块的标题。

使用方法

<details>
  <summary>这是一个折叠区块的标题</summary>
  这里是区块内容。
</details>

其中，<summary> 元素必须包含在 <details> 元素内部，用于提供折叠区块的标题。

基本属性

• open：可选，如果出现这个属性，那么折叠区块默认展开。
• disabled：可选，如果出现这个属性，那么折叠区块将不可用。

浏览器支持情况

该元素兼容性较好，主流浏览器均支持。

使用场景

<details> 标签可用于：

• 为页面提供交互性的内容展示效果，可以合并多个内容元素为一个折叠展示。
• 与 JavaScript 一起使用，根据数据动态展示内容。

注意事项

• 在使用时请注意语义化，不要滥用该标签。
• 某些浏览器可能需要 CSS 样式来定制默认的样式，参见 MDN 的建议。
• summary 元素中不应包含交互性元素，如按钮或链接。