<ol> 是语义最准确、兼容性最好、无障碍最友好的步骤呈现方式，应避免手动编号或用 <div> 模拟；正确使用 start 和 type 属性控制起始值与格式，复杂多级编号需借助 CSS counter 实现，并注意无障碍朗读与打印适配。
ol 标签本身就能做步骤解析，不需要额外 hack
直接用 <ol> 就是语义最准确、兼容性最好、屏幕阅读器最友好的步骤呈现方式。浏览器默认会自动编号，且支持 CSS 自定义起始值、编号样式和嵌套逻辑。
常见错误是手动写“1. 2. 3.”或用 <div> 模拟序号——这不仅破坏可访问性，还会让打印、缩放、高对比度模式下排版错乱。
实操建议：
- 用
<ol>包裹每个步骤的<li>，别用<ul>或<p>套壳 - 如果步骤跨多段内容（比如带代码块或图片），把整个结构放进一个
<li>里，而不是拆成多个<li> - 避免在
<li>里再嵌套<ol>除非真有子步骤；否则用<ul>更合适
用 start 和 type 属性控制编号起点和格式
start 和 type 是原生支持的 HTML 属性，比纯 CSS 更可靠，尤其在邮件模板或老旧环境里。
立即学习“前端免费学习笔记（深入）”；
例如文档中某节从第 5 步开始，或需要罗马数字、字母编号：
<ol start="5" type="a"> <li>安装依赖</li> <li>配置环境变量</li> </ol>
注意：type="a" 在 IE 中支持有限，type="I"（大写罗马）更稳妥；start 只接受整数，不能写 start="ii"。
常见问题：
- 设了
type="1"却没生效？检查是否被 CSS 的list-style-type覆盖了 - 移动端 Safari 对
type="A"渲染不一致，建议优先用type="1"或交由 CSS 控制
用 CSS counter 实现复杂编号（如 2.3.1 这类章节式）
原生 <ol> 不支持多级自动编号（比如“2.1 → 2.1.1 → 2.1.1.1”），必须靠 CSS counter 实现。
关键点不是“怎么写对”，而是“怎么避免嵌套错乱”：
- 每级
<ol>都要设独立counter-reset，比如counter-reset: section、counter-reset: subsection - 用
counter-increment在<li>上触发计数，别放在<ol>上 - 用
::before插入编号，确保内容与序号分离，方便复制时只复制文字
示例（二级编号）：
ol { counter-reset: section; }
ol li { counter-increment: section; }
ol li::before { content: counters(section, ".") ". "; }
性能提示：深层嵌套（>5 级）可能触发重排，但日常步骤说明极少遇到。
无障碍和打印场景下 ol 的隐藏风险
看似最简单的 <ol>，在 VoiceOver、NVDA 或 PDF 导出时容易暴露两个细节问题：
- 编号被读作 “number one” 而不是 “step one”——加
aria-label="Step 1"到每个<li>可修正，但别加在<ol>上（会覆盖全部） - 打印时编号被截断或换行错位——给
<li>设min-width: 10em或用white-space: nowrap保护编号区域 - CSS 重置了
list-style却忘了回退：某些 UI 框架（如 Bootstrap）全局设了ol { list-style: none; }，需显式恢复list-style-type: decimal
真正麻烦的不是写法，是测试时容易漏掉语音朗读和打印预览这两个环节。
