真正可用的博客目录需用<nav>+<ol>组合并手动或脚本生成id锚点，仅<ol>无法实现跳转、自动生成层级或语义化导航。

直接用 <ol> 做博客目录不可靠，它不支持跳转锚点、无法自动生成层级、也不适配语义化导航需求——真正可用的目录得靠 <nav> + <ol> 组合，再配合手动或脚本生成的 id 锚点。

ol 本身不生成目录，只负责编号样式

<ol> 是纯结构标签，只定义“有顺序的列表项”，它不会自动读取标题、提取内容、绑定链接。你写：

<ol>
  <li>安装 Node.js</li>
  <li>初始化项目</li>
</ol>

它就只是两个带数字的文本行，和目录无关。要变成可点击跳转的目录，每个 <li> 必须包裹 <a href="#xxx">，而 #xxx 必须对应文档中某个标题的 id 属性。

必须手动或脚本维护 id 与 ol 条目的一致性

常见错误是：改了标题文字但忘了同步 id，或复制粘贴时漏掉 href 值，导致点击后页面不动或跳错位置。正确做法是：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 给每个 <h2> 或 <h3> 加唯一 id，比如 <h2 id="install-node">安装 Node.js</h2>
• 在 <ol> 中写对应链接：<li><a href="#install-node">安装 Node.js</a></li>
• 避免空格、中文、特殊字符出现在 id 中，推荐用短横线分隔的小写字母，如 setup-env 而非 设置环境
• 如果用 Markdown 渲染（如 Hugo/Jekyll），确认其是否默认生成 id；若不生成，需启用插件或自定义模板

嵌套 ol 实现多级目录时，type 属性容易失效

想表达“1.1 → 1.2 → 2”这种层级，别依赖 <ol type="1"> 套 <ol type="A"> —— 浏览器对嵌套 type 的支持不一致，Safari 和旧版 Edge 可能忽略内层 type。更稳的方式是：

• 用 CSS 控制编号格式，例如：ol ol { list-style-type: lower-alpha; }
• 放弃自动编号，改用纯文本前缀（如 <li><strong>1.1</strong> 安装依赖</li>），语义清晰且完全可控
• 若需动态生成，用 JavaScript 遍历 h2/h3 并递归构建 <ol> 结构，比依赖 HTML 原生 type 更可靠

最常被忽略的是可访问性：纯 <ol> 目录没有 <nav> 包裹，屏幕阅读器无法识别这是导航区域；加上 <nav aria-label="文章目录"> 才算完整。另外，移动端小屏下过长的目录建议加滚动容器或折叠逻辑，否则会挤占正文空间。