有序列表(ol, li)

有序列表是HTML中用于展示有顺序关系内容的重要元素，通过<ol>和<li>标签实现。它默认以数字序号标记项目，但可通过属性自定义样式，适用于步骤说明、排名等场景。

基本语法与结构

有序列表由<ol>标签包裹多个<li>项目组成。浏览器会自动为每个项目添加序号：

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

渲染效果：

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

序号类型控制

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

<ol type="A">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

可选值：

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

起始序号设置

start属性指定起始编号：

<ol start="5">
  <li>第五项</li>
  <li>第六项</li>
</ol>

嵌套列表实现

有序列表可多层嵌套形成层级结构：

<ol>
  <li>第一章
    <ol type="a">
      <li>第一节</li>
      <li>第二节</li>
    </ol>
  </li>
  <li>第二章</li>
</ol>

反转列表顺序

reversed属性让序号倒序显示：

<ol reversed>
  <li>第三名</li>
  <li>第二名</li>
  <li>第一名</li>
</ol>

自定义序号值

通过value属性覆盖特定项目的序号：

<ol>
  <li value="10">第十项</li>
  <li>第十一项</li>
  <li value="5">第五项（重置）</li>
</ol>

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;
    font-weight: bold;
  }
</style>

<ol class="custom">
  <li>打开设备</li>
  <li>登录系统</li>
</ol>

实际应用场景

操作指南示例

<ol type="I">
  <li>将手机连接电脑</li>
  <li>打开开发者模式</li>
  <li>启用USB调试</li>
</ol>

法律条款编号

<ol>
  <li value="101">定义条款
    <ol type="a">
      <li>甲方定义</li>
      <li>乙方定义</li>
    </ol>
  </li>
  <li value="102">责任条款</li>
</ol>

与无序列表的对比

浏览器兼容性说明

所有现代浏览器均完整支持有序列表特性。对于IE8及以下版本：

• reversed属性需要polyfill
• CSS计数器支持有限
• start和value属性存在个别解析差异

可访问性实践

为屏幕阅读器优化：

<ol aria-label="烹饪步骤">
  <li aria-current="step">切配食材</li>
  <li>热锅倒油</li>
</ol>

动态生成示例

JavaScript创建有序列表：

const steps = ['初始化', '加载配置', '启动服务'];
const ol = document.createElement('ol');
steps.forEach(step => {
  const li = document.createElement('li');
  li.textContent = step;
  ol.appendChild(li);
});
document.body.appendChild(ol);