HTML怎么制作一个简洁的文章阅读导航目录-html教程-PHP中文网

必须用包裹嵌套实现语义化目录，链接href须精准匹配标题id，配合scroll-behavior:smooth和scroll-margin-top确保平滑定位，:target伪类支持瞬时高亮，aria-label和描述性链接文本保障可访问性。

html怎么制作一个简洁的文章阅读导航目录

用 `nav` + `ol` 实现语义化、可跳转的阅读目录

纯 HTML 能做的导航目录，核心是结构清晰、链接准确、不依赖 JS 也能跳转。直接用 nav 包裹有序列表 ol，每项用 a 指向对应 id 即可。别用 div 套一堆 span，既难维护又不利于屏幕阅读器识别。

常见错误是给标题加 class="title-2" 后手动写死链接，结果标题改了、ID 没同步，点击就 404。正确做法是让每个标题自带唯一 id，再让目录项 a[href] 精确匹配它。

主标题（h1）一般不放进阅读目录，从 h2 开始收集
自动生成 ID 时建议小写 + 连字符，比如 <h2 id="how-to-use-fetch">如何使用 fetch</h2>
避免空格、中文、特殊符号出现在 id 中，否则 a[href="#使用说明"] 可能失效

怎么让点击目录后滚动平滑且定位精准

默认锚点跳转会“咔”一下滚到顶部，还常被固定头部遮挡标题。加一行 CSS 就能解决：

html {
  scroll-behavior: smooth;
}

但光有这个不够——如果页面顶部有 position: fixed 的导航栏，h2 滚到视口顶部时会被盖住。得用 scroll-margin-top 补偿：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

h2 {
  scroll-margin-top: 64px; /* 假设导航栏高 64px */
}

scroll-margin-top 是现代浏览器支持的属性，Chrome 89+、Firefox 90+、Safari 15.4+ 都行
不要在 body 上设 margin-top 或 padding-top 来“腾位置”，那会破坏文档流布局
如果兼容老浏览器（如 IE），只能靠 JS 监听 hashchange 手动滚动并减去偏移量

不用 JavaScript 怎么保持当前章节高亮

纯 HTML/CSS 做不到动态高亮，但可以用 :target 伪类做“瞬时高亮”：用户点完目录项、URL 带上 #xxx 片段时，对应标题自动样式变化。

h2:target {
  background-color: #f8f9fa;
  padding: 2px 6px;
  border-left: 3px solid #007bff;
}

:target 只作用于当前 URL hash 匹配的元素，不会持续生效，也不需要 JS 清除状态
不能替代“当前滚动到哪一章”的实时高亮，那是 IntersectionObserver 的活儿
如果想让目录项也同步高亮，必须用 JS；CSS 无法根据 h2:target 反向影响 nav a[href="#xxx"]

目录层级混乱？用嵌套 `ol` 对应 `h2`/`h3`

文章有二级、三级标题时，目录不该扁平排列。用嵌套 ol 最自然：

<nav aria-label="文章目录"><ol>
<li><a href="#introduction">引言</a></li>
    <li>
      <a href="#api-design">API 设计原则</a>
      <ol>
<li><a href="#idempotent">幂等性要求</a></li>
        <li><a href="#error-handling">错误处理规范</a></li>
      </ol>
</li>
  </ol></nav>