使用标签可创建有序列表,结合type、start、reversed属性控制编号类型、起始值和倒序,通过CSS实现更灵活的样式定制,适用于步骤、排名等需顺序表达的内容。

在HTML中创建有序列表,使用 ol 标签(ordered list)是最直接的方式。它会自动为列表项添加数字编号,适合用于步骤说明、排名、流程等需要顺序表达的内容。下面详细介绍如何创建和控制有序列表的样式。
基本语法:创建有序列表
使用 标签包裹列表,每个列表项用 标签表示:
- 第一步:准备材料
- 第二步:开始制作
- 第三步:完成测试
浏览器会默认显示为带数字编号的垂直列表。
修改编号类型:type 属性
通过 type 属性可以更改编号样式:
立即学习“前端免费学习笔记(深入)”;
- 1:阿拉伯数字(默认,如 1, 2, 3)
- a:小写英文字母(a, b, c)
- A:大写英文字母(A, B, C)
- i:小写罗马数字(i, ii, iii)
- I:大写罗马数字(I, II, III)
示例:
- 选项一
- 选项二
从指定数字开始:start 属性
使用 start 属性可设置起始编号:
- 第五步
- 第六步
这样列表将从数字 5 开始计数。
反转列表顺序:reversed 属性
添加 reversed 属性可以让编号倒序排列:
- 第三项
- 第二项
- 第一项
显示为 3, 2, 1 的倒序编号。
使用CSS自定义样式
如果需要更灵活的样式控制,可以用CSS代替HTML属性:
- 用 list-style-type 设置编号类型
- 用 counter-reset 和 counter-increment 实现复杂编号逻辑
- 用 margin 和 padding 调整缩进
示例:CSS设置大写字母编号
- 第一节
- 第二节
基本上就这些。ol标签简单实用,配合CSS能实现丰富的有序列表效果。注意语义化使用,避免仅为了样式而滥用编号列表。











