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