必须包含–标题才生效，否则屏幕阅读器不可见、lighthouse报错；标题可视觉隐藏但需层级正确；仅当语义分段明确时才使用，否则用更合适。
为什么直接用 <section></section> 会失效
没标题的 <section></section> 在屏幕阅读器里不可见，Lighthouse 会报「Empty section」，浏览器大纲视图显示为空节点——它不是视觉分块工具，而是语义锚点。如果你只是想加个 margin 或让 JS 找个容器操作，<div> 更诚实、更轻量。<h3>
<code><section></section> 必须配 <h2></h2>–<h6></h6> 才算真正生效
标题不一定要视觉可见，但必须存在且层级正确：
- 父级
<section></section>用<h2></h2>，子节只能用<h3></h3>；跳级（比如<h2></h2>后跟<h4></h4>）或平级（连续多个<h2></h2>）都会破坏文档大纲 - 可用
<h3 class="visually-hidden">部署步骤</h3>满足语义要求又不干扰设计 - 整页只包一个
<section></section>，等于没分段——它描述的是“文档内的一段”，不是“整个文档”
程序化生成 <section></section> 时的关键判断逻辑
从长文本或 CMS 数据中自动划分段落，不能只靠换行符或字数切分，得识别语义边界：
- 检测到以「## 」开头的 Markdown 行 → 提取为
<h2></h2>文本，包裹进新<section></section> - 遇到空行 + 下一段首词是「前提」「步骤」「注意事项」等关键词 → 触发新
<section></section>创建 - 若某段内容无法提炼出可命名的主题（比如纯配置项列表、无上下文的命令集合），就别硬套
<section></section>，改用<div class="config-block"> <li>动态插入时，记得给每个 <code><section></section>加id属性，如id="section-deployment"，否则锚点跳转和 CSS 定位都失效
嵌套与边界容易被忽略的细节
<section></section> 可以包含多个 <section></section>（如「原理」「示例」「限制」），但反过来不行：不能让 <section></section> 包着整篇 <article></article> 作为唯一子元素。真实结构应是：
<article><header><h1>标题</h1></header><section><h2>背景</h2>...</section><section><h2>实现</h2>...</section><footer><p>作者信息</p></footer></article>
最常被跳过的一步：在 JS 动态生成后，用 document.querySelectorAll('section > h2, section > h3') 校验是否每个 <section></section> 都有且仅有一个顶层标题——这是语义成立的硬门槛。
