清單

清單比你想像的還常見。如果您曾進行程式設計類別，則第一個專案可能是建立購物清單或待辦事項清單。就是清單選擇題測試通常為問題編號清單：每個問題的多個可能答案都是巢狀清單。

HTML 提供了我們標記清單的幾種方式。目前有已排序的清單 (<ol>)、未排序的清單 (<ul>) 和說明清單 (<dl>)。清單項目 (<li>) 會嵌入已排序的清單和未排序的清單內。說明清單內有說明字詞 (<dt>) 和說明詳細資料 <dd>. 我們會在此處探討這些詞彙。

在 HTML 表單中，<option> 元素清單構成 <select> 內的 <datalist>、<select> 和 <optgroup> 內容。我們會在 HTML 表單中討論這些內容。

在選單和未排序的清單中，清單項目通常會以條列式顯示。在已排序的清單之前，它們的前面通常會是遞增計數器，例如數字或字母。可使用 HTML 或 CSS 控製或反轉項目符號和編號順序，也可同時使用兩者。

根據預設，排序和未排序的清單項目都會以數字或項目符號開頭。然而，即使您不希望清單看起來像清單，您仍需要項目清單，例如導覽列中、包含核取方塊而非項目符號的待辦事項清單，或選擇題測試中的是非題。這些沒有項目符號的清單適合使用 HTML 清單元素。

未排序的清單

<ul> 元素是項目清單未排序的父項元素。<ul> 唯一的子項是一或多個 <li> 清單項目元素。在這裡建立機器清單吧。我們會使用未排序的清單，因為順序並不重要 (我們不會告訴他們)：

根據預設，每個未排序的清單項目都會加上項目符號。未排序的清單沒有元素專屬屬性。你需要使用 </ul> 來關閉清單。

已排序的清單

<ol> 元素是項目已排序清單的父項元素。<ol> 唯一的子項是一或多個 <li> 元素，或清單項目。但本例中的「項目符號」是多種類型的數字。您可以在 CSS 中使用 list-style-type 屬性或 type 屬性定義類型。

<ol> 包含三個元素專屬屬性：type、reversed 和 start。

列舉的 type 屬性會設定編號類型。type 有五個有效值，預設值是數字的 1，但您也可以針對小寫和大寫英文字母或羅馬數字使用 a、A、i 或 I。list-style-type 屬性提供更多值。

雖然如轉碼器所示，但 list-style-type 屬性會覆寫 type 屬性的值，但如果文件對數字類型很重要 (例如與法律文件的處理方式相同)，則需加入 type。

如果納入布林值 reversed 屬性，該屬性值的順序將從數字最大到最低的順序排列。 start 屬性會設定起始值。預設值為 1。

與 </ul> 類似，需要關閉 </ol>。

我們可以建立巢狀清單，但必須在清單項目中以巢狀結構顯示。請注意，可以設為 <ul> 或 <ol> 的子項的唯一元素是一或多個 <li> 元素。

清單項目

我們使用過 <li> 元素，但尚未正式導入。<li> 元素可以是未排序清單 (<ul>)、已排序清單 (<ol>) 或選單 (<menu>) 的直接子項。<li> 必須處於巢狀結構中，成為其中一個元素的子項，且在別處無效。

根據規格，系統不會關閉清單項目，因為如果瀏覽器遇到下一個 <li> 開啟標記或必要的清單結束標記，就會隱含關閉清單項目：</ul>、</ol>、</menu>。雖然這項規格並不需要，而部分公司內部最佳做法也建議您不要關閉清單項目來節省部分位元組，但請關閉 <li> 標記。如此可更容易閱讀程式碼 且日後也能由我們致上謝意比起記住必須關閉的代碼，以及是否有選用的結束代碼，關閉所有元素會比要來得容易。

只有一個元素專屬的 <li> 屬性：value，整數。只有當 <li> 以巢狀結構列於已排序的清單內，且對未排序的清單或選單沒有意義時，value 才能對 <li> 有用。如果發生衝突，這個屬性會覆寫 <ol> 的起始值。

value 是已排序清單內的清單項目編號。針對後續的清單項目，請接續設定值集的編號，除非該項目也設有 value 屬性。這個值不一定要依照順序排列，不過如果值不按照順序排列，應該有充分的原因。

當您將 <ol> 上的 reversed 與清單項目上的 value 屬性結合使用時，瀏覽器會將 <li> 設為提供的值，然後計算前面的 <li>，並減少後續的 <li> 屬性。如果第二個清單項目含有值屬性，系統會在第二個清單項目中重設計數器，後續的值會減少 1。

