HTML 有序列表标签 - <ol>

什么是 <ol> 标签？

<ol> 标签用于定义有序列表（Ordered List）。有序列表中的列表项会自动编号，浏览器会按照顺序为每个列表项添加数字或字母。

基本语法

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

浏览器显示效果

  1. 列表项1
  2. 列表项2
  3. 列表项3

主要属性

1. type 属性

指定列表项的编号类型。

值 描述
1 数字编号（默认）：1, 2, 3, …
a 小写字母：a, b, c, …
A 大写字母：A, B, C, …
i 小写罗马数字：i, ii, iii, …
I 大写罗马数字：I, II, III, …

示例：

html 
<!-- 使用大写字母编号 -->
<ol type="A">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

<!-- 使用小写罗马数字编号 -->
<ol type="i">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

2. start 属性

指定列表的起始编号。该属性的值必须是整数。

示例：

html 
<!-- 从5开始编号 -->
<ol start="5">
  <li>列表项1</li> <!-- 显示为5 -->
  <li>列表项2</li> <!-- 显示为6 -->
  <li>列表项3</li> <!-- 显示为7 -->
</ol>

<!-- 与type属性结合使用 -->
<ol type="A" start="3">
  <li>列表项1</li> <!-- 显示为C -->
  <li>列表项2</li> <!-- 显示为D -->
  <li>列表项3</li> <!-- 显示为E -->
</ol>

3. reversed 属性

指定列表是否反向编号。这是一个布尔属性，不需要值。

示例：

html 
<!-- 反向编号的列表 -->
<ol reversed>
  <li>列表项1</li> <!-- 显示为3 -->
  <li>列表项2</li> <!-- 显示为2 -->
  <li>列表项3</li> <!-- 显示为1 -->
</ol>

<!-- 反向编号并指定起始值 -->
<ol reversed start="5">
  <li>列表项1</li> <!-- 显示为5 -->
  <li>列表项2</li> <!-- 显示为4 -->
  <li>列表项3</li> <!-- 显示为3 -->
</ol>

全局属性

<ol> 标签支持所有HTML全局属性，常用的包括：

属性 描述
class 为列表指定类名
id 为列表指定唯一ID
style 内联样式
title 鼠标悬停时显示的提示文本
lang 指定列表内容的语言

已废弃的属性

以下属性在HTML5中已被废弃，建议使用CSS替代：

  • compact：紧凑显示列表

不推荐使用：

html 
<ol compact>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

推荐使用CSS：

html 
<ol style="line-height: 1.2; padding-left: 20px;">
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

最佳实践

1. 正确嵌套列表

有序列表可以嵌套无序列表，反之亦然。嵌套列表应该正确缩进，以提高代码可读性。

示例：

html 
<ol>
  <li>主要项目1
    <ul>
      <li>子项目1.1</li>
      <li>子项目1.2</li>
    </ul>
  </li>
  <li>主要项目2
    <ul>
      <li>子项目2.1</li>
      <li>子项目2.2
        <ol>
          <li>子子项目2.2.1</li>
          <li>子子项目2.2.2</li>
        </ol>
      </li>
    </ul>
  </li>
</ol>

2. 使用CSS自定义样式

虽然<ol>标签提供了一些基本的样式属性，但使用CSS可以获得更丰富的样式效果。

示例：

html 
<style>
  /* 自定义有序列表样式 */
  .custom-ol {
    color: #333;
    font-family: Arial, sans-serif;
    padding-left: 30px;
  }
  
  /* 自定义列表项 */
  .custom-ol li {
    margin-bottom: 8px;
    line-height: 1.5;
  }
  
  /* 自定义编号颜色 */
  .custom-ol {
    list-style-type: decimal;
  }
  
  .custom-ol li::marker {
    color: #0066cc;
    font-weight: bold;
  }
</style>

<ol class="custom-ol">
  <li>自定义列表项1</li>
  <li>自定义列表项2</li>
  <li>自定义列表项3</li>
</ol>

3. 语义化使用

有序列表应该用于表示具有明确顺序的项目，如步骤、排名、编号等。如果项目之间没有顺序关系，应该使用无序列表(<ul>)。

适合使用<ol>的场景：

  • 操作步骤
  • 排名或评分
  • 编号列表
  • 时间线

