summary必须是details的第一个直接子元素，否则折叠交互静默失效；允许details嵌套但禁止summary嵌套；open为存在即真布尔属性；h5可放入summary但需设display:inline-block并清除margin。
summary 必须是 details 的第一个直接子元素
浏览器解析时会严格校验结构：summary如果不是 details 的**第一个直接子元素**，整个折叠交互会静默失效——不报错、不警告，但点击没反应、键盘无法聚焦。
常见失效场景包括：
-
details开始标签后有换行+缩进（HTML 解析为空白文本节点） - 前面塞了
<p></p>、<div> 或注释 <code><!-- --> - 写成
<details><p><summary>标题</summary></p></details>（summary被包裹）
✅ 正确写法（紧贴开头，无前置节点）：
<details><summary>配置项</summary><p>这里是内容</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></details>✅ 兼容多行写法（用注释清除空白）：
<details><!-- --><summary>配置项</summary><p>这里是内容</p></details>
details 元素可以嵌套，但不能在 summary 里嵌套 summary
规范允许 details 嵌套，但禁止在 summary 内再放 summary——这不是样式问题，而是 DOM 结构非法。浏览器会直接忽略第二个 summary，导致：
- 点不动、Tab 键无法聚焦
- 屏幕阅读器语义断裂，可能跳过或误读为普通文本
- 所有现代浏览器（含 Safari 17+）均静默降级，不触发任何错误提示
✅ 合法嵌套结构（每层一个 summary，且均为该层 details 的首个子元素）：
<details>
<summary>前端</summary>
<details>
<summary>HTML</summary>
<p>语义化标签</p>
</details>
<details>
<summary>CSS</summary>
<p>Flex 布局</p>
</details>
</details>
open 是布尔属性，不是开关变量
open 只看“是否存在”，不认值。写 open="false"、open="" 甚至 open="0" 都等同于 open，页面加载时仍默认展开。
- 默认关闭 → 不加
open属性：<details><summary>标题</summary></details> - 默认展开 → 显式写
open：<details open><summary>标题</summary></details> - JS 控制必须用
.open属性赋值：el.open = true或el.open = false，而非setAttribute('open', ...)
⚠️ 注意：服务端渲染时若初始设 open，后续 JS 调用 toggle() 可能在 Safari 中触发状态异常，建议统一用 JS 管理状态或避免混用。
summary 里能放 h5 吗？能，但得重置 display
WHATWG 规范明确允许 h1–h6 放入 summary，属于合法 phrasing + heading content。但标题默认是 display: block，会把原生箭头挤到下一行或错位。
✅ 安全写法（内联化 + 清除默认样式）：
<details> <summary><h5 style="display: inline-block; margin: 0; font-weight: 600;">Click this!</h5></summary> <p>lorem blabbersum etc.</p> </details>关键点：
-
display: inline-block让标题与箭头共处一行（比inline更可控盒模型） -
margin: 0消除浏览器对标题的默认外边距，防止垂直偏移 - 不要用
float或position: absolute，会破坏原生触发区域
真正容易被忽略的是：视觉上看起来“对齐了”，不代表语义和可访问性没受损。只要 h5 导致焦点框错位、屏幕阅读器朗读顺序异常，就得回退到纯文本或 span + CSS 模拟标题样式。
