<ol>必须用<li>包裹内容，纯文本或<p>会被静默丢弃；start仅改视觉起始值，reversed仅对type="1"生效；嵌套需在<li>内套<ol>；编号样式不改变语义顺序。
直接用 <ol> 就能展示步骤，但多数人写出来编号错乱、嵌套失效或语义丢失，核心问题不在“会不会写”，而在“是否理解 <ol> 的约束和浏览器默认行为”。
为什么 <ol> 里直接写文本不显示编号
浏览器只把 <li> 当作合法子元素；<ol> 内部如果出现纯文本、<p> 或 <div>，会被忽略——不是报错，是静默丢弃。你看到的“文字没编号”，其实是它根本没被识别为列表项。
- 错误写法：
<ol>第一步：准备工具</ol> - 正确写法：
<ol><li>第一步：准备工具</li></ol> - 若步骤含段落说明，把
<p>放进<li>里面，而不是并列在<ol>下
start 和 reversed 的实际作用边界
start 只改视觉起始值，不影响 DOM 顺序或可访问性播报；reversed 仅对 type="1"（默认数字）生效，设了 type="a" 后加 reversed 会被浏览器无视。
- 想从第 7 步开始？用
<ol start="7">，别手动写“7. ” - 需要倒序步骤（如“收尾 → 中间 → 开始”），只用
<ol reversed>，且不要同时设type="A" -
start="-2"或start="3.5"会被强制转为start="1"；IE11 及更早版本完全不支持start
多级步骤嵌套必须用 <li> 包裹子 <ol>
嵌套时不能把子列表放在 <ol> 外面，也不能用 <p> 隔开——否则子列表脱离父项语义，屏幕阅读器无法识别层级，CSS 缩进也会错位。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：主步骤用
<li>，子步骤在该<li>内部再套一个<ol> - 示例：
<ol><li>连接数据库<ol type="a"><li>配置 host</li><li>设置端口</li></ol></li></ol> - 避免在
<li>外加<p>或空行——这些不会参与编号，但会破坏默认 margin 继承
最常被忽略的是：所有编号样式（字母、罗马数字、倒序）都不改变语义顺序，屏幕阅读器永远按 DOM 位置播报“第 X 项”。真要控制可访问性顺序，得配合 aria-posinset 和 aria-setsize 手动标注，而不是依赖 start 或 reversed。
