有序列表(ol, li)

有序列表的基本概念

有序列表（Ordered List）是HTML中用于展示有顺序关系内容的元素。它通过<ol>标签定义，列表项使用<li>标签表示。浏览器会自动为每个列表项添加序号，默认使用阿拉伯数字（1, 2, 3...）。

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

ol标签的属性

<ol>标签支持多个属性来控制列表的显示方式：

• type：设置编号类型
  • 1：数字（默认）
  • A：大写字母
  • a：小写字母
  • I：大写罗马数字
  • i：小写罗马数字

<ol type="A">
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ol>

• start：指定起始编号
• reversed：倒序排列

<ol start="5" reversed>
  <li>第五项</li>
  <li>第四项</li>
  <li>第三项</li>
</ol>

li标签的特殊属性

<li>标签可以设置value属性来改变当前项的编号值：

<ol>
  <li>第一项</li>
  <li value="5">第五项（跳过2-4）</li>
  <li>第六项</li>
</ol>

嵌套有序列表

有序列表可以多层嵌套，形成复杂的层次结构：

<ol>
  <li>第一章
    <ol>
      <li>第一节</li>
      <li>第二节</li>
    </ol>
  </li>
  <li>第二章
    <ol>
      <li>第一节</li>
      <li>第二节</li>
    </ol>
  </li>
</ol>

CSS样式控制

虽然浏览器提供了默认样式，但可以通过CSS完全自定义：

ol.custom {
  list-style-type: none;
  counter-reset: section;
}

ol.custom li::before {
  content: counters(section, ".") " ";
  counter-increment: section;
  color: red;
  font-weight: bold;
}

<ol class="custom">
  <li>项目
    <ol>
      <li>子项目</li>
      <li>子项目</li>
    </ol>
  </li>
  <li>项目</li>
</ol>

实际应用场景

1. 操作步骤说明：

<ol>
  <li>打开设备电源</li>
  <li>选择语言设置</li>
  <li>连接WiFi网络</li>
</ol>

2. 目录结构：

<ol type="I">
  <li>引言
    <ol type="A">
      <li>研究背景</li>
      <li>研究目的</li>
    </ol>
  </li>
  <li>正文</li>
</ol>

3. 排名展示：

<ol start="1">
  <li>第一名：张三</li>
  <li>第二名：李四</li>
  <li>第三名：王五</li>
</ol>

与无序列表的区别

有序列表和无序列表(<ul>)的主要区别在于：

• 有序列表强调项目的顺序重要性
• 无序列表项目之间是平等关系
• 有序列表默认显示编号
• 无序列表默认显示项目符号

<!-- 有序列表 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

<!-- 无序列表 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

浏览器兼容性考虑

所有现代浏览器都完全支持<ol>和<li>标签，但需要注意：

• 某些旧版本IE对CSS计数器支持不完全
• 移动设备上长列表可能需要特殊样式防止溢出
• 打印时可能需要调整列表样式

@media print {
  ol {
    page-break-inside: avoid;
  }
}

高级应用技巧

1. 自定义编号内容：

ol.fancy li::marker {
  content: "步骤" counter(list-item) ": ";
}

2. 多级编号重置：

ol { counter-reset: section; }
li { counter-increment: section; }
li::before { content: counters(section,".") " "; }

3. 结合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);

可访问性最佳实践

1. 为屏幕阅读器提供额外信息：

<ol aria-label="安装步骤">
  <li aria-current="step">下载软件</li>
  <li>运行安装程序</li>
</ol>

2. 复杂列表使用适当的ARIA角色：

<ol role="list">
  <li role="listitem">项目一</li>
  <li role="listitem">项目二</li>
</ol>

3. 确保编号与内容之间有足够对比度

性能优化建议

1. 避免过度嵌套（超过5层）
2. 长列表考虑虚拟滚动
3. 静态列表预渲染优于JavaScript生成

// 不好的做法 - 每次渲染都重新创建
function renderList(items) {
  return items.map(item => `<li>${item}</li>`).join('');
}

// 好的做法 - 一次性生成
const longList = Array(1000).fill().map((_,i) => `<li>项目${i+1}</li>`).join('');
document.querySelector('ol').innerHTML = longList;

与其他HTML元素的组合

有序列表常与以下元素配合使用：

1. 与<div>组合：

<ol>
  <li>
    <div class="step-header">第一步</div>
    <div class="step-content">...</div>
  </li>
</ol>

2. 与<figure>组合：

<ol>
  <li>
    <figure>
      <img src="step1.jpg" alt="第一步图示">
      <figcaption>准备材料</figcaption>
    </figure>
  </li>
</ol>

3. 与表单元素组合：

<ol>
  <li>
    <label>
      <input type="checkbox">
      同意条款
    </label>
  </li>
</ol>