details 和 summary 是 html5 唯一原生支持渐进式披露的语义组件，summary 必须为 details 的第一个子元素，open 是存在性属性，结构错误将导致语义失效、可访问性降级。
这两个标签不是“可选的语义增强”，而是 HTML5 中唯一原生支持渐进式披露（progressive disclosure）的语义化交互组件——details 表示一个用户可主动展开/收起的独立信息单元，summary 则是该单元的、必须存在的控制入口和摘要说明。
为什么summary必须是details的第一个子元素
这不是浏览器“建议”，而是 WHATWG 规范强制要求：若 summary 缺失、或前面有空格/注释/p 等任何节点，浏览器会降级处理——有的直接忽略折叠逻辑，有的只渲染内容但不可点。Chrome 和 Firefox 均会静默失效，不报错也不提示。
- 常见误写：
<details><!-- 注释 --><summary>标题</summary>...</details>→ 点击无反应 - 正确结构必须严格为：
<details><summary>标题</summary>其余内容</details> - 验证方法：用浏览器开发者工具检查 DOM 树，确认
summary是details的第一个childElement，而非第一个childNodes
open 属性不是布尔值，而是存在性属性
写成 open="false" 或 open="" 都会让 details 初始展开，因为浏览器只检测该属性是否存在，不解析其值。JS 控制时也必须用 element.open = true/false，而非 setAttribute('open', ...)。
- HTML 正确写法只有两种：
<details open></details>（展开），<details></details>（收起） - JS 错误写法：
el.setAttribute('open', 'true')→ 可能触发两次 toggle 或无响应 - JS 正确写法：
el.open = true（同步生效，且兼容 Safari 15.4+） - 注意：IE 完全不支持，旧版 Edge（EdgeHTML）也跳过该属性，直接渲染为静态块
语义价值体现在可访问性和 SEO 上，不是“锦上添花”
屏幕阅读器会自动为 details 注入 aria-expanded 和 aria-controls，并把 summary 当作按钮朗读；搜索引擎也明确将 details 内容视作页面有效文本，不影响收录权重——前提是结构合规。
- 若用
div+ JS 模拟，必须手动补全所有 ARIA 属性，否则 WCAG 2.1 AA 直接不达标 - 嵌套多层
details时，每层都独立生成语义上下文，无需额外标注 - 禁止在
summary里塞button或a：它们会劫持焦点和事件，破坏原生语义流 - 移动端 Safari（iOS 15.4 之前）对
summary热区识别极窄，建议加padding: 8px 12px并设cursor: pointer
真正容易被忽略的是：语义有效性完全依赖结构洁癖——空格、换行、注释、CSS 的 display 干预，任何一个都可能让整个组件退化为不可访问的视觉装饰。它不像 article 或 nav 那样“容忍错误”，而更像一个开关电路：触点偏移一毫米，就彻底断路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
