必须用，因其是唯一语义正确、可访问且被搜索引擎识别为「流程序列」的html元素；它明确表达步骤依赖关系，支持start和reversed属性，兼容css list-style-type，嵌套需规范，禁用div模拟编号。
<ol></ol> 是唯一语义正确、可访问且被搜索引擎识别为「流程序列」的 HTML 元素。用 <ul></ul> 或手动写 1. 2. 3. 都会丢失结构信息，影响屏幕阅读器播报和 SEO。
为什么必须用 <ol></ol> 而不是 <ul></ul> 或纯文本编号
业务流程的本质是不可交换的步骤链：前一步未完成，后一步无法执行。浏览器和辅助技术依赖 <ol></ol> 的语义明确识别这种依赖关系。
- 屏幕阅读器读
<ol></ol>时会主动告知“第 2 项，共 5 项”，而<ul></ul>只读作“列表项” - 搜索引擎将
<ol></ol>内容视作结构化步骤，可能在富摘要中展示为“流程图”或“操作指南” - 手动编号（如
<p>1. 提交申请</p>）完全不可选中、不可缩放、无法用 CSS 统一控制起始值或倒序
start 和 reversed 属性的实际用途
真实业务流程常需跳过编号、从中间开始，或按时间倒序展示（如“最近 3 步操作”）。这两个属性比 JS 拼接更轻量、更可靠。
-
start="3"：适用于分段流程，比如「审批环节」从第 3 步开始，无需重写整个列表 -
reversed：适合日志类展示，例如「最近处理的订单」按时间倒排，浏览器自动渲染为 3 → 2 → 1 - 注意：
reversed不影响 DOM 顺序，只改变视觉编号；若需真正逆序 DOM，仍要调整 HTML 结构
CSS list-style-type 替代 type 属性的原因
<ol type="A"></ol> 已被现代规范标记为“不推荐使用”，所有主流浏览器虽仍支持，但存在兼容隐患（如 Safari 对 type="i" 渲染异常）。
- 优先用 CSS：
ol { list-style-type: upper-alpha; }（大写字母）、lower-roman（小写罗马数字）等 -
list-style-type支持更多值，如decimal-leading-zero（01, 02），georgian（格鲁吉亚数字）等 - 关键好处：样式与结构分离，便于主题切换或响应式适配（例如移动端改用字母，PC 端保留数字）
嵌套 <ol></ol> 表示子流程时的限制
业务流程中常见“审核 → 初审 → 技术审核 / 合规审核”，这种层级必须用嵌套 <ol></ol>，但有两条硬约束：
- 嵌套必须发生在
<li>内部，即<li><ol><li>...</li></ol></li>，不能把<ol></ol>直接放在另一个<ol></ol>下 - 超过两层嵌套极易降低可读性，建议用
<details></details>+<summary></summary>折叠深层步骤，而非强行展平 - 避免混合
<ol></ol>和<ul></ul>嵌套——例如主流程用<ol></ol>，子项用<ul></ul>，这会破坏语义一致性
最容易被忽略的是：业务系统导出的 HTML 流程图常直接用 div + 自增 counter 模拟编号，看似灵活，实则让整个流程脱离语义化轨道——既无法被自动化工具解析，也无法被键盘用户按步骤导航。真要用动态编号，应基于 <ol></ol> 用 CSS counters 扩展，而不是绕开它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