您也可以運用 CSS 計數器，為 ::marker 虛擬元素提供產生的內容。如果數量純粹為呈現性質，請使用 CSS。如果編號在語意上相當重要或有其他含意，請使用這些屬性。

目前為止，我們已經查看僅包含文字節點的清單項目。清單項目可包含所有流程內容，也就是在主體中找到可當做 <body> 直接子項的巢狀結構的任何元素，包括標題和該區段的內容。

我們有一些 MLW 中有幾份未排序的清單。老師部分的老師會以清單形式列出，評論部分則會列出學生的電腦。<ul> 老師有兩個 <li>，每位老師分別有一個。每個 <li> 中都有一張圖片和一個段落：

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

評論部分有三則評論，因此有三則 <li>。每個欄位都包含圖片、段落引述，以及包含兩行分行的三行段落。

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

對清單內的清單進行巢狀結構也很常見。雖然「MLW」沒有任何巢狀清單，但這個網站會。本系列第一章是「HTML 總覽」，主要元素區段包含兩個子區段。在目錄 (未排序的清單) 中，有一個巢狀未排序的清單，並附上這兩個區段的連結：

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

由於 <ul> 唯一的子項是 <li>，所以會在 <li> 中找到巢狀清單，絕不會直接在 <ol> 或 <ul> 中。

在最後一個範例中，您可能已註意到 <ul> 中包含 role="list"。雖然 <ul> 和 <ol> 的隱含角色為 list，但透過 CSS 移除清單外觀 (包括設定 display: grid 或 list-style-type: none)，但會導致 VoiceOver (iOS 和 MacOS 螢幕閱讀器) 移除 Safari 中的隱含語意。這不是錯誤。一般來說，使用語意元素時不應新增角色屬性，但並非必要。而除非使用者確實需要知道清單為清單，否則通常不需要將一份清單加入清單，例如知道清單中有多少項目，對使用者來說會有幫助。

說明清單

說明清單是一個說明清單 (<dl>) 元素，包含一系列 (零個以上) 說明字詞 (<dt>) 和說明詳細資料 (<dd>)。這三個元素的原始名稱分別為「定義清單」、「定義字詞」和「定義定義」。維持現狀的名稱已變更。

與排序和未排序清單類似，這兩者也可以是巢狀結構。與排序和未排序的清單不同，它們是由鍵/值組合組成。與 <ul> 和 <ol> 類似，<dl> 是父項容器。<dt> 和 <dd> 元素是 <dl> 的子項。

我們可以建立一份機器清單，列出其職涯發展歷程和理想。由 <dl> 表示的學生說明清單包含一組詞彙。在本例中，「條款」是指使用 <dt> 元素指定的學生姓名，以及每個字詞的說明 (在本例中是由 <dd> 元素指定每個學生的職涯目標)。

這個說明清單實際上並不屬於 MLW 頁面。說明清單不僅適用於字詞和定義，也因此元素名稱變得較籠統。

建立字詞和定義/說明，或類似的鍵/值組合清單時，說明清單元素會提供適當的語意。<dt> 的隱含角色為 term，而 listitem 是另一個允許的角色。<dd> 的隱含角色是 definition，且不允許其他角色。與 <ul> 和 <ol> 不同，<dl> 沒有隱式 ARIA 角色。這是合理的，因為 <dl> 不一定是清單。但完成後就會接受 list 和 group 角色。

大多數情況下，您會在說明清單中看到數量相等的 <dt> 和 <dd> 元素。不過，說明清單不一定，也不必與字詞/說明的組合進行比對；您可以擁有多個或一對多，例如包含多個定義的字典字詞。

每個 <dt> 都有至少一個相關聯的 <dd>，且每個 <dd> 都有至少一個相關聯的 <dt>。雖然可以使用相鄰的同層組合器或 :has() 關聯選取器透過 CSS 指定這些元素的變數號碼，但如有需要，您可以加入 <div> 做為 <dl> 的子項，並允許一或多個 <dt> 或 <dd> 元素的父項 (或兩者皆有)。<dl> 實際上可以有其他一些子項：允許建立 <div>、<template> 或 <script> 的巢狀結構。說明清單元素沒有任何特定元素屬性。

瞭解連結和清單後，接下來讓我們結合兩者來建立導覽。

隨堂測驗

測驗您對清單的相關知識。

在清單項目中加入 <h2> 是否有效？

不會。
請再試一次。
是，
答對了！

選取用來定義清單類型的三個元素。

<il>
請再試一次。
<ol>
答對了！
<ul>
答對了！
<dl>
答對了！