创建具有不同样式的 HTML 列表 | HTML 列表教程

介绍

在本实验中，参与者将探索 HTML 列表的创建和样式设置，重点关注不同类型的列表及其属性。实验将引导学习者构建各种列表结构，包括带有数字和字母编号的有序列表、带有自定义标记样式的无序列表，以及包含多个条目的描述列表。

参与者将从设置标准的 HTML5 文档结构开始，逐步构建复杂的列表示例，学习如何使用 <ol>、<ul>、<li> 和 <dl> 等标签来创建语义化且视觉上吸引人的列表布局。通过尝试列表属性和嵌套列表结构，学生将掌握 HTML 列表设计的实用技能，并了解如何增强网页内容的组织。

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/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-451035{{"创建具有不同样式的 HTML 列表"}} html/head_elems -.-> lab-451035{{"创建具有不同样式的 HTML 列表"}} html/lang_decl -.-> lab-451035{{"创建具有不同样式的 HTML 列表"}} html/lists_desc -.-> lab-451035{{"创建具有不同样式的 HTML 列表"}} html/doc_flow -.-> lab-451035{{"创建具有不同样式的 HTML 列表"}} html/inter_elems -.-> lab-451035{{"创建具有不同样式的 HTML 列表"}} end

设置 HTML 文档结构

在这一步中，你将学习如何为你的列表演示创建基本的 HTML 文档结构。HTML 文档具有标准的结构，为网页内容提供了基础。

打开 WebIDE 并导航到 ~/project 目录。在文件资源管理器中右键单击并选择“新建文件”，创建一个名为 lists.html 的新文件。

现在，让我们创建基本的 HTML5 文档结构。将以下代码输入到 lists.html 文件中：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Lists Example</title>
  </head>
  <body>
    <!-- We'll add our lists here in the next steps -->
  </body>
</html>

让我们分解一下这个 HTML 结构的关键组成部分：

<!DOCTYPE html> 声明这是一个 HTML5 文档
<html lang="en"> 是带有语言声明的根元素
<head> 包含文档的元数据
<meta charset="UTF-8"> 确保正确的字符编码
<meta name="viewport"> 有助于实现响应式设计
<title> 设置浏览器标签页中显示的页面标题
<body> 是放置主要内容的地方

在浏览器中的示例输出将显示一个空白页面，浏览器标签页中显示标题为“HTML Lists Example”。

创建带有数字和字母类型的有序列表

在这一步中，你将学习如何使用 <ol>（有序列表）和 <li>（列表项）标签在 HTML 中创建有序列表。有序列表会自动为其项目编号，并且可以使用不同的编号样式进行自定义。

打开你在上一步中创建的 lists.html 文件。在 <body> 标签内，添加以下代码以创建不同类型的有序列表：

<h2>数字有序列表（默认）</h2>
<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

<h2>字母有序列表</h2>
<ol type="a">
  <li>第一个字母项</li>
  <li>第二个字母项</li>
  <li>第三个字母项</li>
</ol>

<h2>大写字母有序列表</h2>
<ol type="A">
  <li>第一个大写字母项</li>
  <li>第二个大写字母项</li>
  <li>第三个大写字母项</li>
</ol>

<h2>罗马数字有序列表</h2>
<ol type="i">
  <li>第一个罗马数字项</li>
  <li>第二个罗马数字项</li>
  <li>第三个罗马数字项</li>
</ol>

让我们分解一下不同的列表类型：

默认有序列表使用数字编号（1, 2, 3）
type="a" 创建小写字母编号（a, b, c）
type="A" 创建大写字母编号（A, B, C）
type="i" 创建小写罗马数字编号（i, ii, iii）

在浏览器中的示例输出将显示四个不同的有序列表，分别带有各自的编号样式。

实现带有不同标记样式的无序列表

在这一步中，你将学习如何使用 <ul>（无序列表）和 <li>（列表项）标签在 HTML 中创建无序列表。无序列表使用不同的标记样式来显示列表项，而不需要数字或字母排序。

打开 lists.html 文件，并在之前的有序列表之后添加以下代码：

<h2>默认无序列表（圆点）</h2>
<ul>
  <li>第一个圆点</li>
  <li>第二个圆点</li>
  <li>第三个圆点</li>
</ul>

<h2>实心圆标记样式</h2>
<ul type="disc">
  <li>实心圆标记项</li>
  <li>另一个实心圆标记项</li>
  <li>第三个实心圆标记项</li>
