必须用而非，因目录天然有序，提供语义顺序、屏幕阅读器支持及原生编号控制；内嵌需直接包裹文本，锚点id须唯一匹配；多级嵌套须子列表完整置于父内，css重置推荐padding-left:1.5em。
HTML 文档目录结构用 <ol></ol> + 嵌套 <li> + @#@#@#@#@#@#@#@#@#@0
<li>@#@#@#@#@#@#@#@#@#@1第二章：DOM 操作</li>（链接空，不可聚焦）@#@#@#@#@#@#@#@#@#@2（<li> 不是 <a></a> 的合法子元素）id 完全一致（区分大小写）多级目录怎么嵌套才不乱
嵌套的核心规则只有一条：子列表必须完整写在父级 <li> 内部，且只能是 <ol></ol> 或 <ul></ul>，不能直接放多个 <li>。
- 二级目录用
<ol></ol>嵌套在父<li>里，保持顺序语义延续（如 2.1、2.2） - 若子项本身无顺序（比如“本章涉及的技术点”），可用
<ul></ul>嵌套，但外层仍为<ol></ol> - 代码缩进必须对齐层级，否则容易漏闭合标签或错嵌套
- 超过三层嵌套（如 2.1.1.1）会显著降低可读性，建议拆分文档或用折叠逻辑（CSS +
details）替代
示例片段：
<ol>
<li><a href="#intro">引言</a></li>
<li>
<a href="#dom">DOM 操作</a>
<ol>
<li><a href="#query">选择器查询</a></li>
<li><a href="#modify">节点修改</a></li>
</ol>
</li>
<li><a href="#event">事件系统</a></li>
</ol>
CSS 微调时最容易忽略的兼容点
默认 <ol></ol> 缩进靠浏览器 UA 样式，不同浏览器 margin 差异大；而 list-style-position: inside 会导致编号被截断，尤其配合 padding 或字体缩放时。
- 重置推荐：
ol { margin: 0; padding-left: 1.5em; }（用 em 更适配字体缩放） - 编号对齐用
counter-reset+::before替代原生序号，可控性更强，但会丢失语义（慎用） - 移动端需加
touch-action: manipulation;防止点击延迟 - 不要用
display: grid或flex强行重构<ol></ol>结构——破坏列表语义，屏幕阅读器可能跳过编号
真正难的不是写出嵌套结构，而是让每一层 <li> 的语义、链接行为、键盘导航、缩放响应都保持一致——这需要反复用 VoiceOver 和 Tab 键测试，而不是只看浏览器渲染效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
