列表

列表比您想象的更常见。如果您上过编程课，那么第一个项目可能就是创建购物清单或待办事项清单。这些是列表。选择题测试通常是编号的问题列表：每个问题的多个可能答案都是嵌套列表。

HTML 为我们提供了几种不同的方式来标记列表。列表分为有序列表 (<ol>)、无序列表 (<ul>) 和说明列表 (<dl>)。列表项 (<li>) 嵌套在有序列表和无序列表中。在说明列表中，您会看到说明术语 (<dt>) 和说明详细信息 <dd>.。我们将在下文中介绍所有这些内容。

在 HTML 表单中，<option> 元素的列表构成 <datalist>、<select> 和 <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 属性可提供更多值。

虽然如 CodePen 中所述，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> 进行向上计数，对后面的 <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>

“评价”部分有 3 条评价，因此有 3 个 <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 中移除隐式语义。这是功能而非 bug。 通常，在使用语义元素时，您不应添加 role 属性，因为没有必要。您通常也不需要向列表添加一个，除非用户确实需要知道它是一个列表，例如当用户可以从知道列表中有多少项中受益时。

说明列表

说明列表是一个 description list (<dl>) 元素，其中包含一系列（零个或多个）description term (<dt>) 及其 description details (<dd>)。这三个元素的原始名称分别是“definition list”“definition term”和“definition definition”。 生活标准中的名称发生了变化。

与有序列表和无序列表类似，它们可以进行嵌套。与有序列表和无序列表不同，它们由键/值对组成。 与 <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> 是否有效？

是。
否。

选择用于定义列表类型的三种元素。

<dl>
<ul>
<il>
<ol>