列表

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

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>。

我们可以嵌套列表，但它们必须嵌套在列表项中。请记住，<ul> 或 <ol> 的唯一子元素是一个或多个 <li> 元素。

列表项

我们已经使用了 <li> 元素，但我们尚未正式介绍它。<li> 元素可以是无序列表 (<ul>)、有序列表 (<ol>) 或菜单 (<menu>) 的直接子元素。<li> 必须嵌套为这些元素之一的子元素，并且在其他任何地方都无效。

规范不要求关闭列表项，因为它会在浏览器遇到下一个 <li> 开始标记或必需的列表关闭标记：</ul>、</ol>、</menu> 时隐式关闭。虽然规范不要求这样做，并且一些公司内部的最佳实践建议您不要关闭列表项以节省一些字节，但请关闭您的 <li> 标记。它使您的代码更易于阅读，并且未来的您会感谢您。关闭所有元素比记住哪些标记需要关闭以及哪些标记具有可选的关闭标记更容易。

只有一个特定于元素的 <li> 属性：value，一个整数。value 仅在 <li> 嵌套在有序列表中时才有用，对于无序列表或菜单没有意义。如果存在冲突，它将覆盖 <ol> 的 start 值。

value 是有序列表中列表项的编号。对于后续列表项，从设置的值继续编号，除非该项目也设置了 value 属性。值不必按顺序排列；尽管如果不是按顺序排列，则应该有充分的理由。

当您将 <ol> 上的 reversed 与列表项上的 value 属性结合使用时，浏览器会将该 <li> 设置为提供的值，然后向上计数其前面的 <li>，并向下计数其后面的 <li>。如果第二个列表项具有 value 属性，则计数器将在该第二个列表项处重置，并且后续值将减一。

所有这些也可以使用 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> 中嵌套。

在最后一个示例中，您可能已经注意到 <ul> 上包含了 role="list"。虽然 <ul> 和 <ol> 的隐式角色都是 list，但使用 CSS 删除列表外观（包括设置 display: grid 或 list-style-type: none）可能会导致 VoiceOver（iOS 和 MacOS 屏幕阅读器）在 Safari 中删除隐式语义。这是一个功能而非错误。通常，在使用语义元素时，您不应添加 role 属性，因为它不是必需的。并且您通常也不需要为列表添加 role 属性，除非用户确实需要知道它是一个列表，例如当用户可以从知道列表中有多少项目受益时。

描述列表

描述列表是一个描述列表 (<dl>) 元素，其中包含一系列（零个或多个）描述术语 (<dt>) 及其描述详细信息 (<dd>)。这三个元素的原始名称是“定义列表”、“定义术语”和“定义定义”。名称在 Living Standard 中更改了。

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

否。
再试一次。
是。
正确！

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

<il>
再试一次。
<ol>
正确！
<ul>
正确！
<dl>
正确！