HTML 零基础教程

HTML 有序列表 <ol>

在 Web 开发中，如何清晰有效地展示信息。很多时候，你会遇到顺序很重要的场景，比如食谱的烹饪步骤、畅销产品的排名，或者演示文稿的大纲。

虽然你之前学过的无序列表（<ul>）非常适合罗列那些顺序无关紧要的项目，但有序列表提供了一种结构化的方式，可以按特定的数字或字母顺序显示项目。它们会自动为你处理编号或字母排列，使你的内容既易于阅读，又具有语义意义。

1. 有序列表的用途

有序列表用于展示一系列项目，其中顺序本身就传达了意义或重要性。

与使用圆点的无序列表（<ul>）不同，有序列表（<ol>）通常使用数字、字母或罗马数字来标记序列。这种内在的编号向用户传达了这里存在特定的流程、排名或循序渐进的指令。

例如，“十大排行榜”如果没有清晰的编号就没有意义，“如何烘焙蛋糕”的说明如果缺乏顺序步骤也会让人摸不着头脑。

2. <ol> 和 <li> 标签

<ol> 标签（"ordered list" 的缩写）是所有有序列表项的父容器。

列表中的每个单独项目则使用 <li> 标签（"list item" 的缩写）来定义，就像你在无序列表中看到的一样。

浏览器会根据列表的定义及其属性，自动为你渲染编号或字母。

基本结构如下：

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

解释：

  • <ol> 标签标志着有序列表的开始。
  • 每个 <li> 标签代表列表中的一个项目。
  • 浏览器显示效果：
    1. 第一项
    2. 第二项
    3. 第三项

现实案例：想象一下列出冲泡咖啡的步骤：

<ol>
  <li>烧水。</li>
  <li>研磨咖啡豆。</li>
  <li>将热水倒在咖啡粉上。</li>
  <li>等待咖啡冲泡。</li>
  <li>享用咖啡！</li>
</ol>

渲染结果：

  1. 烧水。
  2. 研磨咖啡豆。
  3. 将热水倒在咖啡粉上。
  4. 等待咖啡冲泡。
  5. 享用咖啡！

这里的编号清楚地表明了动作的先后顺序。

3. 使用属性自定义有序列表

有序列表的真正威力来自于它的属性。这些属性允许你控制标记的类型（数字、字母、罗马数字）、列表从哪里开始计数，甚至是否进行倒数。

3.1 type 属性

type 属性指定用于列表项的标记种类。这是一种在不改变列表内容的情况下改变外观的强大方式。

type 属性可以接受五个不同的值：

  • 1：（默认值）数字标记 (1, 2, 3, ...)。
  • a：小写字母标记 (a, b, c, ...)。
  • A：大写字母标记 (A, B, C, ...)。
  • i：小写罗马数字标记 (i, ii, iii, ...)。
  • I：大写罗马数字标记 (I, II, III, ...)。

使用 type="a" 的示例：

<ol type="a">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

渲染结果： a. 第一步 b. 第二步 c. 第三步

使用 type="I" 的示例：

<ol type="I">
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ol>

渲染结果： I. 第一章 II. 第二章 III. 第三章

3.2 start 属性

start 属性允许你指定列表的起始值。

你不需要总是从 1（或 'a', 'i'）开始，你可以告诉列表从你选择的任何整数开始计数。当你有一个被拆分成多个部分的长列表，或者需要接续上一页的列表时，这特别有用。

start 属性接受一个整数值。

从 5 开始的示例：

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

渲染结果：

5. 项目五

6. 项目六

7. 项目七

与 type 的交互：start 属性与 type 属性可以无缝配合。如果你设置 type="a" 且 start="3"，列表将从 'c' 开始。

<ol type="a" start="3">
  <li>字母排序的第三项</li>
  <li>字母排序的第四项</li>
</ol>

渲染结果：

c. 字母排序的第三项

