HTML 有序列表

提示

1. HTML有序列表基本结构：使用<ol>标签创建有序列表，列表项用<li>标签表示，列表项默认以数字编号。
2. 有序列表的类型和属性：通过type属性改变列表编号类型（如字母、罗马数字），start属性改变起始编号，reversed属性实现编号反向排序。
3. 嵌套列表的创建：在有序列表中嵌套另一个有序列表或无序列表<ul>，实现多层级的列表结构。

我们使用 HTML 有序列表来定义列表项的顺序或序列很重要的列表。我们可以为食谱、算法、前十名列表等使用 HTML 有序列表。

我们使用 <ol> 标签来创建有序列表。例如，

<ol>
  <li>姓名</li>
  <li>地址</li>
  <li>电话号码</li>
</ol>

浏览器输出

列表的每个项都包裹在 <li> 标签内，并由十进制数字编号。

默认情况下，有序列表是按数字排序的，但我们可以根据自己的选择改变它们。

有序列表的类型

我们使用 type 属性来改变列表的标记。有序列表中有五种编号类型。它们是

类型	描述
"1"(默认)	列表用数字编号。
"a"	列表用小写字母编号。
"A"	列表用大写字母编号。
"i"	列表用小写罗马数字编号。
"I"	列表用大写罗马数字编号。

下面，我们可以看到所有编号类型的示例。

start 属性

我们使用 start 属性来改变列表编号的起始点。例如，

<ol start="5">
  <li>Harry</li>
  <li>Ron</li>
  <li>Sam</li>
</ol>

浏览器输出

在这里，我们将列表的起始值改为 5。

这个属性也适用于其他类型。例如，

<ol type="a" start="5">
  <li>Harry</li>
  <li>Ron</li>
  <li>Sam</li>
</ol>

浏览器输出

同样地，我们可以将 start 属性与所有其他类型一起使用。

reversed 属性

我们可以在有序列表上使用 reversed 属性来反转列表上的编号。例如，

<ol reversed>
  <li>猫</li>
  <li>狗</li>
  <li>大象</li>
  <li>鱼</li>
</ol>

浏览器输出

在这里，我们可以看到列表的顺序被反转，第一个列表项编号为 4，最后一个编号为 1。 同样地，reversed 属性也可以与其他类型一起使用，并与 start 属性结合使用。例如，

<ol reversed type="I" start="10">
  <li>猫</li>
  <li>狗</li>
  <li>大象</li>
  <li>鱼</li>
</ol>

浏览器输出

在上述示例中，我们使用大写罗马数字类型，从 10 开始并反转编号的顺序。

嵌套列表

在 HTML 中，我们可以通过在一个列表内添加另一个列表来创建嵌套列表。例如，

<ol type="I">
  <li>
    第 1 章
    <ol type="a">
      <li>课程 1</li>
      <li>课程 2</li>
    </ol>
  </li>
  <li>
    第 2 章
    <ol type="a">
      <li>课程 1</li>
      <li>课程 2</li>
      <li>课程 3</li>
    </ol>
  </li>
  <li>
    第 3 章
    <ol type="a">
      <li>课程 1</li>
    </ol>
  </li>
</ol>

浏览器输出

在上述示例中，您可以看到我们在另一个有序列表内添加了一个有序列表。

在这种情况下，外层有序列表的列表项也包括一个有序列表。

同样地，我们也可以在嵌套时混合列表类型，并在有序列表内添加无序列表。例如，

<ol>
  <li>
    准备食材。
    <ul>
      <li>鸡蛋</li>
      <li>盐</li>
      <li>黄油</li>
    </ul>
  </li>
  <li>混合食材并在小火上烹饪。</li>
  <li>
    装盘热食。你可以使用
    <ul>
      <li>韭菜</li>
      <li>培根</li>
      <li>香菜</li>
    </ul>
  </li>
</ol>

浏览器输出

注意： 在我们的示例中，我们将列表嵌套到单一层级，但我们也可以将列表嵌套到多个层级。