HTML 列表项：掌握无序列表和有序列表

介绍

HTML 列表用于将项目显示为列表，它们在网页开发中起着至关重要的作用。HTML 的 li 标签用于定义列表中的项目。li 标签通常与 ul 或 ol 标签一起使用，非常适合创建无序列表和有序列表。本实验将逐步指导你如何使用 li 标签创建 HTML 列表。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 97%。获得了学习者 100% 的好评率。

创建无序列表

我们可以使用 HTML 的 ul 标签来创建无序列表。为了向列表中添加项目，我们应该使用 li 标签。让我们创建一个包含三个项目的无序列表。

<!-- index.html -->

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

在上面的代码中，我们使用了 ul 标签来创建无序列表，并使用 li 标签来定义列表中的每个项目。

创建有序列表

创建有序列表与创建无序列表非常相似，唯一的区别是使用 ol 标签而不是 ul 标签。让我们创建一个包含三个项目的有序列表。

<!-- index.html -->

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

在上面的代码中，我们使用了 ol 标签来创建有序列表，并使用 li 标签来定义列表中的每个项目。

为 li 标签添加属性

li 标签支持多个属性，这些属性可用于修改列表项的项目符号样式。一个常用的属性是 type 属性，它可以用来更改列表项的项目符号。让我们使用 type 属性更新步骤 1 中的无序列表。

<!-- index.html -->

<ul>
  <li type="circle">Item 1</li>
  <li type="disc">Item 2</li>
  <li type="square">Item 3</li>
</ul>

在上面的代码中，我们使用了 type 属性为列表项添加了不同的项目符号。我们使用了 circle 值使项目符号变为空心圆，disc 值使项目符号变为实心圆，square 值使项目符号变为实心方块。

嵌套列表

我们可以在一个列表中嵌套多个列表。让我们创建一个有序列表，并在有序列表的第二项中添加一个无序列表。

<!-- index.html -->

<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ol>

在上面的代码中，我们使用了 ul 标签来创建无序列表，并使用 li 标签来定义列表中的每个项目。我们还在有序列表的第二项中嵌套了一个无序列表。

总结

在本实验中，我们学习了如何使用 li 标签创建 HTML 列表。我们首先使用 ul 标签和 li 标签创建了一个无序列表。然后，我们使用 ol 标签和 li 标签创建了一个有序列表。我们还学习了如何为 li 标签添加属性以修改列表项的项目符号样式。最后，我们学习了如何在单个列表中嵌套多个列表。