列表

现在,让我们关注列表。列表无处不在——从你的购物清单到你每天潜意识里遵循的回家路线,再到你在这些教程中遵循的指令列表!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 文本基础知识的理解和记忆程度。