<ol>: 有序列表元素

基線 廣泛可用

此功能已經成熟，並在許多裝置和瀏覽器版本上執行。它自 2015 年 7 月.

<ol> HTML 元素表示專案的有序列表 - 通常呈現為編號列表。

試試

屬性

此元素還接受 全域性屬性.

reversed

此布林屬性指定列表的專案按相反順序排列。專案將從高到低編號。

start

一個整數，用於為列表專案開始計數。始終為阿拉伯數字（1、2、3 等），即使編號 type 為字母或羅馬數字。例如，要從字母“d”或羅馬數字“iv”開始對元素進行編號，請使用 start="4"。

type

設定編號型別

  • a 表示小寫字母
  • A 表示大寫字母
  • i 表示小寫羅馬數字
  • I 表示大寫羅馬數字
  • 1 表示數字（預設值）

除非在封閉的 type 屬性上使用了不同的 <li> 元素，否則指定的型別將用於整個列表。

注意： 除非列表編號的型別很重要（例如法律或技術文件，其中專案按其編號/字母引用），否則請使用 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>

結果

技術概述

內容類別 流動內容，如果<ol>元素的子元素包含至少一個<li>元素，則為可感知內容。
允許的內容 零個或多個<li>、<script>和<template>元素。
標籤省略 無，開始和結束標籤都是必需的。
允許的父元素 任何接受流動內容的元素。
隱式 ARIA 角色 list
允許的 ARIA 角色 directory、group、listbox、menu、menubar、none、presentation、radiogroup、tablist、toolbar、tree
DOM 介面 HTMLOListElement

規範

規範
HTML 標準
# the-ol-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參見

  • 其他與列表相關的 HTML 元素：<ul>、<li>、<menu>
  • 可能對樣式化<ol>元素特別有用的 CSS 屬性
    • list-style屬性，用於選擇序數的顯示方式
    • CSS 計數器，用於處理複雜的巢狀列表
    • line-height屬性，用於模擬已棄用的compact屬性
    • margin屬性，用於控制列表縮排