?
Ce document utilise Manuel du site Web PHP chinois Libérer
HTML <ol>
元素代表項目,通常呈現(xiàn)為編號列表的有序列表。
內(nèi)容類別 | Flow content, and if the <ol> element's children include at least one <li> element, palpable content. |
---|---|
允許的內(nèi)容 | 一個或多個 |
標(biāo)簽省略 | 不允許,開始標(biāo)簽和結(jié)束標(biāo)簽都不能省略。 |
允許的父元素 | Any element that accepts flow content. |
允許的 ARIA 角色 | directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation |
DOM 接口 | HTMLOListElement |
這個元素包含全局屬性。
compact
這個布爾屬性暗示列表應(yīng)該以緊湊的風(fēng)格呈現(xiàn)。該屬性的解釋取決于用戶代理,并且不適用于所有瀏覽器。
注: 不要使用這個屬性,這個屬性已經(jīng)過時:<ol>
元素的樣式應(yīng)當(dāng)使用CSS 來控制,想要獲得和這個屬性相似的效果,使用 CSS 屬性 line-height
并設(shè)置值為 80%
。
reversed
HTML5 這個布爾屬性規(guī)定了列表的條目采用倒序,即最不重要的條目放在列表第一個位置。
start
HTML5 這是整數(shù)屬性,規(guī)定了列表得條目序號的開始的值。盡管列表條目的序號可能是羅馬字母順序,如 XXXI, 或者字母,這個開始的順序總是使用數(shù)字表示。比如想要元素序號從字母 “C” 開始,使用 <ol start="3">。
注:這個屬性在 HTML4 中棄用,但是在 HTML5 中被重新引入。
type
指示編號類型:
'a'
表示小寫字母編號,
'A'
表示大寫字母編號,
'i'
表示小寫羅馬數(shù)字編號,
'I'
表示大寫羅馬數(shù)字編號,
'1'
表示數(shù)字編號(默認值)。
這個類型集用于整個列表,除非type
在封閉<li>
元素中使用了不同的屬性。
注意:此屬性在 HTML4 中已被棄用,但在 HTML5 中重新引入。除非清單號碼的價值很重要(例如,在法律或技術(shù)文件中的項目將通過其號碼/字母引用),則list-style-type
應(yīng)該使用 CSS 屬性。
通常,有序列表條目和它前面的編號一起顯示,它的編號可以是任何形式,如數(shù)字、字母或者羅馬數(shù)字,甚至可以是小子彈。而這種樣式(小子彈)并沒有在 HTML 頁面內(nèi)定義,而是在其關(guān)聯(lián)的 CSS 中,使用了 list-style-type
屬性。
HTML 并沒有對 <ol>
和 <ul>
元素的深度和反復(fù)使用次數(shù)(overlap)作出限制。
<ol>
和 <ul>
都是列表項。它們的不同點在于 <ol>
元素里條目的順序是有意義的。 對于該選擇哪一個去使用下面有個建議:嘗試去更改列表項的順序,如果其含義改變了,那么應(yīng)該使用 <ol>
元素,否則使用 <ul>
更合適。
<ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol>
在 HTML 上方輸出:
first item
second item
third item
<ol type="i"> <li>foo</li> <li>bar</li> <li>spam</li> </ol>
上面的 HTML 將輸出
i. foo
ii. bar
iii. spam
start
屬性<ol start="7"> <li>first item</li> <li>second item</li> <li>third item</li> </ol>
在 HTML 上方輸出:
first item
second item
third item
<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 上方輸出:
first item
second item
second item first subitem
second item second subitem
second item third subitem
third item
<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 上方輸出:
first item
second item
second item first subitem
second item second subitem
second item third subitem
third item
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of '<ol>' in that specification. | Living Standard | No change since last W3C snapshot, HTML5. |
HTML5The definition of 'HTMLOListElement' in that specification. | Recommendation | Added reversed and start attributed; un-deprecated type |
HTML 4.01 SpecificationThe definition of '<ol>' in that specification. | Recommendation | Deprecated compact and type. |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
compact | (Yes) | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
reversed | 18 | ? | 18 | No | (Yes) | 5.2 |
start | (Yes) | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
type | (Yes) | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
compact | (Yes) | (Yes) | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
reversed | (Yes) | (Yes) | ? | 18 | No | (Yes) | (Yes) |
start | (Yes) | (Yes) | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
type | (Yes) | (Yes) | (Yes) | 1 | (Yes) | (Yes) | (Yes) |