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 这类锚点链接也会失效——浏览器找不到目标节点。

使用场景：
– 手动写目录时，@#@#@#@#@#@#@#@#@#@0 要求对应 <h2 id="introduction">引言</h2>
– JS 动态生成索引时，document.querySelectorAll('h2') 取到的元素若无 id，就无法构造有效 href

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 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 真实存在时被索引——四个条件缺一不可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！