感謝觀看 Google I/O 大會！立即觀賞隨選內容。

本頁面由 Cloud Translation API 翻譯而成。

清單
bookmark_border 透過集合功能整理內容你可以依據偏好儲存及分類內容。

清單比你想像中更常見。如果你上過程式設計課，第一個專案可能就是建立購物清單或待辦事項清單。這些是清單。選擇題通常是問題的編號清單，每個問題的多個可能答案則為巢狀清單。

HTML 提供幾種不同的方式來標記清單。清單分為排序清單 (<ol>)、未排序清單 (<ul>) 和說明清單 (<dl>)。清單項目 (<li>) 會巢狀內嵌在排序清單和未排序清單中。在說明清單中，您會看到說明字詞 (<dt>) 和說明詳細資料 <dd>.。我們將在此說明所有這些項目。

在 HTML 表單中，<option> 元素清單會組成 <datalist>、<select> 和 <optgroup> 內的 <select> 內容。這些內容會在「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 屬性提供更多值。

如 codepen 中所述，list-style-type 屬性會覆寫 type 屬性的值，但撰寫文件時，如果數值型別很重要 (例如法律文件)，就必須加入 type。

如果包含布林值 reversed 屬性，系統會反轉數字順序，從最大數字到最小數字。start 屬性會設定起始值。預設值為 1。

與 </ul> 類似，結尾 </ol> 為必要項目。

我們可以巢狀清單，但必須巢狀清單項目內。請注意，只有一或多個 <li> 元素可以做為 <ul> 或 <ol> 的子項。

清單項目

我們已使用 <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.</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 中的隱含語意。這是功能，不是錯誤。一般來說，使用語意元素時，不需要新增角色屬性。一般來說，您也不需要將項目新增至清單，除非使用者真的需要知道這是清單，例如使用者可從清單中的項目數量獲益。

說明清單

說明清單是包含一系列 (零或多個) 說明字詞 (<dt>) 和說明詳細資料 (<dd>) 的說明清單 (<dl>) 元素。這三個元素的原始名稱分別是「定義清單」、「定義字詞」和「定義定義」。生活標準的名稱已變更。

與排序和未排序清單類似，定義清單也可以巢狀結構呈現。與排序和未排序清單不同，定義清單是由鍵/值組合組成。與 <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> 是否有效？

不用

是。

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

<ul>

<il>

<ol>

<dl>

清單 bookmark_borderbookmark 透過集合功能整理內容 你可以依據偏好儲存及分類內容。