直接用h2–h6标题+合理结构即可自动生成语义大纲并支持锚点跳转，但必须满足四个硬性条件：不跳级、每个标题带合法id、用section包裹逻辑块、id值符合HTML规范且去重。
直接用 h2–h6 标题 + 合理包裹结构，就能让浏览器自动生成语义化大纲并支持锚点跳转；不需要 JS 就能工作，但必须满足四个硬性条件：不跳级、不漏 id、用 section 包裹逻辑块、id 值合法。
为什么 h2–h6 自带索引能力却常失效
浏览器和爬虫靠解析标题层级生成文档大纲（Document Outline），不是靠 class 或 JS。但以下情况会让这个机制静默失效：
-
h2后直接写h4：大纲会把h4当作h3的子级，但语义断裂，屏幕阅读器可能跳过或误读 - 连续两个
h2都没被section包裹：部分读屏器合并为同一节，导致“M 键跳转”少一节 -
h3写在aside里但没配aria-labelledby：该区块被当作独立 sectioning root，h3被重置为顶层，破坏主流程层级 - 手动加了
class="title-3"却忘了给对应元素设id：锚点链接href="#usage"指向空目标，点击无反应也不报错
id 必须怎么生成才不会点不动
HTML 对 id 值有严格校验：不能含空格、中文、点号、冒号等，也不能以数字开头。浏览器遇到非法 id 会忽略锚点行为。
- 正确做法是清洗文本：
textContent.trim().replace(/[^a-z0-9\u4e00-\u9fa5]+/gi, '-').replace(/^-+|-+$/g, '').toLowerCase() - 重复标题（如多个“安装步骤”）必须加序号后缀：
id="install-steps-1"、id="install-steps-2" - 空标题或纯空白符标题要跳过，否则生成
id=""，导致href="#undefined"这类静默失败 - 避免和
name属性冲突：旧表单里<input name="overview">会劫持#overview锚点，删掉或改名
scroll-margin-top 不生效的三个配置盲区
加了 scroll-margin-top: 64px 却还是被固定导航栏遮住标题？问题大概率不在 CSS 本身。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 样式必须加在目标标题上，例如
h2 { scroll-margin-top: 64px; }，不能只写在body或main - 父容器不能有
overflow: hidden或overflow: auto，否则锚点滚动被截断，退化为粗暴跳转 - 如果页眉是
position: fixed且高 56px，scroll-margin-top至少设 64px——少 1px 都可能残留遮挡
不用 JS 怎么让目录项和当前章节联动
CSS 的 :target 只能瞬时高亮被锚点命中的标题，无法让左侧目录项同步变色。但你可以用极简方式模拟“伪联动”：
- 给每个标题加
tabindex="-1"，再用:target:focus触发 outline 或背景变化，增强视觉反馈 - 目录项用
a[href^="#"]选择器统一设过渡效果，点击瞬间有微动，暗示已响应 - 若需真正联动（比如滚动到
h3时高亮对应的二级目录项），必须用IntersectionObserver监听，别试图用:target反推
最易被忽略的是：动态插入内容（如 Markdown 渲染后生成的标题）必须在插入 DOM 后**立刻补全 id**，而不是等用户点目录才处理——否则第一次点击永远失败。
