必须用而非当条目存在不可交换的逻辑顺序，如注册流程、搜索排序、法律条款等；其type和start属性影响语义与dom行为，嵌套时编号自动继承，js动态更新需手动维护value或start。

直接说结论：用 <ol></ol> 不是为了“看起来有数字”，而是为了告诉浏览器、屏幕阅读器和搜索引擎——这些条目之间存在不可交换的逻辑顺序。

什么时候必须用 <ol></ol> 而不是 <ul></ul>

不是“能用就行”，而是语义强制要求。比如：

• 用户注册流程的 5 个步骤，第 3 步跳过会导致第 4 步无法执行 → 必须用 <ol></ol>
• 搜索结果页的自然排序（按相关性降序），第 1 条 ≠ 第 2 条 → <ol></ol> 更准确
• 法律条文、合同条款编号（如“第二章 第七条”）→ 需要可被锚点链接、被辅助技术朗读为“第7项”，<ol></ol> 支持 start 和 reversed 属性，<ul></ul> 不支持

<ol></ol> 的 type 和 start 容易配错

这两个属性常被当成“样式开关”，但它们影响的是语义含义和 DOM 行为：

• type="A" 不只是显示 A B C，它意味着“这是一个大写字母序号体系”，若中间插入 <li type="a">，浏览器可能忽略或降级处理
• start="3" 后接 <li>第三步</li>，实际渲染是 “3. 第三步”，但 DOM 中该 <li> 的 value 属性仍为 3 —— JS 拿 li.value 可读，但 CSS 伪元素 ::marker 不暴露这个值
• 混合使用 type 和 CSS list-style-type 会冲突：HTML 属性优先级高于 CSS，除非用 !important 强覆盖

嵌套 <ol></ol> 时，子列表的编号自动继承父级逻辑

比如做多级操作指南：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<ol>
<li>登录系统
    <ol>
<li>输入用户名</li>
      <li>输入密码</li>
      <li>点击“登录”按钮</li>
    </ol>
</li>
  <li>进入控制台</li>
</ol>

浏览器默认渲染为：

1. 登录系统
　　a. 输入用户名
　　b. 输入密码
　　c. 点击“登录”按钮
2. 进入控制台

• 这种层级编号不是 CSS 控制的，是 HTML 原生行为；改用 <ul></ul> 嵌套就只能靠 CSS 伪元素模拟，且无法被辅助技术识别为“子步骤”
• 如果子 <ol></ol> 需要从罗马数字开始（如ⅰ、ⅱ），必须显式写 <ol type="i"></ol>，不能依赖父级推导
• 注意：子 <ol></ol> 必须直接放在 <li> 内容中，不能放在 <li> 外面，否则结构非法

用 JS 动态更新 <ol></ol> 时，start 和 value 不会自动重算

这是最容易被忽略的坑：DOM 插入/删除 <li> 后，编号不会像 Word 那样自动重排。

• 手动插入新 <li> 到中间？得同步设置它的 value 属性，否则显示错位
• 用 ol.replaceChildren(...) 重置全部？老的 start 值丢失，得重新设 ol.start = 1 或其他起始值
• 想让编号随排序变化（如拖拽调整步骤顺序）？纯 HTML 不行，必须用 JS 控制 li.value，或干脆放弃原生编号，改用 CSS counter-reset/counter-increment

真正关键的不是怎么让它“显示数字”，而是确保数字背后代表的顺序关系，在 DOM、JS、辅助技术三层都一致。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！