有序列表必须使用标签而非，因其具备语义性与可访问性；嵌套子任务需用套，禁用css伪造序号或删除默认编号而不补替代方案。
用 <ol></ol> 包裹任务项，别用 <ul></ul>
有序列表必须用 <ol></ol> 标签，不是 <ul></ul> —— 后者是无序的，即使加了数字样式也不具备语义和可访问性。屏幕阅读器会把 <ol></ol> 读作“列表，共3项，第1项…”，而 <ul></ul> 只读作“列表”，丢失顺序信息。
常见错误：用 CSS 强行给 <ul></ul> 加数字（比如 list-style: decimal），看似像有序列表，但语义错误、键盘导航混乱、打印时可能失效。
- 每个任务写在
<li>里，直接嵌套在<ol></ol>内 - 不要手动输入 “1. ”“2. ”——浏览器自动编号，改顺序或增删项时不会出错
- 避免在
<li>外层再套<p></p>，除非内容含段落级结构（如多行说明）
start 和 reversed 属性控制起始值与倒序
默认从 1 开始递增，但实际场景常需调整：比如续接上一页任务，或按优先级倒排（P0、P1…）。这时不用 JS 操作 DOM，直接用原生属性：
-
start="3"：让第一个<li>显示为 “3.”，后续自动为 4、5… -
reversed（布尔属性）：从大到小编号，<ol reversed> <li>A</li> <li>B</li> </ol>渲染为 “2. A” “1. B” - 两者可共存：
<ol start="5" reversed></ol>→ “5. … 4. … 3.”
注意：reversed 在旧版 IE 中不支持，如需兼容可降级为 JS 控制或放弃倒序视觉。
嵌套子任务用 <ol></ol> 套 <ol></ol>，别混用层级
多级任务清单（比如“1. 准备环境 → 1.1 安装 Node → 1.2 配置 npm”）应严格用嵌套 <ol></ol>，而非靠缩进或 CSS 伪造层级。
正确写法示例：
<ol>
<li>准备环境
<ol>
<li>安装 Node</li>
<li>配置 npm</li>
</ol>
</li>
<li>初始化项目</li>
</ol>
- 浏览器默认对嵌套
<ol></ol>使用不同编号样式（如 1. → a. → i.），无需额外 CSS - 若需统一用阿拉伯数字（如 1.1、1.2），用 CSS 的
counter-reset/counter-increment，但要注意可访问性支持有限 - 禁止用
<ul></ul>套<ol></ol>表达子任务——语义断裂，AT 工具无法识别逻辑关系
可访问性关键：别删掉 <ol></ol> 的默认语义
有人为了“样式干净”用 CSS 清除 <ol></ol> 编号（list-style: none）又不补替代方案，结果只剩纯文本，彻底丢失列表结构。
- 如果真要隐藏编号，请同时用
aria-label或<span aria-hidden="true"></span>明确标注哪些是列表容器/项 - 确保键盘 Tab 能自然进入每个
<li>（默认支持），不要用tabindex="-1"锁死 - 移动端双指滑动读屏时，
<ol></ol>会触发“列表模式”，比<div> 堆砌更高效 <p>最常被忽略的一点：任务清单一旦动态增删（比如 JS 添加新 <code><li>），必须保证新增节点仍包裹在<ol></ol>内——漏掉外层标签，语义就断了，而且编号会重置为 1。