4. 避免空列表

不要创建空的有序列表。如果列表内容暂时不可用，应该考虑是否需要显示列表容器。

不推荐使用：

html 
<ol></ol>

常见应用场景

1. 操作步骤

html 
<h2>注册账号步骤</h2>
<ol>
  <li>访问注册页面</li>
  <li>填写基本信息</li>
  <li>设置密码</li>
  <li>验证邮箱</li>
  <li>完成注册</li>
</ol>

2. 排名列表

html 
<h2>2025年最受欢迎的编程语言</h2>
<ol>
  <li>Python</li>
  <li>JavaScript</li>
  <li>Java</li>
  <li>C#</li>
  <li>C++</li>
</ol>

3. 嵌套列表

html 
<h2>课程大纲</h2>
<ol>
  <li>HTML基础
    <ul>
      <li>标签和属性</li>
      <li>文档结构</li>
      <li>文本格式化</li>
    </ul>
  </li>
  <li>CSS基础
    <ul>
      <li>选择器</li>
      <li>盒模型</li>
      <li>布局技术</li>
    </ul>
  </li>
  <li>JavaScript基础
    <ul>
      <li>变量和数据类型</li>
      <li>函数</li>
      <li>DOM操作</li>
    </ul>
  </li>
</ol>

完整示例

html 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>有序列表示例</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    
    h1 {
      color: #333;
      border-bottom: 2px solid #0066cc;
      padding-bottom: 10px;
    }
    
    h2 {
      color: #0066cc;
      margin-top: 30px;
    }
    
    /* 自定义列表样式 */
    .recipe-steps {
      background-color: #f8f9fa;
      padding: 20px;
      border-radius: 5px;
      border-left: 4px solid #0066cc;
    }
    
    .recipe-steps li {
      margin-bottom: 10px;
    }
    
    /* 自定义编号 */
    .custom-numbers {
      list-style-type: upper-roman;
    }
    
    .custom-numbers li::marker {
      color: #0066cc;
    }
    
    /* 嵌套列表样式 */
    .nested-list {
      margin-top: 20px;
    }
    
    .nested-list ul {
      margin-top: 5px;
    }
    
    .nested-list li {
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <h1>HTML 有序列表的使用</h1>
  
  <h2>1. 基本有序列表</h2>
  <ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
    <li>葡萄</li>
  </ol>
  
  <h2>2. 不同类型的编号</h2>
  
  <h3>字母编号（大写）</h3>
  <ol type="A">
    <li>第一阶段</li>
    <li>第二阶段</li>
    <li>第三阶段</li>
  </ol>
  
  <h3>罗马数字（小写）</h3>
  <ol type="i">
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
  </ol>
  
  <h2>3. 自定义起始编号</h2>
  <ol start="10">
    <li>第10条记录</li>
    <li>第11条记录</li>
    <li>第12条记录</li>
  </ol>
  
  <h2>4. 反向编号</h2>
  <ol reversed>
    <li>最后一名</li>
    <li>第二名</li>
    <li>第一名</li>
  </ol>
  
  <h2>5. 食谱步骤（自定义样式）</h2>
  <ol class="recipe-steps">
    <li>将面粉、鸡蛋、牛奶混合成面糊</li>
    <li>加热平底锅，加入少量油</li>
    <li>倒入一勺面糊，摊成圆形</li>
    <li>煎至两面金黄</li>
    <li>搭配果酱或蜂蜜食用</li>
  </ol>
  
  <h2>6. 嵌套列表</h2>
  <ol class="nested-list">
    <li>前端开发
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>后端开发
      <ul>
        <li>Python</li>
        <li>Java</li>
        <li>Node.js</li>
      </ul>
    </li>
    <li>数据库
      <ul>
        <li>MySQL</li>
        <li>MongoDB</li>
        <li>PostgreSQL</li>
      </ul>
    </li>
  </ol>
</body>
</html>

总结

<ol> 标签是HTML中用于创建有序列表的重要元素，它允许我们以编号的方式组织内容。通过type、start和reversed等属性，我们可以自定义列表的编号样式和顺序。在实际应用中，应该根据内容的语义选择合适的列表类型，并使用CSS来自定义列表样式，以获得更好的视觉效果和用户体验。

最后更新：2026-02-07