结论：仅用<ol><li>只能生成静态编号，必须配合id锚点和href="#id"才能实现可跳转的实用目录；需确保章节标题有对应id、链接正确指向、CSS处理滚动偏移。
直接说结论：用 <ol> 套 <li> 就能做阅读目录，但真要实用，必须加 id 锚点、配合 <a href="#xxx"> 跳转，否则只是静态编号，毫无导航价值。
为什么不能只写 <ol><li>第一章</li><li>第二章</li></ol>
这样确实能渲染出 1. 2. 3. 的编号，但点击不了、跳不到对应章节——它只是视觉列表，不是功能目录。阅读目录的核心是「可跳转」，不是「有数字」。浏览器不会自动把 <li> 内容和页面其他位置关联起来，得手动建立映射。
常见错误现象：
– 目录显示正常，但点击没反应
– 点击后页面没滚动到目标章节
– 控制台报错 Failed to execute 'scrollIntoView' on 'Element': parameter 1 is not of type 'ScrollIntoViewOptions'（多因 JS 调用不当）
实操建议：
• 每个 <li> 里必须包一个 <a href="#chapter1">第一章</a>
• 对应正文章节标题（如 <h2>）必须加 id="chapter1"
• 不要用空格、中文或特殊符号命名 id 值，推荐纯字母+数字，如 ch2_sec3
立即学习“前端免费学习笔记（深入）”；
start 和 type 属性在目录中怎么选
阅读目录常需跳过前言、序、附录等非主章节，这时 start 就很关键。比如正文从第 3 章开始，目录想显示「3. 第三章」而不是「1. 第三章」，就得写 <ol start="3">。
type 则影响层级表达：
• 主目录用 type="1"（默认，阿拉伯数字）
• 子章节用 type="a" 或 type="i"，例如：
<ol start="3"><br> <li><a href="#ch3">第三章</a><br> <ol type="a"><br> <li><a href="#ch3_sec1">第一节</a></li><br> <li><a href="#ch3_sec2">第二节</a></li><br> </ol><br> </li><br></ol>
注意：嵌套
<ol> 会继承外层的 start，除非显式重设。
锚点跳转后页面不精准定位？检查这三点
点击目录项后，页面滚动到目标位置但标题被顶部导航栏遮挡，或偏上/偏下太多——这不是 <ol> 的问题，而是 CSS 和布局干扰。
关键排查点：
• 页面是否有固定定位的 <header>？加 scroll-margin-top 修正：h2[id] { scroll-margin-top: 60px; }
• 是否用了 position: sticky 或 transform？它们会创建新的层叠上下文，干扰 scrollIntoView()
• 浏览器原生跳转（href="#xxx"）不触发 JS，所以不要指望靠监听 hashchange 去补偏移，优先用 CSS 解决
真正难的不是写出编号，而是让每个编号背后都连着一个可靠、可视、不被遮挡的目标位置。目录做得再漂亮，点一下就找不到内容，等于没做。
