列表

現在,讓我們關注列表。列表無處不在——從你的購物清單到你每天潛意識裡遵循的回家路線,再到你在這些教程中遵循的指令列表!HTML 提供了一套方便的元素,可以讓我們定義不同型別的列表,這可能不會讓你感到驚訝。在 Web 上,我們有三種類型的列表:無序列表、有序列表和描述列表。本課程將向你展示如何使用這些不同的型別。

預備知識 熟悉 HTML 基礎,如HTML 基礎語法中所述。
學習成果
  • 三種列表型別——無序列表、有序列表和描述列表的 HTML 結構。
  • 每種列表型別的正確用法。
  • 列表更廣泛的用途,例如導航選單。

無序列表

無序列表用於標記專案列表,其中專案的順序無關緊要。讓我們以購物清單為例。

milk
eggs
bread
hummus

在此示例中,專案的順序可以任意。要在 HTML 中建立此列表,我們首先將整個列表包裝在 `<ul>`(無序列表)元素中。然後,我們將每個專案包裝在 `<li>`(列表項)元素中。

html
<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

標記無序列表

為了讓你練習,我們希望你嘗試自己標記前面的列表。

  1. 點選下方渲染的程式碼輸出中的“Play”按鈕,在 MDN Playground 中編輯示例。
  2. 將單獨的文字項轉換為無序列表。

如果你犯了錯誤,可以使用 MDN Playground 中的“重置”按鈕清除你的工作。如果你遇到困難,請回顧前面的程式碼片段。

有序列表

有序列表是其中專案順序確實很重要的列表。讓我們以一組方向為例。

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

標記結構與無序列表相同,只是你必須將列表項包裝在 `<ol>` 元素中,而不是 `<ul>`。

html
<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

標記有序列表

又到練習時間了!與上一個任務一樣,我們希望你嘗試自己標記前面的有序列表。

  1. 點選下方渲染的程式碼輸出中的“Play”按鈕,在 MDN Playground 中編輯示例。
  2. 將單獨的文字項轉換為有序列表。

如果你犯了錯誤,可以使用 MDN Playground 中的“重置”按鈕清除你的工作。如果你遇到困難,請回顧前面的程式碼片段。

標記我們的食譜頁面

現在是真正的挑戰!在文章的這一點上,你已經掌握了標記稍複雜內容所需的所有資訊。我們希望你標記出我們最喜歡的鷹嘴豆泥食譜的說明。

你可以選擇:

  • 儲存我們 `text-start.html` 起始檔案的本地副本,並在你的程式碼編輯器中完成工作。
  • 點選下方渲染的程式碼輸出中的“Play”按鈕,在 MDN Playground 中編輯示例。

你需要遵循的說明是:

  1. 使用 `<h1>` 元素標記主頁面標題,並使用 `<h2>` 元素標記三個副標題。
  2. 有五行文字適合用 `<p>` 元素標記。現在就做。
  3. 將配料列表標記為無序列表。
  4. 將說明列表標記為有序列表。

如果你犯了錯誤,可以使用 MDN Playground 中的“重置”按鈕清除你的工作。如果你實在卡住了,可以檢視程式碼輸出下方的解決方案。

html
Quick hummus recipe

This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.

Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.

Ingredients

1 can (400g) of chick peas (garbanzo beans)
175g of tahini
6 sundried tomatoes
Half a red pepper
A pinch of cayenne pepper
1 clove of garlic
A dash of olive oil

Instructions

Remove the skin from the garlic, and chop coarsely
Remove all the seeds and stalk from the pepper, and chop coarsely
Add all the ingredients into a food processor
Process all the ingredients into a paste
If you want a coarse "chunky" hummus, process it for a short time
If you want a smooth hummus, process it for a longer time

For a different flavor, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.

Storage

Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.

Hummus is suitable for freezing; you should thaw it and use it within a couple of months.
點選此處顯示解決方案

你可以在我們 GitHub 倉庫的 `text-complete.html` 中找到此示例的正確 HTML 示例。

巢狀列表

將一個列表巢狀在另一個列表內是完全可以的。你可能希望在頂層專案符號下方有一些子專案符號。讓我們看食譜示例中的第二個列表。

html
<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, process it for a longer time.</li>
</ol>

由於最後兩個專案符號與它們之前的專案符號非常接近(它們看起來像是適合該專案符號的子說明或選擇),因此將它們巢狀在它們自己的無序列表中,並將該列表放在當前的第四個專案符號內可能是有意義的。這將如下所示:

html
<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>
    Process all the ingredients into a paste.
    <ul>
      <li>
        If you want a coarse "chunky" hummus, process it for a short time.
      </li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>

嘗試回到上一個任務,像這樣更新第二個列表。

描述列表

描述列表的目的是標記一組專案及其關聯的描述,例如術語和定義,或問題和答案。讓我們看一個術語和定義集的示例。

soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information

描述列表使用不同於其他列表型別的包裝器——`<dl>`;此外,每個術語都包裝在一個 `<dt>`(描述術語)元素中,每個描述都包裝在一個 `<dd>`(描述定義)元素中。

描述列表示例

讓我們完成示例的標記。

html
<dl>
  <dt>soliloquy</dt>
  <dd>
    In drama, where a character speaks to themselves, representing their inner
    thoughts or feelings and in the process relaying them to the audience (but
    not to other characters.)
  </dd>
  <dt>monologue</dt>
  <dd>
    In drama, where a character speaks their thoughts out loud to share them
    with the audience and any other characters present.
  </dd>
  <dt>aside</dt>
  <dd>
    In drama, where a character shares a comment only with the audience for
    humorous or dramatic effect. This is usually a feeling, thought, or piece of
    additional background information.
  </dd>
</dl>

瀏覽器預設樣式會顯示描述列表,其中描述相對於術語有一定程度的縮排。

一個術語的多個描述

請注意,允許一個術語有多個描述,例如:

html
<dl>
  <dt>aside</dt>
  <dd>
    In drama, where a character shares a comment only with the audience for
    humorous or dramatic effect. This is usually a feeling, thought, or piece of
    additional background information.
  </dd>
  <dd>
    In writing, a section of content that is related to the current topic, but
    doesn't fit directly into the main flow of content so is presented nearby
    (often in a box off to the side.)
  </dd>
</dl>

標記一組定義

是時候嘗試標記描述列表了。

  1. 單擊下面程式碼塊中的**“播放”**以在 MDN Playground 中編輯示例。
  2. 使用合適的元素標記內容中的三個術語和四個描述。請記住,第三個術語有兩個描述。

如果您犯了錯誤,可以使用 MDN Playground 中的重置按鈕清除您的工作。如果您真的卡住了,可以在程式碼塊下方檢視解決方案。

html
Love
The glue that binds the world together.
Eggs
The glue that binds the cake together.
Coffee
The drink that gets the world running in the morning.
A light brown color.
點選此處顯示解決方案

您完成的 HTML 應該看起來像這樣

html
<dl>
  <dt>Love</dt>
  <dd>The glue that binds the world together.</dd>
  <dt>Eggs</dt>
  <dd>The glue that binds the cake together.</dd>
  <dt>Coffee</dt>
  <dd>The drink that gets the world running in the morning.</dd>
  <dd>A light brown color.</dd>
</dl>

總結

關於列表的內容就到這裡。接下來,我們將為你提供一些測試,以檢驗你對 HTML 文字基礎知識的理解和記憶程度。