HTML 列表：创建无序列表和有序列表

介绍

HTML 列表是网页开发的基础，用于对相关条目进行分组和组织。它们使内容更具可读性和可访问性。列表主要有两种类型：

无序列表 (<ul>): 当条目顺序无关紧要时使用。这些通常以项目符号显示。
有序列表 (<ol>): 当条目顺序很重要时使用。这些通常以数字显示。

在本实验中，你将学习如何创建这两种类型的列表，向其中添加条目，甚至创建嵌套的子列表来构建更复杂的结构。最终，你将拥有一个展示这些列表类型的单一 HTML 页面。

为无序列表创建 ul 标签

在此步骤中，你将创建一个无序列表。无序列表使用 <ul> 标签定义，用于顺序不重要的条目。

首先，在 WebIDE 左侧的文件浏览器中找到 index.html 文件。点击它在编辑器中打开。

在 index.html 文件的 <body> 中，在 <h1> 标题正下方添加一个空的无序列表，即放置 <ul> 和 </ul> 标签。

你的 index.html 文件现在应该如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul></ul>
  </body>
</html>

添加代码后，保存文件。你可以通过切换到 Web 8080 标签来预览你的更改。此时，你不会看到任何列表项，因为我们还没有添加任何内容。

ul tag

在 ul 中添加 li 标签作为列表项

在此步骤中，你将向无序列表添加条目。列表中的每个条目都使用 <li> (list item) 标签定义。这些 <li> 标签必须放置在父级 <ul> 标签内部。

让我们为购物清单添加三个条目。修改你的 index.html 文件，将“Milk”、“Bread”和“Cheese”作为列表项添加进去。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
  </body>
</html>

保存文件并切换到 Web 8080 标签以查看你的更改。现在你应该看到一个带有三个购物项目的项目符号列表。

li tag

为有序列表创建 ol 标签

在此步骤中，你将创建一个有序列表。有序列表使用 <ol> 标签定义，用于条目顺序很重要的场景，例如食谱或待办事项列表。浏览器会自动为条目编号。

让我们为待办事项列表添加一个新部分。在你的 index.html 文件中，在现有的无序列表下方添加一个新的标题 <h2>To-Do List</h2> 和一个空的有序列表 <ol></ol>。

你的 index.html 文件现在应该包含这两种列表结构：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol></ol>
  </body>
</html>

保存文件并在 Web 8080 标签中检查预览。你将看到新的标题，但有序列表目前是空的。

在 ol 中添加 li 标签作为编号列表项

在此步骤中，你将为新的有序列表添加条目。与无序列表一样，你使用 <li> 标签来定义每个条目。浏览器将自动处理编号。

让我们为待办事项列表添加三个任务。编辑 index.html 文件，并将以下 <li> 元素放置在你的 <ol> 标签内。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>Go to the gym</li>
    </ol>
  </body>
</html>

保存文件并刷新 Web 8080 标签。现在你将看到一个显示你三个任务的编号列表。

在 ol 中嵌套 ul 以创建子列表

在此步骤中，你将学习如何创建嵌套列表，也称为子列表。这对于将列表项分解为更小、相关的点非常有用。你可以在 <li> 元素内嵌套一个列表（<ul> 或 <ol>）。

让我们为“Go to the gym”任务添加更多细节。我们将添加一个嵌套的无序列表来指定锻炼活动。为此，请在 <li>Go to the gym</li> 元素内放置一个新的 <ul> 块。

使用以下代码更新你的 index.html 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>
        Go to the gym
        <ul>
          <li>Treadmill</li>
          <li>Weights</li>
        </ul>
      </li>
    </ol>
  </body>
</html>

保存文件并在 Web 8080 标签中查看。你将在“Go to the gym”条目下看到一个缩进的、带项目符号的子列表。这展示了如何创建更复杂和有组织的內容结构。

nested ul tag

总结

恭喜你完成了本次实验！

在本实验中，你学习了 HTML 中创建列表的基础知识。你已成功：

创建了无序列表（<ul>），用于没有特定顺序的条目。
创建了有序列表（<ol>），用于有顺序要求的条目。
使用列表项标签（<li>）为这两种列表添加条目。
创建了嵌套列表以构建层级结构。

列表是组织内容和提高网页可读性的重要工具。现在你可以在未来的网页项目中有效地使用它们。