<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。



















