HTML 无序列表实验

介绍

HTML 中的 ul 标签用于创建无序列表，其中的项目通常以项目符号的形式呈现。本实验将指导你如何使用 HTML 创建无序列表，并提供 ul 标签的语法和使用示例。

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

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

设置 HTML 文档结构

在一个新的项目文件夹中创建一个 index.html 文件，并在代码编辑器中打开该文件。

通过添加 html、head 和 body 标签来创建 HTML 文档的基本结构。在 head 标签内，添加 title 标签并将文档标题设置为 "HTML Unordered List Lab"。

<!doctype html>
<html>
  <head>
    <title>HTML Unordered List Lab</title>
  </head>
  <body>
    <!-- 在此处添加内容 -->
  </body>
</html>

使用 ul 标签创建无序列表

在 body 标签内，使用 ul 标签创建一个无序列表。要添加列表项，请在 ul 标签内使用 li 标签。

<ul>
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

为 ul 标签添加属性

ul 标签本身没有特定的属性，但它支持全局属性和事件属性。以下是为 ul 标签添加 class 属性的示例。

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

为 ul 标签应用 CSS 样式

要为 ul 标签添加样式，可以使用 CSS。在以下示例中，我们将 list-style-type 设置为 square，并添加了边距。

<style>
  ul {
    list-style-type: square;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50px;
  }
</style>

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

嵌套无序列表

你可以通过在 <li> 标签内放置另一个 <ul> 标签来嵌套无序列表。以下是一个嵌套无序列表的示例。

<ul>
  <li>This is the first item in the parent list</li>
  <li>
    This is the second item in the parent list
    <ul>
      <li>This is a nested item</li>
      <li>This is another nested item</li>
    </ul>
  </li>
  <li>This is the third item in the parent list</li>
</ul>

总结

在本实验中，你学习了如何使用 HTML 中的 ul 标签创建无序列表。你还学习了如何为 ul 标签添加属性和 CSS 样式。请记住，ul 标签用于创建带项目符号的列表。ul 标签需要开始和结束标签，并且列表项应使用 ul 标签内的 li 标签添加。你可以通过在 li 标签内放置另一个 ul 标签来嵌套无序列表。