清單

清單比想像中更常見。如果您曾經參加過程式設計課程，第一個專案可能是建立 購物清單或待辦事項清單則代表適用清單。選擇題測驗通常有編號清單：可能的答案 每個問題都有巢狀清單

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，整數。value 只有在 <li> 內嵌於 <li> 的巢狀結構中 已排序的清單，對未排序的清單或選單沒有意義。如果發生衝突，則會覆寫 <ol> 的開始時間值。

value 是已排序清單中的清單項目編號。接續後續清單項目，從 的屬性值，除非該項目同時設定了 value 屬性。這個值不一定要順序；如果沒有順序 應該有充分理由

當您將 <ol> 上的 reversed 與清單項目的 value 屬性結合時，瀏覽器會將該 <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> 中。

在最後一個範例中，您可能已經注意到 role="list" 包含在 <ul> 中。雖然兩者的隱含角色 <ul> 和 <ol> 為 list，用於移除 CSS 清單外觀，包括設定display: grid 或 list-style-type: none 可以引導 VoiceOver (iOS 和 MacOS 螢幕閱讀器)，移除 Safari 中的隱含語意。這項功能並非錯誤。 一般來說，使用語意元素時，不應新增 role 屬性，因為這並非必要。您通常不需要用到 ，除非使用者確實需要知道清單內的清單項目 (例如，當使用者知道清單內的項目數量時會對他們有所幫助時)，否則該清單會加入新清單。

說明清單

說明清單是一個說明清單 (<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>
答對了！