和 是 HTML5 语义化可折叠标签，天然支持无障碍访问、自动状态管理及搜索引擎识别，无需 JS 即可实现交互，但存在多开互斥、动画等限制。
<details></details> 和 <summary></summary> 是 HTML5 原生语义化标签，专为“可折叠内容”场景设计。它们不是为了视觉效果而生的通用容器，而是明确表达了「一段可展开/收起的补充信息」这一语义。
这种语义优势体现在三个层面：
天然支持无障碍访问（无需额外 ARIA）<details></details> 默认具有 role="group"，<summary></summary> 默认具有 role="button"，且浏览器自动处理键盘交互（空格、回车触发切换）、焦点管理与状态同步。屏幕阅读器能准确播报“已折叠”或“已展开”，用户无需手动添加 aria-expanded 或监听 toggle 事件——语义即行为，语义即可访问性。
结构即逻辑，无需 JS 维护状态
只要 <summary></summary> 是 <details></details> 的第一个子元素且有结束标签，点击就能自动切换 open 属性。你不需要写 onclick、不需维护 isExpanded 变量、也不用担心状态不同步。HTML 本身已定义了这个交互契约，语义标签自带行为逻辑。
搜索引擎与工具链可识别意图
搜索引擎爬虫、代码分析工具、文档生成器能通过 <details></details> 推断该内容属于“辅助性、非必需展示信息”。例如，技术文档中把 API 参数说明放在 <details></details> 里，既保持页面主干简洁，又保留语义完整性，不影响 SEO 权重分配或自动化文档提取。
语义不等于妥协，但需注意边界
它不支持多开互斥（需 JS 干预）、无法直接做 height 过渡动画、旧版 Safari 对 ::marker 支持滞后——这些是功能限制，不是语义缺陷。语义优势恰恰在于：当你不需要动效、不强求单开、且目标环境支持现代浏览器时，它用最简结构达成最可靠、最轻量、最合规的交互表达。
