有序列表使用<ol>标签创建,浏览器自动分配从1开始的数字编号;通过start属性可自定义起始编号,如start="5";CSS的list-style-type可设置编号样式,如lower-alpha(a,b,c)、upper-roman(I,II,III)等;reversed属性实现倒序显示,value属性指定某项具体编号,后续项自动递增。

HTML有序列表默认就是按顺序编号排列的,使用<ol>标签即可创建一个带数字编号的列表。浏览器会自动为每个列表项分配序号,从1开始递增。
基本语法结构
通过<ol>包裹列表,内部用<li>表示每一项:
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
显示效果为:
- 第一项
- 第二项
- 第三项
自定义起始编号
如果希望编号不从1开始,可以使用start属性:
立即学习“前端免费学习笔记(深入)”;
<ol start="5"><li>第五项</li>
<li>第六项</li>
</ol>
这样列表会从数字5开始编号。
更改编号类型(CSS控制)
HTML5推荐使用CSS的list-style-type来控制编号样式:
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ol>
常见可选值包括:
- decimal:阿拉伯数字(1, 2, 3...)——默认
- lower-alpha:小写字母(a, b, c...)
- upper-alpha:大写字母(A, B, C...)
- lower-roman:小写罗马数字(i, ii, iii...)
- upper-roman:大写罗马数字(I, II, III...)
手动控制特定项的序号(reversed和value)
使用reversed可以让编号倒序显示:
<li>第三项</li>
<li>第二项</li>
<li>第一项</li>
</ol>
使用value属性可为某一项指定具体编号:
<li value="10">第十项</li>
<li>第十一项</li>
</ol>
后续项会在此基础上继续递增。
基本上就这些。有序列表天生支持顺序编号,通过简单属性或CSS就能灵活调整样式和起始位置。











