試一試
<ol>
<li>Mix flour, baking powder, sugar, and salt.</li>
<li>In another bowl, mix eggs, milk, and oil.</li>
<li>Stir both mixtures together.</li>
<li>Fill muffin tray 3/4 full.</li>
<li>Bake for 20 minutes.</li>
</ol>
li {
font:
1rem "Fira Sans",
sans-serif;
margin-bottom: 0.5rem;
}
屬性
此元素也接受全域性屬性。
compact已棄用 非標準-
這個布林屬性暗示列表應以緊湊的樣式呈現。對此屬性的解釋取決於瀏覽器。請改用 CSS：要實現與
compact屬性類似的效果，可以使用 CSS 屬性line-height並將其值設定為80%。 reversed-
這個布林屬性指定列表中的專案是反向排序的。專案將從高到低編號。
start-
一個整數，用於指定列表項從哪個數字開始計數。它始終是阿拉伯數字（1、2、3 等），即使編號
type是字母或羅馬數字。例如，要從字母“d”或羅馬數字“iv”開始編號，請使用start="4"。 type-
設定編號型別
a表示小寫字母A表示大寫字母i表示小寫羅馬數字I表示大寫羅馬數字1表示數字（預設值）
指定的型別將用於整個列表，除非在巢狀的
<li>元素上使用了不同的type屬性。注意：除非列表編號的型別很重要（例如在法律或技術文件中，專案會透過其編號/字母被引用），否則應改用 CSS 的
list-style-type屬性。
用法說明
通常，有序列表項會顯示一個前置的標記，例如數字或字母。
<ol> 和 <ul>（或其同義詞 <menu>）元素可以根據需要任意深度地巢狀，並在 <ol>、<ul>（或 <menu>）之間交替使用。
<ol> 和 <ul> 元素都表示一個專案列表。區別在於 <ol> 元素的順序是有意義的。例如：
- 食譜中的步驟
- 分步導航指示
- 營養資訊標籤上按含量遞減排列的成分列表
要確定使用哪種列表，可以嘗試更改列表項的順序；如果含義改變了，就使用 <ol> 元素——否則你可以使用 <ul>，或者如果你的列表是選單，則使用 <menu>。
示例
基本示例
html
<ol>
<li>Fee</li>
<li>Fi</li>
<li>Fo</li>
<li>Fum</li>
</ol>
結果
使用羅馬數字型別
html
<ol type="i">
<li>Introduction</li>
<li>List of Grievances</li>
<li>Conclusion</li>
</ol>
結果
使用 start 屬性
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>
結果
巢狀列表
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>
結果
有序列表內嵌無序列表
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>
結果
技術摘要
規範
| 規範 |
|---|
| HTML # the-ol-element |
瀏覽器相容性
載入中…
另見
- 其他與列表相關的 HTML 元素：
<ul>、<li>、<menu> - 可能對
<ol>元素樣式設定特別有用的 CSS 屬性：list-style屬性，用於選擇序號的顯示方式。- CSS 計數器，用於處理複雜的巢狀列表。
line-height屬性，用於模擬已棄用的compact屬性。margin屬性，用於控制列表的縮排。