HTML有序列表

我们使用 HTML 有序列表来定义一个列表，其中列表项的顺序很重要。我们可以将 HTML 有序列表用于食谱、算法、十大列表等等。

我们使用 <ol> 标签创建一个无序列表。例如：

<ol>
  <li>Name</li>
  <li>Address</li>
  <li>Phone Number</li>
</ol>

浏览器输出

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

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

有序列表类型

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

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

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>Cat</li>
    <li>Dog</li>
    <li>Elephant</li>
    <li>Fish</li>
  </ol>

浏览器输出

在这里，我们可以看到列表的顺序颠倒了，第一个列表项编号为 4，最后一个编号为 1。

同样，reversed 属性也可以与其他类型结合使用，并与 start 属性一起使用。例如：

 <ol reversed type="I" start="10">
    <li>Cat</li>
    <li>Dog</li>
    <li>Elephant</li>
    <li>Fish</li>
</ol>

浏览器输出

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

嵌套列表

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

<ol type="I">
  <li>
    Chapter 1
    <ol type="a">
      <li>Lesson 1</li>
      <li>Lesson 2</li>
    </ol>
  </li>
  <li>
    Chapter 2
    <ol type="a">
      <li>Lesson 1</li>
      <li>Lesson 2</li>
      <li>Lesson 3</li>
    </ol>
  </li>
  <li>
    Chapter 3
    <ol type="a">
      <li>Lesson 1</li>
    </ol>
  </li>
</ol>

浏览器输出

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

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

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

<ol>
  <li>
    Prepare the ingredients.
    <ul>
      <li>Eggs</li>
      <li>Salt</li>
      <li>Butter</li>
    </ul>
  </li>
  <li>
    Mix the ingredients and cook on a low flame. 
  </li>
  <li>
    Serve hot with garnish. You can use
    <ul>
      <li>Chives</li>
      <li>Bacon</li>
      <li>Coriander</li>
    </ul>
  </li>
</ol>

浏览器输出

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