1. 什么是
- 元素
<ol> 是 HTML 中用于创建有序列表 （Ordered List）的标签。与无序列表 <ul> 不同，<ol> 中的每一项会自动带有编号，例如数字、字母或罗马数字，用于表示项目的先后顺序或优先级。
一个最基本的有序列表示例：
html
<ol>
<li>第一步：准备食材</li>
<li>第二步：加热锅具</li>
<li>第三步：翻炒食材</li>
</ol>浏览器渲染效果：
- 第一步：准备食材
- 第二步：加热锅具
- 第三步：翻炒食材
2.
- 的核心属性
<ol> 元素支持多个属性来控制列表的编号方式，其中最常用的是 type、start 和 reversed。
2.1 type：设置编号类型
type 属性用于指定编号的样式，可选值包括：
| 属性值 | 编号样式 | 示例 |
|---|---|---|
1 |
阿拉伯数字（默认） | 1, 2, 3 |
a |
小写字母 | a, b, c |
A |
大写字母 | A, B, C |
i |
小写罗马数字 | i, ii, iii |
I |
大写罗马数字 | I, II, III |
html
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ol>渲染效果：
A. 苹果
B. 香蕉
C. 橙子
2.2 start：自定义起始编号
start 属性允许你指定列表从哪个数字开始编号，适用于列表被拆分成多段展示的场景。
html
<ol start="5">
<li>第五项</li>
<li>第六项</li>
</ol>渲染效果：
- 第五项
- 第六项
2.3 reversed：倒序编号
reversed 是一个布尔属性，加上它后列表会从大到小倒序编号，常用于排行榜或倒计时场景。
html
<ol reversed>
<li>冠军</li>
<li>亚军</li>
<li>季军</li>
</ol>渲染效果：
- 冠军
- 亚军
- 季军
3.
- 的 value 属性：手动指定编号
列表项 <li> 支持 value 属性，可以手动指定某一项的编号，后续项会在此基础上继续递增。
html
<ol>
<li>第一项</li>
<li value="10">直接跳到第十项</li>
<li>第十一项</li>
</ol>渲染效果：
- 第一项
- 直接跳到第十项
- 第十一项
4. 嵌套有序列表
<ol> 支持嵌套使用，用于表达多层级的有序关系。嵌套时浏览器会自动调整内层列表的编号样式。
html
<ol>
<li>前端开发
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
<li>后端开发
<ol>
<li>Java</li>
<li>Python</li>
</ol>
</li>
</ol>渲染效果：
- 前端开发
- HTML
- CSS
- JavaScript
- 后端开发
- Java
- Python
5. 与
- 的对比
<ol> 与 <ul> 是 HTML 中最常用的两种列表标签，它们的区别如下：
| 对比项 | 1. （有序列表） | * （无序列表） |
|---|---|---|
| 语义 | 表示有先后顺序的项目 | 表示无先后顺序的项目 |
| 默认标记 | 数字编号 | 圆点符号 |
| 典型场景 | 步骤说明、排行榜、目录 | 导航菜单、特性清单、标签列表 |
选择原则很简单：内容有顺序就用 <ol>，没有顺序就用 <ul>。
6. 实际应用示例
下面是一个结合多种属性的综合示例，模拟一份「网站发布检查清单」：
html
<ol type="I">
<li>内容检查
<ol type="a">
<li>确认所有页面无错别字</li>
<li>检查图片 alt 文本</li>
</ol>
</li>
<li>技术检查
<ol type="a">
<li>验证 HTTPS 证书</li>
<li>测试移动端适配</li>
</ol>
</li>
<li>上线发布</li>
</ol>7. 总结
<ol> 元素是 HTML 中表达有序内容的核心标签，掌握它的关键点包括：
- 使用
type切换编号样式（数字、字母、罗马数字）； - 使用
start自定义起始编号； - 使用
reversed实现倒序； - 使用
<li value>手动指定某一项的编号； - 通过嵌套表达多层级的有序关系。
在实际开发中，根据内容的语义选择合适的列表类型，能让页面结构更清晰、可访问性更好。