HTML网页中details标签和summary标签的嵌套规则-html教程-PHP中文网

summary必须是details的第一个直接子元素，否则折叠交互静默失效；允许details嵌套但禁止summary嵌套；open为存在即真布尔属性；h5可放入summary但需设display:inline-block并清除margin。

html网页中details标签和summary标签的嵌套规则

summary 必须是 details 的第一个直接子元素

浏览器解析时会严格校验结构：summary如果不是 details 的**第一个直接子元素**，整个折叠交互会静默失效——不报错、不警告，但点击没反应、键盘无法聚焦。

常见失效场景包括：

details 开始标签后有换行+缩进（HTML 解析为空白文本节点）
前面塞了、 或注释
写成标题（summary 被包裹）


✅ 正确写法（紧贴开头，无前置节点）：
<details><summary>配置项</summary><p>这里是内容</p></details>
✅ 兼容多行写法（用注释清除空白）：
<details><!-- --><summary>配置项</summary><p>这里是内容</p></details>
details 元素可以嵌套，但不能在 summary 里嵌套 summary
规范允许 details 嵌套，但禁止在 summary 内再放 summary——这不是样式问题，而是 DOM 结构非法。浏览器会直接忽略第二个 summary，导致：

点不动、Tab 键无法聚焦
屏幕阅读器语义断裂，可能跳过或误读为普通文本
所有现代浏览器（含 Safari 17+）均静默降级，不触发任何错误提示

✅ 合法嵌套结构（每层一个 summary，且均为该层 details 的首个子元素）：

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										
<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 属性：标题

默认展开 → 显式写 open：标题

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 模拟标题样式。