<ol>: The Ordered List element

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

¥The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

Try it

属性

¥Attributes

该元素还接受 全局属性。

¥This element also accepts the global attributes.

reversed

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

start

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

type

设置编号类型：

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

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

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

¥Note: Unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the CSS list-style-type property instead.

使用说明

¥Usage notes

通常，有序列表项显示时带有前面的 marker，例如数字或字母。

¥Typically, ordered list items display with a preceding marker, such as a number or letter.

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

¥The <ol> and <ul> (or the synonym <menu>) elements may nest as deeply as desired, alternating between <ol>, <ul> (or <menu>) as needed.

<ol> 和 <ul> 元素均表示项目列表。与 <ol> 元素不同的是，顺序是有意义的。例如：

¥The <ol> and <ul> elements both represent a list of items. The difference is with the <ol> element, the order is meaningful. For example:

  • 秘诀中的步骤
  • 路线导航
  • 营养成分表上所占比例递减的成分表

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

¥To determine which list to use, try changing the order of the list items; if the meaning changes, use the <ol> element — otherwise you can use <ul> otherwise, or <menu> if your list is a menu.

示例

¥Examples

简单的例子

¥Simple example

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

结果

¥Result

使用罗马数字类型

¥Using Roman Numeral type

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

结果

¥Result

使用开始属性

¥Using the start attribute

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>

结果

¥Result

嵌套列表

¥Nesting lists

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>

结果

¥Result

有序列表内的无序列表

¥Unordered list inside ordered list

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>

结果

¥Result

技术总结

¥Technical summary

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

规范

Specification
HTML Standard
# the-ol-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also

  • 其他与列表相关的 HTML 元素：<ul>, <li>, <menu>
  • 对于 <ol> 元素的样式可能特别有用的 CSS 属性：