MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

翻译正在进行中。

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

Attributes

这个元素包含 全局属性.

compact
这个是布尔属性,规定了列表要用紧凑的方式渲染。这个属性的具体渲染方式由客户端决定,并不能被所有浏览器支持决定。
Note: 不要使用这个属性,这个属性已经过时:<ol> 元素的样式应当使用 CSS 来控制,想要获得和这个属性相似的效果,使用 CSS 属性 line-height 并设置值为 80%.
reversed HTML5
这个布尔属性规定了列表的条目采用倒序,即最不重要的条目放在列表第一个位置。
startHTML5
这是整数属性,规定了列表得条目序号的开始的值。尽管列表条目的序号可能是罗马字母顺序,如 XXXI, 或者字母,这个开始的顺序总是使用数字表示。比如想要元素序号从字母 “C” 开始,使用 <ol start="3">。
Note: 这个属性在 HTML4中弃用,但是在 HTML5 中被重新引入。
type
Indicates the numbering type:
  • 'a' 表示小写字母编号;
  • 'A' 表示大写字母编号;
  • 'i' 表示小写罗马数字编号;
  • 'I' 表示大写罗马数字编号;
  • and '1' 表示数字编号(默认值)。

The type set is used for the entire list unless a different type attribute is used within an enclosed <li> element.

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

使用说明

  • 通常,有序列表条目和它前面的编号一起显示,它的编号可以是任何形式,如数字、字母或者罗马数字,甚至可以是小子弹。而这种样式(小子弹)并没有在 HTML 页面内定义,而是在其关联的 CSS 中,使用了 list-style-type 属性。
  • HTML 并没有对 <ol><ul> 元素的深度和反复使用次数(overlap)作出限制。
  • <ol><ul> 都是列表项。它们的不同点在于 <ol> 元素里条目的顺序是有意义的。 对于该选择哪一个去使用下面有个建议:尝试去更改列表项的顺序,如果其含义改变了,那么应该使用 <ol> 元素,否则使用 <ul> 更合适。

示例

简单示例

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

以上 HTML 输出如下:

  1. first item
  2. second item
  3. third item

使用 start 属性

<ol start="7">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

以上 HTML 输出如下:

  1. first item
  2. second item
  3. third item

嵌套列表

<ol>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>

以上 HTML 输出如下:

  1. first item
  2. second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  3. third item

Nested <ol> and <ul>

<ol>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>

以上 HTML 输出如下:

  1. first item
  2. second item
    • second item first subitem
    • second item second subitem
    • second item third subitem
  3. third item

规范

Specification Status Comment
WHATWG HTML Living Standard
<ol>
Living Standard  
HTML5
HTMLOListElement
Recommendation  
HTML 4.01 Specification
<ol>
Recommendation  

浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基础支持 1.0 1.0 (1.7 or earlier) 1.0 1.0 1.0
reversed 属性 18 18.0 (18.0) 未实现 未实现 5.2
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
reversed attribute (Yes) 18.0 (18.0) 未实现 未实现 (Yes)

相关

  • 其他列表相关的 HTML 元素: <ul>, <li>, <menu> and the obsolete <dir>;
  • <ol> 元素常用的 CSS 属性:
    • the list-style property, useful to choose the way the ordinal is displayed,
    • CSS counters, useful to handle complex nested lists,
    • line-height 属性,可以模拟过时的 compact 属性;
    • margin 属性,用来控制列表的缩进。

文档标签和贡献者

 此页面的贡献者: benpigchu, tcatche, Ende93, dongnanzhan, FredWe
 最后编辑者: benpigchu,