PHP小码农

Appearance

ol 有序列表 ​

<ol> 标签用于创建有序列表（Ordered List）。列表项的顺序有意义时使用 <ol>，浏览器默认为每项添加数字编号。<ol> 与 <li>（列表项）配合使用。

前置知识

阅读本节前，建议先了解：ul 无序列表

基础概念 ​

<ol> 是 "Ordered List"（有序列表）的缩写。有序列表中的项目有特定的先后顺序，每个列表项前面会有数字编号（默认从 1 开始）。当步骤顺序或排名很重要时使用 <ol>。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>ol 有序列表示例</title>
</head>
<body>
  <h1>安装步骤</h1>
  <ol>
    <li>下载安装包</li>
    <li>解压缩文件</li>
    <li>运行安装程序</li>
    <li>完成配置</li>
  </ol>
</body>
</html>

详细说明 ​

ol 的属性 ​

属性说明示例
start指定起始编号<ol start="5">
reversed倒序编号<ol reversed>
type编号类型<ol type="A">

start 属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>start 属性</title>
</head>
<body>
  <h2>从第 5 项开始</h2>
  <ol start="5">
    <li>第五项</li>
    <li>第六项</li>
    <li>第七项</li>
  </ol>
</body>
</html>

reversed 属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>reversed 属性</title>
</head>
<body>
  <h2>倒序排列</h2>
  <ol reversed>
    <li>最旧的版本（3.0）</li>
    <li>较新的版本（2.0）</li>
    <li>最新的版本（1.0）</li>
  </ol>
  <!-- 显示为 3. 2. 1. -->
</body>
</html>

type 属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>type 属性</title>
</head>
<body>
  <h2>数字编号（默认）</h2>
  <ol type="1">
    <li>第一项</li>
    <li>第二项</li>
  </ol>

  <h2>大写字母</h2>
  <ol type="A">
    <li>选项 A</li>
    <li>选项 B</li>
  </ol>

  <h2>小写字母</h2>
  <ol type="a">
    <li>选项 a</li>
    <li>选项 b</li>
  </ol>

  <h2>大写罗马数字</h2>
  <ol type="I">
    <li>第一章</li>
    <li>第二章</li>
  </ol>

  <h2>小写罗马数字</h2>
  <ol type="i">
    <li>第一步</li>
    <li>第二步</li>
  </ol>
</body>
</html>

type 属性已不推荐

在 HTML5 中，type 属性已不推荐使用（deprecated），建议通过 CSS list-style-type 来控制编号类型。

ol 的默认样式 ​

属性默认值（Chrome）
displayblock
margin-top16px (1em)
margin-bottom16px (1em)
padding-left40px (2.5em)
list-style-typedecimal

CSS 控制编号类型 ​

css
/* 使用 CSS 替代 type 属性 */
.ol-lower-alpha { list-style-type: lower-alpha; }
.ol-upper-roman { list-style-type: upper-roman; }
.ol-chinese { list-style-type: cjk-ideographic; }

实战示例 ​

食谱步骤 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>食谱步骤</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; line-height: 1.6; }
    ol { padding-left: 2rem; }
    ol li { margin-bottom: 0.75rem; }
  </style>
</head>
<body>
  <h1>番茄炒蛋</h1>
  <ol>
    <li>准备食材：番茄 2 个、鸡蛋 3 个、葱花适量</li>
    <li>番茄切块，鸡蛋打散加少许盐搅匀</li>
    <li>锅中倒油烧热，倒入蛋液炒至凝固后盛出</li>
    <li>锅中再加少许油，放入番茄块翻炒出汁</li>
    <li>将炒好的鸡蛋倒回锅中，加盐和糖调味</li>
    <li>撒上葱花，翻炒均匀后出锅</li>
  </ol>
</body>
</html>

注意事项 ​

  • <ol> 的直接子元素只能是 <li>
  • 如果项目顺序不重要，应使用 <ul> 而非 <ol>
  • start 属性仅影响显示，不影响 DOM 顺序

最佳实践 ​

  1. 有序内容用 ol：步骤、排名、流程等
  2. 使用 CSS 控制样式：通过 list-style-type 控制编号类型
  3. reversed 用于倒序：排行榜等场景

下一节

继续学习：li 列表项

参考链接 ​