聊到 HTML 中的列表，我们还是以 Word 为例，在 Word 中你应该使用过列表，如下图：
无序列表：
有序列表：
而在 HTML 中，表示列表是通过元素来实现，也分为有序和无序，额外还支持自定义列表。
无序列表用于展示没有先后顺序、并列关系的内容，默认会在列表项前显示圆点（项目符号），可通过 CSS 修改符号样式。
核心标签：
<ul>：定义无序列表的容器，包裹所有列表项，是 unordered lists 的缩写 (无序列表)
<li>：定义单个列表项，必须嵌套在<ul>内部，不能单独使用，是 list item 的缩写 （列表项目）
简单示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h3>我的爱好（无序列表）</h3>
<ul>
<li>阅读</li>
<li>跑步</li>
<li>编程</li>
<li>看电影</li>
</ul>
</body>
</html>运行示例，效果如下图：
有序列表用于展示有先后顺序、逻辑递进的内容，默认会在列表项前显示阿拉伯数字（编号），可通过标签属性修改编号类型。
核心标签：
<ol>：定义有序列表的容器，包裹所有列表项，是 ordered lists 的缩写（有序列表）。
<li>：定义单个列表项，嵌套在<ol>内部。
<ol>标签常用属性：
type：指定编号类型，可选值：1（阿拉伯数字，默认）、a（小写字母）、A（大写字母）、i（小写罗马数字）、I（大写罗马数字）。
start：指定编号起始值，只能是数字（即使type是字母 / 罗马数字，也用数字设置起始）。
简单示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h3>编程学习步骤（有序列表）</h3>
<ol type="1" start="1">
<li>学习HTML/CSS</li>
<li>学习JavaScript</li>
<li>学习前端框架（如Vue/React）</li>
<li>做实战项目</li>
</ol>
<h3>考试成绩等级（有序列表-字母编号）</h3>
<ol type="A">
<li>优秀（90+）</li>
<li>良好（80-89）</li>
<li>合格（60-79）</li>
<li>不合格（<60）</li>
</ol>
</body>
</html>运行示例，效果如下图：
定义列表（也叫描述列表）用于展示 **“术语 - 解释”“标题 - 详情”** 对应的内容，没有项目符号或编号，常用于说明书、词条解释等场景。
核心标签：
<dl>：定义定义列表的容器，包裹<dt>和<dd>。
<dt>：定义被描述 / 被定义的术语（标题）。
<dd>：定义对<dt>的描述 / 解释（详情），默认会有缩进。
简单示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
/* 简单美化，让参数表更像电商页面（新手可先忽略） */
dl {
width: 400px;
border: 1px solid #eee;
padding: 15px;
}
dt {
font-weight: bold; /* 术语加粗，突出显示 */
margin-top: 10px;
}
dt:first-child {
margin-top: 0; /* 第一个术语取消顶部间距 */
}
dd {
margin-left: 25px;
color: #555;
}
</style>
</head>
<body>
<h3>智能手机参数详情</h3>
<dl>
<dt>屏幕尺寸</dt>
<dd>6.7英寸 OLED 全面屏</dd>
<dt>处理器</dt>
<dd>骁龙8 Gen3 旗舰处理器</dd>
<dt>电池容量</dt>
<dd>5000mAh 大容量电池</dd>
<dt>充电功能</dt>
<dd>80W 有线快充</dd>
<dd>50W 无线快充</dd>
</dl>
</body>
</html>运行示例，效果如下图：
注意：<dt> 和 <dd> 必须嵌套在 <dl> 内部，不能单独使用；也不能在 <dl> 中直接嵌套 <p>、<div> 等其他标签（这是 HTML 规范要求）。
关于更多HTML相关知识请学习后续教程……
川公网安备51010802032098