<ol>-有序列表

<ol> 是 HTML 中用于创建有序列表的标签，列表项会默认以数字序号标记。它和 <ul> 的无序列表不同，更适合需要强调顺序的场景，比如步骤说明、排名或目录。

<ol> 的基本语法

<ol> 必须搭配 <li> 使用，每个 <li> 代表一个列表项。浏览器会自动为列表项添加序号：

<ol>
  <li>第一步：准备材料</li>
  <li>第二步：混合搅拌</li>
  <li>第三步：放入烤箱</li>
</ol>

渲染效果：

1. 第一步：准备材料
2. 第二步：混合搅拌
3. 第三步：放入烤箱

序号类型控制

通过 type 属性可以改变序号样式：

<ol type="A">
  <li>苹果</li>
  <li>香蕉</li>
</ol>
<ol type="I">
  <li>第一章</li>
  <li>第二章</li>
</ol>

• type="1"：数字（默认）
• type="A"：大写字母（A, B, C...）
• type="a"：小写字母（a, b, c...）
• type="I"：大写罗马数字（I, II, III...）
• type="i"：小写罗马数字（i, ii, iii...）

自定义起始序号

start 属性可以指定序号起始值：

<ol start="10">
  <li>第十名</li>
  <li>第十一名</li>
</ol>

嵌套列表

<ol> 可以多层嵌套实现复杂结构：

<ol>
  <li>主步骤1
    <ol type="a">
      <li>子步骤a</li>
      <li>子步骤b</li>
    </ol>
  </li>
  <li>主步骤2</li>
</ol>

反向序号

reversed 属性让序号倒序显示：

<ol reversed>
  <li>季军</li>
  <li>亚军</li>
  <li>冠军</li>
</ol>

渲染效果： 3. 季军 2. 亚军

1. 冠军

CSS 样式控制

通过 CSS 可以完全自定义序号样式：

<style>
  ol.custom {
    list-style-type: none;
    counter-reset: step-counter;
  }
  ol.custom li::before {
    content: "步骤" counter(step-counter) ": ";
    counter-increment: step-counter;
    color: red;
  }
</style>

<ol class="custom">
  <li>打开电源</li>
  <li>选择程序</li>
</ol>

实际应用场景

操作指南

<ol>
  <li>插入钥匙</li>
  <li>顺时针旋转两圈</li>
  <li>等待指示灯亮起</li>
</ol>

法律条款编号

<ol type="I">
  <li>总则
    <ol type="a">
      <li>定义</li>
      <li>适用范围</li>
    </ol>
  </li>
  <li>权利与义务</li>
</ol>

排行榜

<ol start="1">
  <li>张三 - 95分</li>
  <li>李四 - 90分</li>
  <li>王五 - 85分</li>
</ol>

与 <ul> 的对比

无障碍注意事项

屏幕阅读器会播报列表项数量，例如："列表，3个项目"。对于步骤流程，使用 <ol> 能帮助视障用户理解顺序关系。避免仅用 CSS 模拟有序列表，这会破坏语义信息。

浏览器兼容性

所有现代浏览器都完整支持 <ol> 标签及其属性。IE8 及以下版本对 reversed 属性不支持，需要 polyfill 或 CSS 替代方案。