HTML
<ol>
element
represents an ordered list of items — typically rendered as a numbered list.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| 内容类别 |
流内容
, and if the
<ol>
element's children include at least one
<li>
element,
palpable content
.
|
|---|---|
| 准许内容 |
Zero or more
<li>
,
<script>
and
<template>
元素。
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts flow content . |
| Implicit ARIA role |
list
|
| Permitted ARIA roles |
directory
,
group
,
listbox
,
menu
,
menubar
,
none
,
presentation
,
radiogroup
,
tablist
,
toolbar
,
tree
|
| DOM 接口 |
HTMLOListElement
|
This element also accepts the 全局属性 .
reversed
This Boolean attribute specifies that the list’s items are in reverse order. Items will be numbered from high to low.
start
type
is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use
start="4"
.
type
a
for lowercase letters
A
for uppercase letters
i
for lowercase Roman numerals
I
for uppercase Roman numerals
1
for numbers (default)
The specified type is used for the entire list unless a different
type
attribute is used on an enclosed
<li>
元素。
注意：
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
特性代替。
Typically, ordered list items display with a preceding marker , such as a number or letter.
<ol>
and
<ul>
elements may nest as deeply as desired, alternating between
<ol>
and
<ul>
however you like.
<ol>
and
<ul>
elements both represent a list of items. The difference is with the
<ol>
element, the order is meaningful. For example:
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>
.
<ol> <li>Fee</li> <li>Fi</li> <li>Fo</li> <li>Fum</li> </ol>
The above HTML will output:
<ol type="i"> <li>Introduction</li> <li>List of Greivances</li> <li>Conclusion</li> </ol>
The above HTML will output:
<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>
The above HTML will output:
<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>
The above HTML will output:
<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>
The above HTML will output:
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<ol>' in that specification. |
实时标准 | No change since last W3C snapshot, HTML5 . |
|
HTML5
The definition of 'HTMLOListElement' in that specification. |
推荐 |
添加
reversed
and
start
attributed; un-deprecated
type
|
|
HTML 4.01 Specification
The definition of '<ol>' in that specification. |
推荐 |
弃用
compact
and
type
.
|
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ol
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
compact
弃用
非标
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
reversed
|
Chrome 完整支持 18 | Edge 完整支持 ≤79 | Firefox 完整支持 18 | IE 不支持 No | Opera 完整支持 Yes | Safari 完整支持 6 | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 18 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
start
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
type
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
不支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
<ul>
,
<li>
,
<menu>
<ol>
元素：
list-style
property, to choose the way the ordinal displays
line-height
property, to simulate the deprecated
compact
属性
margin
property, to control the list indentation