HTML 有序列表

HTML 有序列表（或编号列表）用于以特定、可解释的顺序呈现列表项。当您写食谱、记录算法步骤或列出最佳功能时，<ol>（有序列表）标签将确保您的内容以列表顺序呈现，显示层级或重要性顺序。

有序列表中的所有内容都包含在 <li>（列表项）标签内。列表默认可以使用阿拉伯数字（1、2、3…）进行编号，但还存在其他编号类型：字母和罗马数字，这些也可以通过 HTML 来提供。

HTML 中 <ol> 的示例

HTML 有序列表示例

让我们看一个显示 4 个主题的 HTML 有序列表示例，这些主题以编号列表的形式展示。这里我们没有定义 type="1"，因为这是默认类型。

输出

1. HTML
2. Java
3. JavaScript
4. SQL

使用 type 属性的有序列表类型

数字样式也可以通过使用 ol 标签的 type 属性来更改。有五种常见的值：

不同列表类型的示例

输出

A. HTML	
B. Java		
C. JavaScript	
D. SQL	

使用 type="a"、"I" 或 "i" 重复以上操作，以获得不同的格式。

使用 start 属性

start 属性标识列表的初始数字或标记。当继续一个列表与之前的列表相关联或平衡项目编号时，它非常有用。

输出

v. HTML
vi. Java
vii. JavaScript
viii. SQL

您可以根据需要混合使用 type 和 start

• type="A" 配合 start="5" → 从 "E" 开始
• type="I" 配合 start="10" → 从 "X" 开始

使用 reversed 反转列表顺序

reversed 属性自 HTML5 起可用，它以相反的顺序渲染列表项。

输出

4. HTML
3. Java
2. JavaScript
1. SQL

您可以将 reversed 与 start 和 type 结合使用

输出

X. HTML
IX. CSS
VIII. JavaScript

嵌套有序列表和无序列表

您可以使用 HTML 将列表包含在列表内，从而构建列表的层级结构。

示例：嵌套有序列表

输出

I. Chapter 1
  a. Introduction
  b. Basics
II. Chapter 2
  a. Advanced Concepts
  b. Practice

示例：混合嵌套列表

输出

1. Prepare ingredients:
 • Flour
 • Eggs
 • Butter
2. Mix and cook.
3. Serve with toppings:
 • Syrup
 • Fruits

使用 CSS 设置有序列表的样式

通过列表样式 CSS 也可以实现更多的视觉控制。

输出

Using list-style-type: upper-roman;
I. HTML
II. CSS
III. JavaScript

Using line-height:180%; for spacing
1.	Python
2.	Go

CSS 支持广泛的 list-style-type 类型：

• decimal、decimal-leading-zero、lower-roman、upper-roman
• lower-alpha、upper-alpha、Armenian、Georgian、Hebrew
• 使用 list-style-image 或 ::marker 进行高级设计的自定义样式

使用 CSS 进行高级自定义

除了内置的列表类型之外，CSS 还允许更广泛的自定义。一个例子是您可以使用 ::marker 直接设置列表标记的样式，如下所示：

您还可以使用 list-style-image 将项目符号或数字替换为自定义图标。

有序列表的可访问性考虑

有序列表不仅在视觉上进行了组织，而且在正确应用时还能提高可访问性。屏幕阅读器能够理解 <ol> 标签表示这些项是按顺序排列的。这就是为什么有序列表在提供说明、分步指南或顺序很重要的内容时非常有用。

为了提高可访问性，必须始终在 <li> 标签内提供有意义的内容，并且不应将其用于缩进或布局列表。此外，将有序列表添加到语义化 HTML（例如使用 section 标题和 ARIA 标签（如果需要））有助于确保您的文本在任何设备上以及使用任何辅助技术上都具有包容性和可访问性。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<ol>	是的	是的	是的	是的	是的

结论

<ol> HTML 元素提供了一种简单而有用的方法来显示有序信息。在编号步骤、指定章节大纲或列出排名项目时，您可以使用 type、start 和 reversed 等属性来自定义列表项的外观和顺序。普通列表已经足够灵活，可以从视觉和语义上组织您的内容，但通过嵌套和 CSS 样式支持，有序列表变得更加灵活。