<ol>

HTML <ol> 元素表示有序列表，通常渲染为一个带编号的列表。

尝试一下

内容类别 Flow content, and if the <ol> element's children include at least one <li> element, palpable content.
允许的内容 Zero or more <li>, <script> and <template> elements.
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父级 Any element that accepts flow content.
隐含的 ARIA 角色 list
允许的 ARIA 角色 directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM 接口 HTMLOListElement

属性

此元素支持全局属性。

reversed

此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注。

start

一个整数值属性，指定了列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型 type 属性可能指定为了罗马数字编号等其他类型的编号。比如说，想要让元素的编号从英文字母 "d" 或者罗马数字 "iv" 开始，都应当使用 start="4"。

备注： 这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。

type

设置编号的类型：

  • a 表示小写英文字母编号
  • A 表示大写英文字母编号
  • i 表示小写罗马数字编号
  • I 表示大写罗马数字编号
  • 1 表示数字编号（默认）编号类型适用于整个列表，除非在 <ol> 元素的 <li> 元素中使用不同的 type 属性。

备注： 这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS list-style-type 属性替代。

使用说明

通常，有序列表的条目会和它前面的编号标记一起显示，编号标记可以是数字或者字母。

<ol> 和 <ul> 元素两者可以无限嵌套，既可以同类嵌套，也可以互相嵌套。

<ol> 和 <ul> 元素都表示列表。区别在于，<ol> 元素的有序列表的顺序是有意义的。举一些例子：

  • 烹饪食谱中的各个步骤
  • 指路时的各处转弯方向
  • 营养信息标签上 按含量排序的成分列表

至于如何确定该选择哪一个列表元素，可以尝试更改列表项的顺序，如果其含义会发生改变，那么就应当使用 <ol> 元素，否则使用 <ul> 更合适。

备注： “更改顺序”时，不应当算上一些固定位于列表最前或最后的项，比如未完成的列表最后的占位项。 如果只有一个元素，以至于根本不存在什么顺序可言，可能最好先考虑是否应当使用列表元素，以及是否要在列表最后增加一些占位的空项。

示例

简单示例

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

以上 HTML 输出如下：

使用小写罗马数字编号

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

以上 HTML 输出如下：

使用 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 输出如下：

嵌套列表

html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag 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 输出如下：

嵌套有序列表和无序列表

html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag 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>

以上 HTML 输出如下：

规范

Specification
HTML Standard
# the-ol-element

浏览器兼容性

BCD tables only load in the browser

相关

  • 其他列表相关的 HTML 元素：<ul>, <li>, <menu> and the obsolete <dir>;
  • 对 <ol> 元素常用的 CSS 属性：