<ol>: 有序列表元素

基线 广泛可用

此功能已经成熟，并在许多设备和浏览器版本上运行。它自 2015 年 7 月.

<ol> HTML 元素表示项目的有序列表 - 通常呈现为编号列表。

试试

属性

此元素还接受 全局属性.

reversed

此布尔属性指定列表的项目按相反顺序排列。项目将从高到低编号。

start

一个整数，用于为列表项目开始计数。始终为阿拉伯数字（1、2、3 等），即使编号 type 为字母或罗马数字。例如，要从字母“d”或罗马数字“iv”开始对元素进行编号，请使用 start="4"。

type

设置编号类型

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

除非在封闭的 type 属性上使用了不同的 <li> 元素，否则指定的类型将用于整个列表。

注意： 除非列表编号的类型很重要（例如法律或技术文档，其中项目按其编号/字母引用），否则请使用 CSS list-style-type 属性。

使用说明

通常，有序列表项目会以一个前导标记显示，例如数字或字母。

<ol>和<ul>（或同义词<menu>）元素可以根据需要嵌套任意深度，在<ol>、<ul>（或<menu>）之间交替。

<ol>和<ul>元素都表示项目列表。区别在于，<ol>元素中的顺序是有意义的。例如

  • 食谱中的步骤
  • 按步骤指示
  • 营养信息标签上按比例递减的配料清单

要确定使用哪个列表，请尝试更改列表项的顺序；如果含义发生改变，则使用<ol>元素——否则可以使用<ul>，或者如果您的列表是菜单，可以使用<menu>。

示例

简单示例

html
<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

结果

使用罗马数字类型

html
<ol type="i">
  <li>Introduction</li>
  <li>List of Grievances</li>
  <li>Conclusion</li>
</ol>

结果

使用start属性

html
<p>Finishing places of contestants not in the winners' circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin' Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

结果

嵌套列表

html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

结果

有序列表内嵌无序列表

html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

结果

技术概述

内容类别 流动内容，如果<ol>元素的子元素包含至少一个<li>元素，则为可感知内容。
允许的内容 零个或多个<li>、<script>和<template>元素。
标签省略 无，开始和结束标签都是必需的。
允许的父元素 任何接受流动内容的元素。
隐式 ARIA 角色 list
允许的 ARIA 角色 directory、group、listbox、menu、menubar、none、presentation、radiogroup、tablist、toolbar、tree
DOM 接口 HTMLOListElement

规范

规范
HTML 标准
# the-ol-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

  • 其他与列表相关的 HTML 元素：<ul>、<li>、<menu>
  • 可能对样式化<ol>元素特别有用的 CSS 属性
    • list-style属性，用于选择序数的显示方式
    • CSS 计数器，用于处理复杂的嵌套列表
    • line-height属性，用于模拟已弃用的compact属性
    • margin属性，用于控制列表缩进