<details>标签不支持自动分段，需手动拆分内容并嵌套使用，配合CSS避免外边距折叠、渲染异常及焦点管理问题。
<details> 标签本身不支持“分段展示长文章”——它只控制单个可折叠区块的显隐，没有内置分页、滚动锚点或自动分段逻辑。想用它组织长内容，得靠手动拆分 + 合理嵌套 + 配合 CSS 微调。
用 <details> + <summary> 手动分段
HTML 没有自动分段机制，必须人工把长文按逻辑切开，每段包一层 <details>。比如按章节、小节或问答对来切：
<details> <summary>第一章：背景介绍</summary> <p>这里是第一段正文……</p> </details> <details> <summary>第二章：核心原理</summary> <p>这里是第二段正文……</p> </details>
注意：<summary> 必须是 <details> 的第一个子元素；后续内容（<p>、<ul>、甚至嵌套的 <details>）都算“详情区”，默认收起。
- 不要在
<summary>里放<h2>等语义标题——它本身不是标题级元素，屏幕阅读器会读作“可切换项”，加role="heading"反而破坏可访问性 - 如果某段内容很长，可在其内部再嵌一层
<details>做二级折叠，但别超过两层，否则交互混乱 -
open属性可让某段默认展开，例如<details open>，适合首段或关键说明
避免 <details> 嵌套导致的样式塌陷
原生 <details> 展开后，内部块级元素的 margin 会和父容器外边距合并，造成段间距消失或错位。这不是 bug，是 CSS 外边距折叠（margin collapse）的正常行为。
立即学习“前端免费学习笔记（深入）”；
- 给每个
<details>加margin-bottom: 1rem，而不是依赖内部<p>的 margin - 用
display: flow-root或overflow: hidden触发新的 BFC，阻止外边距穿透（适用于需要精确控制段间距的场景） - 别用
float或position: absolute修复——它们会破坏可访问性和打印样式
移动端展开后内容被截断或无法滚动
某些 Android WebView 或旧版 Safari 在 <details> 展开时，若内容高度突增且容器无明确高度约束，可能触发渲染异常，表现为底部内容不可见或滚动条失效。
- 确保父容器（如
<main>或<article>）有min-height: 100vh或明确高度上下文 - 避免在
<details>内部使用height: 100%或max-height动画——原生标签不支持max-height过渡，强行加会导致展开卡顿或截断 - 如需平滑展开动画，得用 JS 监听
toggle事件 + 手动操作max-height，但要同步处理aria-expanded和焦点管理
真正麻烦的不是怎么写这几十行 HTML，而是当用户连续点开五六个 <details> 后，页面高度猛增、滚动位置丢失、键盘焦点乱跳——这些细节没做，再多的分段也只会让用户更累。
