HTML 列表标签详解：无序、有序、定义列表的用法
【摘要】 HTML 列表标签详解：无序、有序、定义列表的用法引言 (Foreword/Motivation)在网页设计中，列表是一种非常常见的元素，用于呈现一系列相关联的内容。无论是导航菜单、商品列表、文章目录，还是术语解释、步骤说明等，列表都能帮助我们组织信息，使其结构清晰、易于阅读。HTML 提供了三种主要的列表标签，它们各自适用于不同的场景，并且具有重要的语义作用：无序列表 (<ul>): 用于...
HTML 列表标签详解：无序、有序、定义列表的用法
引言 (Foreword/Motivation)
在网页设计中，列表是一种非常常见的元素，用于呈现一系列相关联的内容。无论是导航菜单、商品列表、文章目录，还是术语解释、步骤说明等，列表都能帮助我们组织信息，使其结构清晰、易于阅读。
HTML 提供了三种主要的列表标签，它们各自适用于不同的场景，并且具有重要的语义作用：
- 无序列表 (
<ul>): 用于表示一组没有特定顺序的项目。 - 有序列表 (
<ol>): 用于表示一组有特定顺序的项目。 - 定义列表 (
<dl>): 用于表示一组术语及其定义。
正确使用这些标签不仅能让您的网页内容结构清晰，方便用户理解，对于搜索引擎优化（SEO）和无障碍访问（Accessibility）也至关重要，因为它们能为解析器（如搜索引擎爬虫、屏幕阅读器）提供重要的语义信息。本指南将详细介绍这三种列表标签的用法。
环境准备 (Environment Setup)
学习和实践 HTML 列表标签非常简单，您只需要：
- 一个文本编辑器: 任何代码编辑器即可，用于编写 HTML 和 CSS 代码。
- 一个现代 Web 浏览器: 用于打开 HTML 文件并查看列表的渲染效果。
您不需要复杂的开发环境。
完整代码实现 (Full Code Implementation)
我们将创建一个 HTML 文件，并在其中包含一个 CSS 文件，来演示这三种列表标签及其常用用法。
1. HTML 文件 (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 列表标签示例</title>
<link rel="stylesheet" href="style.css"> </head>
<body>
<h1>HTML 列表标签示例</h1>
<hr>
<h2>无序列表 (<ul>) 用法</h2>
<ul class="unordered-list">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>葡萄</li>
</ul>
<hr>
<h2>有序列表 (<ol>) 用法</h2>
<ol class="ordered-list-default">
<li>第一步：准备食材</li>
<li>第二步：开始烹饪</li>
<li>第三步：享用美食</li>
</ol>
<h3>有序列表属性示例</h3>
<p>使用字母标记 (type="A"):</p>
<ol type="A" class="ordered-list">
<li>选项 A</li>
<li>选项 B</li>
<li>选项 C</li>
</ol>
<p>使用罗马数字标记 (type="i"):</p>
<ol type="i" class="ordered-list">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ol>
<p>从编号 5 开始 (start="5"):</p>
<ol start="5" class="ordered-list">
<li>第五项</li>
<li>第六项</li>
<li>第七项</li>
</ol>
<p>倒序编号 (reversed):</p>
<ol reversed class="ordered-list">
<li>最后一项</li>
<li>倒数第二项</li>
<li>倒数第三项</li>
</ol>
<hr>
<h2>列表嵌套示例</h2>
<p>可以在列表项 (li) 中嵌套其他列表。</p>
<ul class="nested-list-container">
<li>水果
<ul> <li>热带水果
<ul>
<li>芒果</li>
<li>菠萝</li>
</ul>
</li>
<li>温带水果
<ol> <li>苹果</li>
<li>梨</li>
</ol>
</li>
</ul>
</li>
<li>蔬菜
<ol> <li>绿叶蔬菜</li>
<li>根茎类蔬菜</li>
</ol>
</li>
</ul>
<hr>
<h2>定义列表 (<dl>) 用法</h2>
<dl class="definition-list">
<dt>HTML</dt>
<dd>超文本标记语言 (HyperText Markup Language)，用于创建网页的标准标记语言。</dd>
<dt>CSS</dt>
<dd>层叠样式表 (Cascading Style Sheets)，用于描述网页的呈现。</dd>
<dt>CPU</dt>
<dd>中央处理器 (Central Processing Unit)，计算机的主要计算单元。</dd>
<dd>也可以指代中央处理单元本身。</dd>
<dt>JS</dt>
<dt>ECMAScript</dt>
<dd>一种编程语言，常用于 Web 前端开发。</dd>
</dl>
<hr>
<h2>使用 CSS 控制列表样式</h2>
<p>列表的标记 (bullet, number) 和缩进等都可以用 CSS 控制。</p>
<ul class="custom-styled-list">
<li>自定义样式项 1</li>
<li>自定义样式项 2</li>
<li>自定义样式项 3</li>
</ul>
</body>
</html>
2. CSS 文件 (style.css)
/* style.css */
body {
font-family: sans-serif;
margin: 20px;
line-height: 1.6; /* 增加行高，提高可读性 */
}
h1, h2 {
color: #333;
margin-top: 20px;
}
hr {
margin: 30px 0;
border: 0;
border-top: 1px solid #ccc;
}
/* 为不同类型的列表添加边框和背景，方便区分和查看结构 */
.unordered-list,
.ordered-list-default,
.ordered-list,
.nested-list-container,
.definition-list,
.custom-styled-list {
border: 1px dashed #555;
padding: 15px; /* 增加内边距 */
margin: 15px 0; /* 增加外边距 */
background-color: #f9f9f9;
}
/* 嵌套列表的背景，区分层级 */
.nested-list-container ul,
.nested-list-container ol {
margin: 10px 0 0 20px; /* 增加嵌套列表左外边距 */
padding: 10px;
background-color: #eee;
border: 1px dashed #aaa;
}
/* 定义列表的样式 */
.definition-list dt {
font-weight: bold; /* 术语加粗 */
margin-top: 10px; /* 术语之间留白 */
}
.definition-list dd {
margin-left: 20px; /* 定义描述向右缩进 */
margin-bottom: 10px; /* 定义描述之间留白 */
}
/* 自定义样式列表 */
.custom-styled-list {
list-style: square inside; /* 改变标记为方形，并将标记放在列表项内部 */
padding-left: 10px; /* 调整左内边距 */
}
.custom-styled-list li {
background-color: lightgreen;
margin-bottom: 5px; /* 列表项之间留白 */
padding: 5px;
border-left: 3px solid darkgreen;
}
运行结果 (Execution Results)
将上述 HTML 和 CSS 代码保存到同一目录下，用现代浏览器打开 index.html 文件。
- 无序列表 (
<ul>): 您会看到一个包含“苹果”、“香蕉”等水果名称的列表，每个项目前默认有一个实心圆点（bullet）。整个列表及其边框背景会作为一个块级元素显示。 - 有序列表 (
<ol>):- 默认用法：您会看到一个包含“第一步”、“第二步”、“第三步”等步骤的列表，每个项目前默认有一个数字标记 (1., 2., 3.)。
- 属性示例：您会看到列表标记变为大写字母 (A, B, C)、小写罗马数字 (i, ii, iii)，起始编号变为 5 (5, 6, 7)，以及倒序编号 (3, 2, 1)。
- 列表嵌套: 您会看到多层缩进的列表结构，不同层级使用了不同类型的标记（圆点、数字），背景颜色和边框区分了嵌套的层级。
- 定义列表 (
<dl>): 您会看到“HTML”、“CSS”、“CPU”、“JS”、“ECMAScript”等术语，它们通常会独占一行或并排显示（如果空间允许），其下是对应的定义或描述文本，这些定义文本会向右缩进。您会看到一个术语对应多个定义，以及多个术语对应一个定义的情况。 - CSS 控制列表样式: 您会看到一个无序列表，其标记变为了实心方形，标记显示在列表项内部，并且列表项本身也有了背景色、边框和内边距。
测试步骤以及详细代码 (Testing Steps and Detailed Code)
测试 HTML 列表标签的用法主要是通过在浏览器中查看它们的默认渲染效果以及使用开发者工具检查其 HTML 结构。
- 保存文件: 将上面提供的 HTML 和 CSS 代码分别保存为
index.html和style.css到同一个文件夹。 - 用浏览器打开: 在您的 Web 浏览器中打开
index.html文件。 - 视觉检查:
- 步骤: 滚动页面，观察不同列表类型的默认外观（标记、缩进）。
- 步骤: 观察应用了
type,start,reversed属性的有序列表，确认标记和编号符合预期。 - 步骤: 观察嵌套列表的层级结构和不同标记。
- 步骤: 观察定义列表的术语和定义是否正确对应，以及定义文本的缩进。
- 步骤: 观察应用了自定义 CSS 样式的列表，确认样式是否生效。
- 代码: 对应观察上文“完整代码实现”中 HTML 各部分的渲染结果。
- 使用浏览器开发者工具检查结构和样式:
- 步骤: 打开浏览器开发者工具 (F12)。
- 步骤: 切换到 “Elements” (元素) 标签页。
- 步骤: 展开
<body>，找到不同的列表元素 (<ul>,<ol>,<dl>)。 - 验证: 确认 HTML 结构是正确的，例如
<ul>或<ol>直接包含<li>，<dl>直接包含<dt>和<dd>（不能在<ul>或<ol>中直接放<div>等非<li>元素，不能在<dl>中直接放<div>等非<dt>或<dd>元素）。检查嵌套列表的结构是否正确（<ul>或<ol>嵌套在父级<li>中）。 - 验证: 选中一个
<li>或<dd>元素，查看右侧的 “Styles” (样式) 或 “Computed” (计算样式) 标签页。观察浏览器应用的默认样式（如display: list-item;forli,margin-leftfor default indent），以及您在style.css中添加的样式是否被应用。特别是对于自定义样式列表，检查list-style-type和padding-left等属性是否符合预期。
部署场景 (Deployment Scenarios)
HTML 列表标签是标准的 Web 内容组成部分，它们在任何 Web 应用的部署中都会被包含：
- 静态网站: 作为静态 HTML 文件的一部分，与 CSS、图片等一起托管在 Web 服务器或静态文件托管服务上。
- 动态 Web 应用: 由后端框架（如 Node.js Express/Koa, Python Flask/Django, Java Spring Boot, PHP Laravel）生成 HTML 页面时包含列表结构，然后将生成的 HTML 发送给浏览器。
- 单页应用 (SPA): 在客户端 JavaScript 框架（如 React, Vue, Angular）中，通过组件的方式生成符合语义的
<ul>,<ol>,<dl>结构，最终由浏览器渲染。 - 内容管理系统 (CMS): CMS 生成的网页内容通常会使用这些列表标签来组织文本和导航。
在所有这些场景中，列表标签的处理和渲染都是由用户的浏览器完成的。
深入理解列表标签 (Deep Dive into List Tags)
<ul>(Unordered List):- 语义: 表示一系列没有特定顺序的项目集合。例如，购物清单、兴趣爱好列表。
- 结构:
<ul 속성=""> <li>内容</li> ... </ul> - 默认渲染: 浏览器通常在每个
<li>前显示一个圆点 (bullet)，并对整个列表进行左侧缩进。可以使用 CSS 的list-style-type属性改变标记类型（如circle,square,none），使用list-style-position控制标记位置（inside,outside），使用padding-left或margin-left控制缩进。 - 嵌套: 可以在
<li>元素中嵌套<ul>或<ol>。
<ol>(Ordered List):- 语义: 表示一系列有特定顺序或排名的项目。例如，操作步骤、排行榜。
- 结构:
<ol 속성=""> <li>内容</li> ... </ol> - 默认渲染: 浏览器通常在每个
<li>前显示一个数字标记，并对整个列表进行左侧缩进。 - 常用属性:
type: 指定标记类型。可选值：1(数字, 默认),A(大写字母),a(小写字母),I(大写罗马数字),i(小写罗马数字)。start: 指定起始编号。默认从 1 开始。reversed: 布尔属性，如果存在，列表将按倒序编号。
- 嵌套: 可以在
<li>元素中嵌套<ul>或<ol>。
<dl>(Definition List):- 语义: 表示一个术语列表及其定义或描述。适用于词汇表、元数据列表、问答对。
- 结构:
<dl> <dt>术语</dt> <dd>定义/描述</dd> ... </dl>。一个<dl>可以包含一个或多个<dt>后跟一个或多个<dd>。 - 默认渲染: 浏览器通常不对
<dt>添加标记，对<dd>进行左侧缩进。可以使用 CSS 控制<dt>和<dd>的样式和布局。 - 与
<ul>/<ol>的区别:dl用于表示名值对的列表，而ul/ol用于表示同类项目的集合。
核心特性 (Core Features)
- 语义化: 提供清晰的列表结构含义，有助于机器理解内容。
- 自动标记: 浏览器提供默认的列表标记（可被 CSS 覆盖）。
- 支持嵌套: 可以轻松创建多级列表结构。
- 有序列表属性: 灵活控制有序列表的编号类型、起始值和顺序。
- 定义列表结构: 专门用于表示术语和定义的配对关系。
- 无障碍访问: 语义化的标签帮助屏幕阅读器等辅助技术正确解析和朗读列表内容。
未来展望 (Future Outlook)
HTML 列表标签 (<ul>, <ol>, <dl>) 是 Web 标准中非常基础和稳定的部分。它们作为 HTML 结构元素本身，在未来版本中预计不会有大的语法或功能变化。未来的发展更多体现在 CSS 对列表样式控制能力的增强，以及开发者在构建复杂界面时如何结合列表标签与 Flexbox/Grid 等新的布局技术。
技术趋势与挑战 (Technology Trends and Challenges)
技术趋势:
- 语义化 HTML 的重要性日益凸显: 强调使用正确的标签来描述内容结构。
- CSS 灵活布局: Flexbox 和 Grid 等布局方式可以用于更灵活地控制列表项的排列，突破传统列表的垂直布局限制（虽然它们不会替代列表的语义）。
- 设计系统: 在设计系统中定义标准的列表样式和组件。
- 无障碍设计: 确保列表对所有用户（包括使用屏幕阅读器的用户）友好。
挑战:
- 复杂列表布局: 在一些复杂的 UI 设计中，使用 CSS 实现不规则或多列的列表布局可能需要脱离默认的列表流，需要更高级的 CSS 技巧。
- 嵌套列表的样式控制: 在多层嵌套的列表中保持清晰的层级和一致的样式。
- 移动端适配: 确保列表在不同屏幕尺寸的设备上都能良好地显示和交互。
- 自定义列表标记: 虽然 CSS 提供了
list-style-image或伪元素 (::before) 等方式来使用自定义图片作为标记，但实现跨浏览器和跨设备的一致性可能需要额外工作。
总结 (Conclusion)
HTML 列表标签 <ul>、<ol> 和 <dl> 是 Web 开发中用于组织和呈现列表内容的基础工具。<ul> 用于无序列表，<ol> 用于有序列表，而 <dl> 用于术语和定义的列表。它们提供了清晰的语义结构，有助于提高网页的可读性、SEO 和无障碍性。
通过简单的结构和少量属性，您可以轻松创建各种类型的列表，并通过在 <li> 或 <dd> 中嵌套其他列表来构建复杂的层级。虽然列表的默认样式由浏览器决定，但您可以通过 CSS 灵活地控制列表标记、缩进、方向等几乎所有方面。正确使用和理解这些基础的 HTML 标签，是编写高质量 Web 内容的关键一步。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）