超文字標記語言/列表

在 HTML 中，有三種類型的列表，每種型別都適合不同型別的資訊。使用 <ul> 和 </ul> 標籤建立的 *無序列表* 用於沒有順序或順序不重要的元素（通常用專案符號顯示）。使用 <ol> 和 </ol> 標籤建立的 *有序列表* 通常用數字顯示，用於順序重要的元素，例如執行的一系列步驟。最後，還有使用 <dl> 和 </dl> 標籤建立的定義列表。

有序列表

有序列表提供一個專案列表，每個專案前面都有一個從 1 開始的遞增數字。

HTML 示例

  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>

示例渲染

第一項
第二項
第三項

無序列表

無序列表顯示一個專案列表，每個專案前面都有一個專案符號。

HTML 示例

  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>

示例渲染

第一項
第二項
第三項

定義列表

定義列表顯示一個粗體術語列表，然後在新行上顯示定義，並在前面加上一個製表符（預設情況下）。

HTML 示例

  <dl>
    <dt>Term 1</dt>
    <dd>Definition of Term 1</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

示例渲染

術語 1: 術語 1 的定義
術語 2: 術語 2 的定義

如果兩個術語具有相同的定義，則可以像這樣將其分組

  <dl>
    <dt>Cascading Style Sheets</dt>
    <dt>CSS</dt>
    <dd>Definition of Cascading Style Sheets (aka CSS)</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

示例渲染

層疊樣式表
CSS: 層疊樣式表（也稱為 CSS）的定義
術語 2: 術語 2 的定義

如果術語有兩個替代定義，請為每個定義使用單獨的 dd 元素，例如

  <dl>
    <dt>Mouse</dt>
    <dd>Small mammal</dd>
    <dd>Input device for a computer</dd>
  </dl>

示例渲染

滑鼠: 小型哺乳動物; 計算機的輸入裝置

較長的定義可以透過在 dd 元素中巢狀 p 元素來分成段落。

  <dl>
    <dt>Term 2</dt>
    <dd>
      <p>First paragraph of the definition.</p>
      <p>Second paragraph of the definition.</p>
    </dd>
  </dl>

示例渲染

術語 2

定義的第一段。

定義的第二段。

巢狀列表

列表可以巢狀。一個例子

<ul>
  <li>Lists     
    <ul>
      <li>Numbered Lists</li>
      <li>Unnumbered Lists</li>
    </ul>
  </li>
</ul>

示例渲染

列表
- 編號列表
- 未編號列表

巢狀時，巢狀的列表元素應在父 *列表項* 元素內。

*不正確巢狀* 的一個示例

<ul>
  <li>Lists</li>
  <ul>
    <li>Numbered Lists</li>
    <li>Unnumbered Lists</li>
  </ul>
</ul>

*不正確巢狀* 的另一個示例，其中有兩個連續的 UL 元素

<ul>
   <li>
      Outer list item
      <ul>
        <ul>
          <li>
            Inner list item within two consecutive UL elements
          </li>
        </ul>
      </ul>
   </li>
</ul>

關於格式的說明

上面對三種列表型別中每種型別的描述都指的是 Web 瀏覽器對相應 HTML 程式碼的預設渲染。但是，透過使用 CSS，您可以更改列表的格式。例如，使用 CSS，您可以使列表水平排列而不是垂直排列。

示例

使用列表標記煎餅食譜的示例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pancakes</title>
  </head>
  <body>
    <h1>A Recipe for Pancakes</h1>
    <p>From <a href="https://wikibook.tw/wiki/Cookbook:Pancake">Wikibooks Cookbook</a>.</p>
    <p>These pancakes make a good breakfast for a family.
       They go well with real maple syrup.
       They are healthy too (as long as you don't over-do the syrup!)
       since whole wheat flour contributes to your fiber intake.
    </p>
    <h2>Ingredients</h2>
    <ul>
      <li>1 cup whole wheat flour</li>
      <li>1 tablespoon common granulated sugar</li>
      <li>2 teaspoons baking powder</li>
      <li>1/4 teaspoon salt</li>
      <li>1 egg</li>
      <li>1 cup milk</li>
      <li>2 tablespoons oil</li>
      <li>additional oil for frying</li>
    </ul>
    <h2>Procedure</h2>
    <ol>
      <li>Oil a frying pan.</li>
      <li>Mix the dry ingredients in one bowl.</li>
      <li>In another bowl, scramble the egg, then add the other wet ingredients.
          This includes the 2 tablespoons of oil.</li>
      <li>Mix the dry and wet ingredients together,
          well enough to eliminate dry spots but no more.</li>
      <li>Heat the frying pan to medium temperature.
          The pan is hot enough when a drop of water dances around
          rather than simply boiling away.</li>
      <li>Pour a pancake, about 4 inches in diameter using about a 1/4 cup of batter.</li>
      <li>The pancake will bubble. When the bubbling settles down and
          the edges are slightly dry, flip the pancake.</li>
      <li>When the pancake looks done, remove it and start another one.</li>
    </ol>
    <h2>Toppings</h2>
    <p>Traditionally, pancakes are topped with butter and maple syrup.
       Other toppings can include strawberries, applesauce, cinnamon, or sugar.
    </p>
 </body>
</html>