40. 有序列表 ol 与 li

本节目标：学会用 <ol> 创建有序列表，掌握 type、start、reversed 三个属性，知道什么时候该用有序列表。

当列表项之间有明确的先后顺序时，用有序列表。比如步骤说明、排行榜、操作步骤等。

基本用法

有序列表用 <ol> 标签包裹，每个列表项同样用 <li>：

<ol>
  <li>准备食材</li>
  <li>切菜备料</li>
  <li>热锅下油</li>
  <li>翻炒调味</li>
  <li>出锅装盘</li>
</ol>

浏览器显示效果：

准备食材
切菜备料
热锅下油
翻炒调味
出锅装盘

Note

<ol> 是 ordered list（有序列表）的缩写。和无序列表一样，直接子元素必须是 <li>。

type 属性：改变编号类型

默认用数字编号，type 属性可以切换：

<ol type="1">
  <li>数字编号（默认）</li>
  <li>1、2、3...</li>
</ol>

<ol type="A">
  <li>大写字母</li>
  <li>A、B、C...</li>
</ol>

<ol type="a">
  <li>小写字母</li>
  <li>a、b、c...</li>
</ol>

<ol type="I">
  <li>大写罗马数字</li>
  <li>I、II、III...</li>
</ol>

<ol type="i">
  <li>小写罗马数字</li>
  <li>i、ii、iii...</li>
</ol>

type 值	效果
`1`	数字（默认）
`A`	大写字母
`a`	小写字母
`I`	大写罗马数字
`i`	小写罗马数字

start 属性：指定起始编号

默认从 1 开始，start 可以指定任意起始值：

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

显示效果： 5. 第五项 6. 第六项 7. 第七项

Tip

start 的值始终是数字。即使 type="A"，start="3" 也会从 C 开始。

reversed 属性：倒序排列

加上 reversed 属性，编号从大到小：

<ol reversed>
  <li>第三名</li>
  <li>第二名</li>
  <li>第一名</li>
</ol>

显示效果： 3. 第三名 2. 第二名

第一名

可以配合 start 使用：

<ol reversed start="10">
  <li>第10名</li>
  <li>第9名</li>
  <li>第8名</li>
</ol>

有序列表的嵌套

和无序列表一样，有序列表也可以嵌套：

<ol>
  <li>第一阶段
    <ol type="a">
      <li>需求分析</li>
      <li>原型设计</li>
    </ol>
  </li>
  <li>第二阶段
    <ol type="a">
      <li>编码开发</li>
      <li>测试验收</li>
    </ol>
  </li>
</ol>

显示效果：

第一阶段 a. 需求分析 b. 原型设计
第二阶段 a. 编码开发 b. 测试验收

什么时候用有序 vs 无序

简单判断标准：

有序列表：顺序有意义，打乱后含义改变（步骤、排名、流程）
无序列表：顺序无关，打乱后含义不变（购物清单、功能列表）

Note

如果只是想要”前面有个符号”的视觉效果，用无序列表 + CSS 更灵活。有序列表的语义是”有顺序”。

实际应用：排行榜

<ol>
  <li><strong>张三</strong> — 98分</li>
  <li><strong>李四</strong> — 95分</li>
  <li><strong>王五</strong> — 92分</li>
  <li>赵六 — 88分</li>
  <li>钱七 — 85分</li>
</ol>

小结

<ol> 创建有序列表，默认数字编号
type 切换编号类型（数字、字母、罗马数字）
start 指定起始编号
reversed 倒序排列
顺序有意义时用有序列表

下一节，我们学习第三种列表：定义列表。