是语义化有序列表，明确表达不可交换的顺序关系，支持start、reversed等原生属性，保障可访问性、SEO和自动编号；手动编号或错误嵌套会破坏结构语义与技术兼容性。
用 手动编号（比如 子 多级 立即学习“前端免费学习笔记（深入）”； 把 真正容易被忽略的点是：编号逻辑和 DOM 结构必须同步。哪怕 CSS counter 写得再漂亮，只要子 <ol></ol> 而不是 <div> 或手动编号，页面结构才真正清晰——它不是“看起来像步骤”，而是浏览器、屏幕阅读器和搜索引擎都认得出来的顺序语义。
<h3>为什么 <code><ol></ol> 比手动写“1. 2. 3.”更可靠
<p>1. 注册账号</p>）在视觉上能凑合，但会立刻丢失三类关键信息：顺序关系、层级归属、可访问性支持。屏幕阅读器读不出“这是第几步”，SEO 无法提取流程节点，JS 查询 document.querySelectorAll('ol > li') 也抓不到你手写的段落。
<ol></ol> 提供原生计数逻辑，start、reversed、value 属性可精确控制编号起点与方向<ol></ol> 并用于生成步骤型富摘要
<ol></ol> 嵌套必须满足的 DOM 结构硬约束<ol></ol> 必须是父 <li> 的**直接子元素**，不能放在外面，也不能塞进 <div> 或 <code><p></p> 中间。否则 CSS 选择器（如 ol ol）、JS 遍历、键盘 Tab 流都会出错。
<li>第三章<ol><li>3.1 节</li></ol>
</li>
<li>第三章</li>
<ol><li>3.1 节</li></ol>（子 <ol></ol> 脱离父 <li>）<li><div><ol><li>3.1 节</li></ol></div></li>（<ol></ol> 不在 <li> 直接子层）嵌套
<ol></ol> 时编号样式怎么不乱套<ol></ol> 默认会继承上级编号类型（比如外层 type="1"，内层也显示数字），但实际需要的是“1 → 1.1 → 1.1.1”这类层级编号。纯靠 type 属性做不到，必须用 CSS counters。
ol { list-style: none; }
counter-reset 和 counter-increment 手动建层级计数器::before 伪元素拼接编号，例如：li::before { content: counters(section, ".") ". "; }
start 属性做多级起始值，它只作用于单层，跨层无效响应式折叠目录里
<ol></ol> 的交互陷阱<ol></ol> 当作可折叠目录使用时，很多人直接套 <details></details>，但这个标签在 Safari 旧版、安卓 WebView 和 PDF 导出中行为不稳定。生产环境更稳的做法是纯 CSS + 极简 JS。
max-height 过渡控制展开/收起，避免用 height: auto（不支持过渡）aria-expanded 属性、管理焦点（el.focus()）<li> 加 role="heading" 和对应 aria-level，例如一级目录设 aria-level="1"，二级设 aria-level="2"
touchstart 并调用 preventDefault()
<ol></ol> 没包在正确的 <li> 里，屏幕阅读器就认不出层级，打印时编号也会断掉。结构合规不是“锦上添花”，而是所有后续功能成立的前提。
