在网页排版中，有序列表用来呈现具有先后顺序或等级关系的内容，例如教程步骤、排行榜和条款序号。HTML通过ol元素定义有序列表，内部使用li标签包裹每一项，浏览器会自动在每项前生成递增编号。与无序列表不同，有序列表强调条目之间的次序逻辑，当内容顺序变动时语义也会改变。
一、ol与li的基础创建方式
创建一个最基本的有序列表只需要把若干个li放在ol标签内部。下面的代码展示了一个三步操作指引，浏览器渲染后会在“注册账号”“填写资料”“提交审核”前分别显示1、2、3。
<ol> <li>注册账号</li> <li>填写资料</li> <li>提交审核</li> </ol>
这种写法不需要任何CSS或脚本，适合快速搭建带有语义的编号内容。需要注意的是，ol只能直接包含li元素，不能在ol下直接放文本或其他块级标签，否则HTML结构会被视为不合法，部分浏览器可能解析异常。
如果列表项内部需要嵌套段落、图片或子列表，可以把这些内容放在li内部。例如在一个步骤中再插入子步骤，可以使用嵌套的ol，此时外层编号与内层编号相互独立，内层会从1重新开始计数。
<ol>
<li>准备环境
<ol>
<li>安装运行时</li>
<li>配置变量</li>
</ol>
</li>
<li>启动服务</li>
</ol>
二、使用属性控制编号起始与顺序
除了默认从1开始正序编号，HTML原生提供了几个实用属性。start属性可以指定列表起始整数，比如一份文档续接上一页内容时，可以让编号从4开始，避免手动写死文本。
<ol start="4"> <li>验证配置</li> <li>执行测试</li> </ol>
上面的代码会显示4、5而不是1、2。这个属性接收整数，即使写成负数也能生效，但实际业务中很少用到负编号。reversed属性则用于倒序排列，比如展示排名从低到高时，可以声明该布尔属性让编号递减。
<ol reversed> <li>初赛</li> <li>复赛</li> <li>决赛</li> </ol>
此时第一项显示为3，第二项2，第三项1。不过要注意，倒序只改变编号生成方向，条目在文档中的物理顺序并未颠倒，屏幕阅读器仍按源码顺序朗读，这对无障碍访问来说需要额外说明。
三、通过CSS修改编号样式
虽然ol自带type属性可以切换编号类型，例如type="a"显示小写字母，但这种方式把表现层耦合进结构层，维护成本高。更推荐的做法是使用CSS的list-style-type属性，它支持丰富的关键字。
| 属性值 | 显示效果 | 适用场景 |
|---|---|---|
| decimal | 1, 2, 3 | 通用步骤 |
| lower-alpha | a, b, c | 附录条目 |
| upper-roman | I, II, III | 书籍章节 |
| cjk-decimal | 一, 二, 三 | 中文合同 |
下面的样式会将有序列表编号改为大写罗马数字，并且通过list-style-position调整编号与文本的对齐方式。
ol.roman {
list-style-type: upper-roman;
list-style-position: inside;
}
若想完全自定义编号外观，例如用圆角背景包裹数字，可以使用counter-reset与counter-increment配合::before伪元素。这种方法脱离了默认的list-style体系，能实现类似徽章的视觉效果，同时保持ol的语义不变。
ol.badge {
counter-reset: step;
list-style: none;
padding-left: 0;
}
ol.badge li {
counter-increment: step;
margin-bottom: 8px;
}
ol.badge li::before {
content: counter(step);
background: #337ab7;
color: #fff;
border-radius: 50%;
padding: 2px 8px;
margin-right: 6px;
}
这段CSS先把默认编号去掉，再用计数器生成内容插入到每项前面。优点是可塑性极强，缺点是如果用户在浏览器中关闭了CSS，列表将失去任何编号提示，因此关键顺序信息最好在文本中也有所体现。
四、常见误区与兼容性注意
不少初学者会把ul和ol混用，当视觉上想要数字却又用了ul然后手动写“1.”在前，这破坏了HTML语义，搜索引擎和辅助技术都无法识别真实次序。应当始终用ol表达顺序。
语义化标签的价值不在于肉眼看到的数字，而在于机器能正确读出“第一步、第二步”的关系。
在旧版IE中，reversed属性不被支持，如果需要兼容非常老的环境，可以通过服务器端倒排数组或者用CSS计数器反向计算。现代项目面向Chrome、Firefox、Edge等时，直接使用原生属性即可，无需引入额外脚本。
最后提醒，list-style-type对于中文编号的支持依赖字体，如果系统缺少对应字形，可能会回退成方块，此时可考虑用counter配合自定义中文数组来硬编码，确保各平台一致。
HTMLol_lilist-style-type修改时间：2026-08-05 03:03:30