列表

列表比您想象的更常见。如果您曾经学习过编程课程，那么第一个项目可能是 购物清单或待办事项清单这些都是清单选择题通常采用带编号的问题列表：多个可能的答案 嵌套列表。

HTML 为我们提供了几种标记列表的不同方法。有序列表 (<ol>)、无序列表 (<ul>) 和说明列表 (<dl>)。 列表项 (<li>) 嵌套在有序列表和无序列表中。您可以在广告内容描述列表中找到广告内容描述字词（<dt>）和广告内容描述 详细信息 <dd>. 我们将在此处逐一介绍。

在 HTML 表单中，<option> 元素列表构成了 <select> 中 <datalist>、<select> 和 <optgroup> 的内容。这些内容将在 HTML 表单中讨论。

在菜单和无序列表中，列表项通常使用项目符号显示。在有序列表中，它们通常放在 升序计数器（例如数字或字母）。您可以使用 HTML 或 CSS 来控制或反转项目符号和编号顺序， 或者两者兼有

默认情况下，有序和无序的列表项以数字或项目符号为前缀。但即使你不想让列表看起来像列表 您仍然需要一个项目列表，比如导航栏中的待办事项列表、带有复选框而非项目符号的待办事项列表，或者判断正误问题 答案为单选题。对于所有这些不带项目符号的列表，可以使用 HTML 列表元素。

无序列表

<ul> 元素是无序项列表的父元素。<ul> 的唯一子项是一个或多个 <li> 列表 项目元素。我们来创建一个机器列表。我们使用无序列表是因为顺序无关紧要（不要告诉他们）：

默认情况下，每个无序列表项都以项目符号为前缀。无序列表没有元素专用属性。 您需要使用 </ul> 来结束列表。

有序列表

<ol> 元素是有序项目列表的父元素。<ol> 的唯一子项是一个或多个 <li> 元素或列表项。 “子弹”在本示例中，这些字符是多种类型的数字。您可以使用 list-style-type 属性在 CSS 中定义类型 或通过 type 属性指定。

<ol> 有三个特定于元素的属性：type、reversed 和 start。

枚举的 type 属性可设置编号类型。type 有五个有效值，默认值为 1 数字，但也可以使用 a、A、i 或 I 来代替大小写字母或罗马数字。list-style-type 属性 提供了更多的值。

虽然如 Codelab 中所述，在写入时，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> 的 start 值。

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>

评价部分有三条评价，因此是三条<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. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</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 中的隐式语义。这是一项功能，而非错误。 通常，不应在使用语义元素时添加角色属性，因为这不是必需的。通常不需要 也可以向列表中添加一个列表，除非用户确实需要知道这是一个列表，例如，当用户知道列表中有多少项会让用户受益时。

说明列表

说明列表是一种说明列表 (<dl>) 元素，其中包含 一系列（零个或多个）广告内容描述字词 (<dt>) 以及 其说明详情（<dd>）。这三个元素的原始名称 是“定义列表”“定义条款”和“定义” 现行标准中的名称已更改。

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