<ol>

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

 

 

属性

这个元素包含 全局属性.

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

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

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

嵌套 <ol> 和 <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

规范

规范 状态 备注
HTML Living Standard
<ol>
Living Standard  
HTML5
HTMLOListElement
Recommendation  
HTML 4.01 Specification
<ol>
Recommendation  

浏览器兼容性

 

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
olChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
compact
DeprecatedNon-standard
Chrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
reversedChrome Full support 18Edge ? Firefox Full support 18IE No support NoOpera Full support YesSafari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 18Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
startChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
type
DeprecatedNon-standard
Chrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

 

相关

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