HTML 有序列表的攻略：轻松掌握有序显示的艺术

有序列表使用 <ol>（ordered list）标签创建，其中包含 <li>（list item）标签表示列表项。编号自动生成，从 1 开始。

语法：

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

2. 自定义编号

要自定义编号类型，使用 type 属性。支持以下类型：

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

语法：

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

3. 自定义编号起点

使用 start 属性可自定义编号起点。

语法：

<ol start="3">
  <li>项目 3</li>
  <li>项目 4</li>
  <li>项目 5</li>
</ol>

4. 嵌套列表

列表可以嵌套，使用 <ul>（unordered list）或 <ol> 标签创建。

语法：

<ul>
  <li>列表项 1
    <ol>
      <li>子列表项 1</li>
      <li>子列表项 2</li>
    </ol>
  </li>
  <li>列表项 2</li>
</ul>

5. 样式

有序列表的样式可以使用 CSS 样式表控制。一些常用的样式属性包括：

• list-style-type：设置编号类型
• list-style-position：设置编号的位置（inside 或 outside）
• list-style-image：使用图像作为编号
• padding-left：设置编号和文本之间的间距

6. 辅助功能

为了改善辅助功能，使用 aria-label 或 aria-labelledby 属性为有序列表提供描述性文本。

语法：

<ol aria-label="产品功能">
  <li>功能 1</li>
  <li>功能 2</li>
</ol>

7. 浏览器兼容性

有序列表在所有主要浏览器中均获得广泛支持。但是，在自定义编号时，不同的浏览器可能存在细微的兼容性差异。

8. 用途

有序列表通常用于表示步骤、步骤或序列。例如：

• 步骤说明
• 购物清单
• 任务列表
• 优先级等级