<ol> 是展示流程内容最语义化、可靠的方式，因其天然表达不可交换的先后关系，支持自动编号、无障碍访问及动态维护，优于 <ul> 或手动编号。
<ol> 是展示流程内容最语义化、最可靠的方式，比手动写“1. 2. 3.”或用 CSS 计数器更轻量、更可访问、更易维护。
为什么不用 <ul> 或纯文本写步骤
流程类内容（如安装步骤、操作指南、食谱顺序）天然具有强序列依赖——前一步失败，后一步无法执行。用 <ul> 会丢失语义，屏幕阅读器读不出顺序关系；手动编号（比如写“① 打开电源”）则无法自动重排、无法被爬虫识别为结构化步骤、一删项就要全改数字。
-
<ol>告诉浏览器和辅助技术：“这些项有不可交换的先后关系” - 浏览器默认渲染为 1. 2. 3.，但底层是逻辑序号，不是视觉字符串
- 当用 JS 动态增删
<li>时，编号自动更新，无需干预
type 和 start 属性的实际取舍
别迷信 type="A" 或 type="I" 的“高级感”。它们在可访问性上存在风险：部分屏幕阅读器对罗马数字支持不稳定，小写字母 a 在低对比度下易与段落混淆。
- 默认
type="1"（阿拉伯数字）兼容性最好，语义最清晰 -
start真正有用场景只有两个：接续上一段列表（如前文结束于第4步，本段从start="5"开始）、或跳过初始说明项（如第1项是“注意事项”，不计入操作步数） -
reversed属性极少实用——倒序编号（3, 2, 1）几乎只用于倒计时类 UI，且不能和start同时可靠工作
CSS 覆盖默认样式时的关键陷阱
想自定义编号颜色、字体或位置？优先用 CSS 的 list-style-type 和 list-style-position，而不是给每个 <li> 加 <span> 手动写序号。
立即学习“前端免费学习笔记（深入）”；
-
list-style-position: inside会让编号进入内容流，可能引发换行错位；outside（默认）更稳，但需注意padding-left防止文字贴边 - 若彻底去掉编号（比如用图标替代），必须同时设
list-style: none和padding-left: 0，否则旧版 Safari 仍留白 - 避免用
counter-reset/counter-increment替代原生<ol>——它不传递语义，对无障碍完全无效
最容易被忽略的一点：<ol> 内部只能直接嵌套 <li>，哪怕只是加个空行或注释，也会破坏 HTML 结构合法性。流程内容一旦嵌套复杂逻辑（比如某一步含子步骤），正确做法是把子步骤包进对应 <li> 内的另一个 <ol>，而不是在 <ol> 外面套 <div> 或硬塞 <p>。
