纯html可实现带跳转目录的博客页，需用nav+ol语义化结构，h2/h3标题配合法id（小写+短横线），href严格匹配；加scroll-margin-top修正固定头部遮挡，确保精准定位。
如何用纯 HTML 实现带目录的博客正文页面
纯 HTML 能做带跳转目录的博客详情页，但必须依赖 id 锚点 + 语义化结构，不能靠 JS 自动生成（否则就不是“基础”了）。关键不是“能不能”，而是“怎么让目录和正文真实对齐、不飘、不跳空”。
目录项必须严格对应 h2–h3 标题的 id
浏览器原生锚点跳转只认 id，不是 class 或 data 属性。目录里的每个链接必须形如 @#@#@#@#@#@#@#@#@#@0，且正文中必须有唯一 <h2 id="design-principle">设计原则</h2>。
常见错误：
-
id值含空格或中文（如id="第一章"）→ 跳转失败或 URL 编码混乱 - 多个标题用了同一个
id→ 点击只滚动到第一个匹配位置 - 用
name属性替代id（<a name="xxx"></a>）→ 现代浏览器已不推荐，兼容性差
建议：手动生成 id 时全小写、用短横线分隔，例如 id="async-rendering"。
目录结构需用 nav + ol 保证语义与可访问性
单纯用 div 套一堆 a 标签，屏幕阅读器无法识别这是“导航目录”。必须用语义化标签明确意图：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<nav aria-label="文章目录"><h3>本文目录</h3>
<ol>
<li><a href="#intro">引言</a></li>
<li><a href="#setup">环境搭建</a></li>
<li>
<a href="#usage">使用方式</a>
<ol>
<li><a href="#usage-basic">基础用法</a></li>
</ol>
</li>
</ol></nav>
注意：ol 嵌套能自然表达层级（h2 → h3），CSS 可通过 ol ol 单独缩进子项；aria-label 让读屏软件知道这是“文章目录”而非普通导航。
滚动定位偏移需用 scroll-margin-top 修正
点击目录跳转后，标题常被固定头部遮挡——因为浏览器默认把目标元素顶到视口顶部。不用 JS 也能修复：
- 给所有标题（如
h2,h3）加统一偏移：h2, h3 { scroll-margin-top: 64px; } - 若头部高度不固定，优先设为具体像素值（如
64px对应 4rem），避免用10vh等响应式单位导致跳转不准 -
scroll-margin-top是现代 CSS，Chrome 89+、Firefox 87+、Safari 15.4+ 支持；老版本 Safari 需回退到padding-top+margin-top负值组合（不推荐，易破坏布局）
这个属性不起眼，但漏掉它，用户每次点目录都会觉得“标题被切掉了”，体验直接降级。
真正难的不是写几行 HTML，而是让每个 id 和标题文字一一对应、让嵌套层级不乱、让滚动停在该停的位置——这些细节堆起来，才是“能用”和“好用”的分界线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
