ol标签是展示操作步骤最直接、语义最准确的方式，因其自动编号、屏幕阅读器友好、样式解耦且支持嵌套等优势，远优于div或p手动编号。
ol 标签是展示操作步骤最直接、语义最准确的方式，比用 div + 手动编号更可靠，也对屏幕阅读器友好。
为什么不用 div 或 p 模拟编号
手动写「1. 准备文件」、「2. 编写结构」看似简单，但实际会带来几个隐性问题：
- 编号无法自动重排：删掉第2步后，后续数字得全手动改
- 语义丢失：辅助技术（如读屏软件）无法识别这是“有序流程”，可能跳过或误读
- 样式耦合严重：一旦换主题或加嵌套，
div的margin/padding容易错位，而ol的默认计数逻辑是浏览器原生支持的
ol 的 type 和 start 属性怎么选
多数操作步骤用默认阿拉伯数字就够了，但遇到特殊场景时需注意参数行为：
-
type="1"（默认）适合线性流程，如安装步骤、表单填写顺序 -
type="a"或type="A"适合子步骤，比如主步骤用1.，子项用a.—— 注意：必须配合嵌套ol使用，单独设type不会自动降级 -
start="3"仅影响当前ol的起始值，不继承父列表；若想接续上一个列表，确保两个ol之间没有其他块级元素干扰（否则部分旧版 Safari 可能重置计数） -
reversed属性极少用于操作步骤，它会让编号倒着来（3, 2, 1），更适合倒计时类展示，不是步骤回溯
CSS 覆盖 list-style-type 时的常见翻车点
想用自定义图标或文字前缀？别直接删掉 ol 的语义。推荐做法是保留原结构，仅视觉替换：
立即学习“前端免费学习笔记（深入）”；
- 先用
list-style-type: none清除默认编号，再用::before伪元素生成内容 —— 这样屏幕阅读器仍能读出序号 - 如果用
counter-reset+counter-increment自定义计数，记得在li上设counter-increment: step，且ol上设counter-reset: step - 避免给
li设display: inline-block后忘记清除vertical-align，会导致基线错位，编号和文字不对齐 - 移动端要注意：某些安卓 WebView 对
reversed或小写字母type="a"支持不稳定，建议优先用type="1"+ CSS 增强
真正容易被忽略的是嵌套层级——步骤里带子步骤时，ol > ol 是合法结构，但别在 ol 里直接放文本或 div，所有内容必须包裹在 li 内，否则 HTML 验证失败，部分浏览器会静默修正 DOM 导致序号错乱。