</ul>

<h2>空心圆标记样式</h2>
<ul type="circle">
  <li>空心圆标记项</li>
  <li>另一个空心圆标记项</li>
  <li>第三个空心圆标记项</li>
</ul>

<h2>实心方块标记样式</h2>
<ul type="square">
  <li>实心方块标记项</li>
  <li>另一个实心方块标记项</li>
  <li>第三个实心方块标记项</li>
</ul>

让我们探索不同的无序列表标记样式：

默认无序列表使用实心圆点
type="disc" 创建实心圆形标记（默认）
type="circle" 创建空心圆形标记
type="square" 创建实心方形标记

在浏览器中的示例输出将显示四个不同的无序列表，分别带有各自的标记样式。

设计带有多个条目的自定义描述列表

在这一步中，你将学习如何使用 <dl>（描述列表）、<dt>（描述术语）和 <dd>（描述详情）标签在 HTML 中创建描述列表。描述列表非常适合显示键值对或术语及其解释。

打开 lists.html 文件，并在之前的列表示例之后添加以下代码：

<h2>编程语言描述列表</h2>
<dl>
  <dt>HTML</dt>
  <dd>一种用于创建网页的标记语言</dd>

  <dt>CSS</dt>
  <dd>一种用于设计网页外观的样式语言</dd>

  <dt>JavaScript</dt>
  <dd>一种为网页添加交互性的编程语言</dd>
</dl>

<h2>联系信息描述列表</h2>
<dl>
  <dt>姓名</dt>
  <dd>John Doe</dd>

  <dt>电子邮件</dt>
  <dd>[email protected]</dd>

  <dt>电话</dt>
  <dd>+1 (555) 123-4567</dd>
</dl>

关于描述列表的关键点：

<dl> 定义整个描述列表
<dt> 表示术语或名称
<dd> 提供描述或详情
单个 <dt> 可以使用多个 <dd> 标签
适用于词汇表、元数据和键值对展示

在浏览器中的示例输出将显示两个描述列表，分别带有术语及其对应的描述。

尝试列表属性和嵌套列表结构

在这一步中，你将通过创建嵌套列表和使用额外的列表属性来探索高级列表技术。嵌套列表允许你创建层次化的内容，而属性可以帮助你自定义列表的外观和行为。

打开 lists.html 文件，并在之前的列表示例之后添加以下代码：

<h2>嵌套无序列表</h2>
<ul>
  <li>
    主类别 1
    <ul>
      <li>子类别 1.1</li>
      <li>子类别 1.2</li>
    </ul>
  </li>
  <li>
    主类别 2
    <ul>
      <li>子类别 2.1</li>
      <li>子类别 2.2</li>
    </ul>
  </li>
</ul>

<h2>带有 start 属性的嵌套有序列表</h2>
<ol start="5">
  <li>
    第一个主项
    <ol type="a">
      <li>第一个嵌套项</li>
      <li>第二个嵌套项</li>
    </ol>
  </li>
  <li>
    第二个主项
    <ol type="a">
      <li>第三个嵌套项</li>
      <li>第四个嵌套项</li>
    </ol>
  </li>
</ol>

<h2>混合嵌套列表</h2>
<ul>
  <li>
    Web 开发
    <ol>
      <li>HTML</li>
      <li>
        CSS
        <ul>
          <li>Flexbox</li>
          <li>Grid</li>
        </ul>
      </li>
      <li>JavaScript</li>
    </ol>
  </li>
</ul>

展示的关键概念：

嵌套列表可以通过在列表项中放置一个新列表来创建
列表可以混合使用（无序列表嵌套在有序列表中，反之亦然）
start 属性允许更改有序列表的起始编号
type 属性可用于更改嵌套列表中的编号或标记样式

在浏览器中的示例输出将显示三种不同的嵌套列表结构，具有各种样式和层次。

总结

在本实验中，参与者学习了如何使用各种技术创建和样式化 HTML 列表。实验从建立标准的 HTML5 文档结构开始，展示了 DOCTYPE、html、head 和 body 标签等基本元素，重点介绍了正确的元数据和字符编码。

实践练习涵盖了创建不同类型的有序和无序列表，包括数字和字母列表样式。参与者探索了列表属性和嵌套列表结构，获得了使用语义化标记设计结构化 HTML 内容的实践经验。实验全面介绍了 HTML 列表元素，使学习者能够有效地组织和呈现网页文档中的信息。