h2是网页目录骨架的起点，必须位于h1后h3前，需嵌套在section/article内、带合法唯一id、设置scroll-margin-top、并在DOM就绪后索引，四者缺一不可。
h2 是文章目录的骨架起点
一个结构清晰的网页目录，h2 不是可选项，而是默认锚点层级的起始线。浏览器自动生成的文档大纲（Document Outline）、屏幕阅读器的导航跳转、SEO 对内容区块的识别，都从 h2 开始划分主干章节。如果你只用 h1 + h3，中间缺了 h2，大纲会断裂——部分读屏器直接跳过，搜索引擎可能降权该区块。
常见错误现象：
– 页面有多个 h3 但没有对应的 h2 父级
– 用 div + CSS 模拟标题，导致 h2 缺失
– 在 Markdown 渲染后动态插入内容，但未补全 h2 标签
-
h2必须出现在h1之后、h3之前，不能跳级 - 每个
h2应包裹在section或article内，否则连续两个h2可能被合并为同一节 - 若页面含多个逻辑大块（如“安装”“配置”“API 列表”），每个都该用独立的
h2，而非堆砌h3
h2 的 id 属性决定目录锚点是否可用
生成跳转链接时，h2 自身不带 id 就等于没入口。哪怕 DOM 中存在，#setup 这类锚点链接也会失效——浏览器找不到目标节点。
使用场景：
– 手动写目录时，<a href="#introduction">引言</a> 要求对应 <h2 id="introduction">引言</h2>
– JS 动态生成索引时，document.querySelectorAll('h2') 取到的元素若无 id，就无法构造有效 href
立即学习“前端免费学习笔记（深入）”；
- id 值需唯一、合法（不能以数字开头，不能含空格或特殊符号）
- 推荐用 kebab-case：例如
id="api-reference"，而非id="API Reference" - 避免用中文或 emoji 作 id，部分旧版 Safari 和某些 SSR 环境解析失败
scroll-margin-top 对 h2 锚点定位的实际影响
点击目录跳转后标题被固定页眉遮住？问题大概率出在 h2 元素上没设 scroll-margin-top，或设了但父容器限制了滚动行为。
性能与兼容性影响：
– 该样式必须加在 h2 上，如 h2 { scroll-margin-top: 64px; }，加在 body 或 main 无效
– 若父容器有 overflow: hidden 或 overflow: auto，锚点滚动会被截断，退化为原始跳转（顶部对齐）
– 固定定位页眉高度为 56px 时，scroll-margin-top 至少设为 64px，留出 1–2px 安全余量
- 不要依赖 JS 滚动修正——
scroll-margin-top是原生、零延迟的解决方案 - 检查 DevTools 中
h2计算后的scroll-margin-top是否生效（Elements → Computed） - IE 不支持该属性，如需兼容，得回退到 JS +
window.scrollBy()补偿
动态渲染中 h2 的时机与索引重建
Markdown 解析器、CMS 内容组件、React/Vue 的异步区块加载完成后，h2 才真实存在于 DOM 中。此时若索引脚本已在 DOMContentLoaded 阶段执行，就会漏掉这些标题。
容易踩的坑：
– 目录生成只跑一次，后续内容更新（如切换 Tab、展开折叠块）后索引不刷新
– 多次触发重建却未清空旧 ul，导致重复条目累积
– 用 innerText 提取标题文本，但实际 HTML 含 code 或 span，造成文本不一致，Ctrl+F 匹配失败
- 监听
MutationObserver或在渲染完成回调中重建索引，比轮询更可靠 - 重建前先
ul.innerHTML = ''，而不是ul.append(...) - 提取标题文本统一用
textContent，它忽略标签但保留换行和空格，更接近用户所见
h2 标签本身，而是它是否被正确嵌套、是否带合法 id、是否在滚动上下文中被尊重、是否在 DOM 真实存在时被索引——四个条件缺一不可。 
