必须用<ol>而非<ul>，因目录天然有序、章节编号不可互换；<ol>提供语义顺序、屏幕阅读器正确播报、SEO结构化识别，并支持start、type等原生控制；<ul>仅能视觉模拟，无语义且不可访问。
为什么目录必须用 <ol> 而不是 <ul>
目录天然有序，章节编号不可互换，<ol> 提供语义顺序、屏幕阅读器正确播报、SEO 结构化识别，且支持 start、type 等原生控制。用 <ul> 模拟编号只是视觉欺骗，辅助技术无法理解“第2章之后是第3章”。
常见错误现象：目录在读屏软件中被读作“列表项一、列表项二”，而非“第二章、第三章”；搜索引擎不识别章节层级；手动用 CSS 的 list-style-type: decimal 会导致编号错位或截断。
-
<ol type="1">（默认）适合主目录，如“1. 引言”“2. DOM 操作” -
<ol type="A">适合附录子节，如“A.1 配置说明” -
start="3"可跳过前两章，直接从“3. 事件模型”开始编号 - 绝对不要用
<ul>+ CSS 伪元素模拟序号——无语义、不可访问、打印时易丢失
<a> 嵌套在 <li> 里的写法要点
每个目录项本质是可聚焦、可跳转的锚点，<a> 必须直接包裹文本内容，不能只包在 <li> 外层或空着 href。
容易踩的坑：点击区域小、键盘 Tab 焦点落在 <li> 上而非链接、屏幕阅读器无法将标题与锚点关联。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<li><a href="#chapter2">第二章：DOM 操作</a></li> - ❌ 错误：
<li><a href="#chapter2"></a>第二章：DOM 操作</li>（链接不可聚焦） - ❌ 错误：
<li><a href="#chapter2"><span>第二章：DOM 操作</span></a></li>（<span>不是合法内联容器，语义冗余） - 锚点 ID 必须唯一且大小写敏感，对应章节的
id="chapter2"不能拼错或重复
多级目录嵌套怎么写才不乱
核心规则只有一条：子 <ol> 必须完整写在父 <li> 内部，不能跨出、不能并列放在同一层级。
超过三层嵌套（如 2.1.1.1）会显著降低可读性，也增加维护成本；浏览器默认缩进受 UA 样式影响大，list-style-position: inside 容易导致编号被截断。
- 二级目录用
<ol>嵌套在父<li>中，保持顺序延续（如“2.1 事件绑定”“2.2 事件委托”） - 若子项本身无顺序（比如“本节涉及 API：addEventListener、removeEventListener”），可用
<ul>嵌套，但外层仍为<ol> - 代码缩进必须对齐层级，推荐 2 或 4 空格；闭合标签
</ol>与对应开标签<ol>同缩进 - 避免用 CSS 强制重置
padding-left来“修正”嵌套显示——先保证 HTML 结构正确，再微调样式
目录要不要放进 <nav>？怎么放才对
侧边栏或页内大纲类目录，属于页面主要导航，必须用 <nav> 包裹；但 <nav> 内部必须用 <ul> 或 <ol>，不能直接堆 <a> 标签。
很多人把目录塞进 <div class="toc"> 就完事，结果键盘用户无法用 Tab 键顺序访问，读屏软件也不识别这是导航区。
- ✅ 正确：
<nav aria-label="文档目录"><ol>...</ol></nav> - ❌ 错误：
<nav><a href="#ch1">第一章</a><a href="#ch2">第二章</a></nav>（缺失列表结构） -
aria-label是必需属性，告诉辅助技术这是“文档目录”而非普通链接集合 - 禁用场景：文章内“本文目录”浮动锚点、评论区跳转链接、“回到顶部”按钮——这些该用
<div>或独立<a>
真正麻烦的不是写几层 <ol>，而是锚点 ID 是否全站唯一、是否和对应章节的 id 严格一致、是否被 JS 动态修改后失效——这些细节漏掉一个，目录就变成摆设。
