HTML 的 ＜ol＞ 元素

1. 什么是

1. 元素

<ol> 是 HTML 中用于创建有序列表 （Ordered List）的标签。与无序列表 <ul> 不同，<ol> 中的每一项会自动带有编号，例如数字、字母或罗马数字，用于表示项目的先后顺序或优先级。

一个最基本的有序列表示例：

<ol>
  <li>第一步：准备食材</li>
  <li>第二步：加热锅具</li>
  <li>第三步：翻炒食材</li>
</ol>

浏览器渲染效果：

1. 第一步：准备食材
2. 第二步：加热锅具
3. 第三步：翻炒食材

2.

1. 的核心属性

<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

<ol type="A">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

渲染效果：

A. 苹果

B. 香蕉

C. 橙子

2.2 start：自定义起始编号

start 属性允许你指定列表从哪个数字开始编号，适用于列表被拆分成多段展示的场景。

<ol start="5">
  <li>第五项</li>
  <li>第六项</li>
</ol>

渲染效果：

5. 第五项
6. 第六项

2.3 reversed：倒序编号

reversed 是一个布尔属性，加上它后列表会从大到小倒序编号，常用于排行榜或倒计时场景。

<ol reversed>
  <li>冠军</li>
  <li>亚军</li>
  <li>季军</li>
</ol>

渲染效果：

3. 冠军
4. 亚军
5. 季军

3.

• 的 value 属性：手动指定编号

列表项 <li> 支持 value 属性，可以手动指定某一项的编号，后续项会在此基础上继续递增。

<ol>
  <li>第一项</li>
  <li value="10">直接跳到第十项</li>
  <li>第十一项</li>
</ol>

渲染效果：

1. 第一项
2. 直接跳到第十项
3. 第十一项

4. 嵌套有序列表

<ol> 支持嵌套使用，用于表达多层级的有序关系。嵌套时浏览器会自动调整内层列表的编号样式。

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

渲染效果：

1. 前端开发
   1. HTML
   2. CSS
   3. JavaScript
2. 后端开发
   1. Java
   2. Python

5. 与

• 的对比

<ol> 与 <ul> 是 HTML 中最常用的两种列表标签，它们的区别如下：

对比项	1. （有序列表）	* （无序列表）
语义	表示有先后顺序的项目	表示无先后顺序的项目
默认标记	数字编号	圆点符号
典型场景	步骤说明、排行榜、目录	导航菜单、特性清单、标签列表

选择原则很简单：内容有顺序就用 <ol>，没有顺序就用 <ul>。

6. 实际应用示例

下面是一个结合多种属性的综合示例，模拟一份「网站发布检查清单」：

<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> 手动指定某一项的编号；
• 通过嵌套表达多层级的有序关系。

在实际开发中，根据内容的语义选择合适的列表类型，能让页面结构更清晰、可访问性更好。