HTML 无序列表

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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



Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/basic_elems -.-> lab-70875{{"`HTML 无序列表`"}} html/head_elems -.-> lab-70875{{"`HTML 无序列表`"}} html/lists_desc -.-> lab-70875{{"`HTML 无序列表`"}} html/layout -.-> lab-70875{{"`HTML 无序列表`"}} html/doc_flow -.-> lab-70875{{"`HTML 无序列表`"}} html/inter_elems -.-> lab-70875{{"`HTML 无序列表`"}} html/custom_attr -.-> lab-70875{{"`HTML 无序列表`"}} end

设置 HTML 文档结构

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

通过添加 htmlheadbody 标签来创建 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 标签来嵌套无序列表。

您可能感兴趣的其他 HTML 教程