d. 字母排序的第四项

3.3 reversed 属性

reversed 属性是一个布尔属性（意味着只要它存在就表示“真”）。当存在时，它指定列表项应按降序编号。

这对于倒计时、显示从高到低的排名或展示最近的活动非常有用。

倒序列表示例：

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

渲染结果：

3. 第一名

2. 第二名

1. 第三名

结合 reversed、start 和 type：你可以结合使用这些属性。start 控制开始倒数的数字（或对应的字母），type 控制样式。

<ol type="A" start="5" reversed>
  <li>最后一名</li>
  <li>倒数第二名</li>
  <li>倒数第三名</li>
</ol>

渲染结果：

E. 最后一名

D. 倒数第二名

C. 倒数第三名

注意：start="5" 适用于列表中的第一项，然后向下计数。所以第一项是 'E'（第 5 个字母），然后是 'D'（第 4 个），依此类推。

4. 使用 value 属性控制单个列表项

虽然 start 属性控制整个列表的开头，但 value 属性可以应用于 <ol> 内部的单个 <li> 元素。

这允许你显式设置特定列表项的编号，随后的项目将从该新值继续计数。这对于创建非连续列表或在项目被跳过时修正编号非常强大。

value 属性接受一个整数值。

4.1 使用 value 的示例

<ol>
  <li>任务 1</li>
  <li>任务 2</li>
  <li value="5">任务 5 (跳过了 3 和 4)</li>
  <li>任务 6 (从 5 继续)</li>
</ol>

渲染结果：

  1. 任务 1
  2. 任务 2
  3. 任务 5 (跳过了 3 和 4)
  4. 任务 6 (从 5 继续)

5. 综合示例：融会贯通

让我们看一些更复杂的例子，结合我们讨论过的属性来创建高级有序列表。

5.1 示例 1：带有罗马数字和跳过步骤的食谱

想象一个多阶段的食谱，主要阶段用罗马数字标记，其中一个阶段故意不按顺序编号。

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>食谱步骤</title>
</head>
<body>
    <h1>奶奶的著名曲奇</h1>
    
    <h2>配料：</h2>
    <ul>
        <li>2 杯中筋面粉</li>
        <li>1 茶匙小苏打</li>
        </ul>

    <h2>制作说明：</h2>
    <ol type="I"> <li>
            <h3>准备工作</h3>
            <ol type="1"> <li>将烤箱预热至 375°F (190°C)。</li>
                <li>在烤盘上铺上烘焙纸。</li>
            </ol>
        </li>
        <li>
            <h3>混合干性配料</h3>
            <ol type="a"> <li>在一个小碗里，将面粉、小苏打和盐混合在一起。放在一旁备用。</li>
            </ol>
        </li>
        <li value="5"> <h3>混合与烘烤</h3>
            <ol type="1">
                <li>逐渐将干性配料加入湿性配料中。</li>
                <li>拌入巧克力豆。</li>
                <li>烘烤 9-11 分钟。</li>
            </ol>
        </li>
    </ol>
</body>
</html>

5.2 示例 2：Top 5 倒序列表（从高位开始）

让我们创建一个最近 5 项成就的列表，按重要性或时间倒序显示，从高数字开始。

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>公司成就</title>
</head>
<body>
    <h1>近期公司里程碑</h1>
    <p>我们最重要的成就，按影响力从高到低排列：</p>
    
    <ol type="1" start="5" reversed> <li>推出了全新的 "InnovateX" 产品线，销量创纪录。</li>
        <li>拓展了三个新的国际市场。</li>
        <li>获得了 ISO 9001 认证。</li>
        <li>连续第二年被评为“最佳工作场所”。</li>
        <li>成功完成 B 轮融资。</li>
    </ol>
</body>
</html>

这是 reversed 和 start 的经典用例——展示倒计时或排名列表，最高值（或最新项目）首先出现，但编号最大。