HTML |

属性

<ol>（ordered list）是 HTML 中用于创建有序列表的标签，它允许我们按序显示一组项目。在这篇文章中，我们将会学习如何使用 <ol> 标签来创建一个有序列表，并且介绍一些常用的属性及其对应的取值。

基础语法

有序列表中的每一个列表项都被包含在一个 <li> 标签中，<ol> 标签主要用来包含这些列表项，它的语法如下所示：

<ol>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ol>

上面的代码将会渲染一个简单的有序列表，如下所示：

1. 列表项 1
2. 列表项 2
3. 列表项 3

属性

<ol> 标签有一些常用的属性可以帮助我们控制有序列表的呈现。下面是一些常用的属性及其对应的取值：

start

start 属性用于定义有序列表的起始数字。默认情况下，<ol> 标签的起始数字为 1。例如，我们可以使用 start="5" 来将有序列表的起始数字改为 5：

<ol start="5">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ol>

这段代码将会渲染一个有序列表，起始数字为 5，如下所示：

5. 列表项 1
6. 列表项 2
7. 列表项 3

type

type 属性用于定义有序列表的符号类型。默认情况下，有序列表使用数字作为列表项的符号。下面是一些常用的符号类型：

• "1"：使用数字（默认值）
• "A"：使用大写字母
• "a"：使用小写字母
• "I"：使用大写罗马数字
• "i"：使用小写罗马数字

例如，我们可以使用 type="A" 来将列表项的符号类型改为大写字母：

<ol type="A">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ol>

这段代码将会渲染一个使用大写字母作为符号的有序列表，如下所示：

A. 列表项 1 B. 列表项 2 C. 列表项 3

reversed

reversed 属性用于将有序列表反向显示。即，列表项的编号从大到小递减。例如，我们可以使用 reversed 来将有序列表反向显示：

<ol reversed>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ol>

这段代码将会渲染一个反向显示的有序列表，如下所示：

3. 列表项 1
4. 列表项 2
5. 列表项 3

结语

本文介绍了 HTML 中的 <ol> 标签及其常用属性。除了上述所介绍的属性之外，还有一些其他的属性也可以用来控制有序列表的呈现。建议在实际开发中灵活运用这些属性来满足自己的需求。