介绍
在本实验中，参与者将探索 HTML 列表的创建和样式设置，重点关注不同类型的列表及其属性。实验将引导学习者构建各种列表结构，包括带有数字和字母编号的有序列表、带有自定义标记样式的无序列表，以及包含多个条目的描述列表。
参与者将从设置标准的 HTML5 文档结构开始，逐步构建复杂的列表示例，学习如何使用 <ol>、<ul>、<li> 和 <dl> 等标签来创建语义化且视觉上吸引人的列表布局。通过尝试列表属性和嵌套列表结构，学生将掌握 HTML 列表设计的实用技能，并了解如何增强网页内容的组织。
设置 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>john.doe@example.com</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 列表元素，使学习者能够有效地组织和呈现网页文档中的信息。
