一、什么是HTML列表？
在网页开发中，我们经常需要展示一组具有一定关系的数据，例如：
-
新闻列表
-
商品分类
-
网站导航
-
菜单
-
文章目录
-
课程章节
如果直接使用大量文字堆叠，结构会非常混乱。
HTML提供了专门的列表标签（List），用于将相关内容按照一定格式排列。
HTML中的列表主要分为三种：
-
无序列表（unordered list）
-
有序列表（ordered list）
-
自定义列表（description list）
一、无序列表 <ul>
1. 什么是无序列表？
无序列表表示：
列表中的每一项没有先后顺序关系。
例如：
-
苹果
-
香蕉
-
橘子
这些水果没有排名关系，只是一组数据。
HTML中使用：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>效果：
● 苹果
● 香蕉
● 橘子2. ul标签介绍
ul 是：
unordered list意思：
无序列表
它负责定义一个列表区域。
例如：
<ul>
</ul>但是：
注意！
ul里面不能直接写文字：
错误：
<ul>
苹果
香蕉
橘子
</ul>正确：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>3. li标签介绍
li：
list item意思：
列表项
每一个列表内容都需要放在li里面。
例如：
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>表示：
● HTML
● CSS
● JavaScript4. 无序列表实际应用
网站导航栏
例如：
<ul>
<li>首页</li>
<li>新闻</li>
<li>课程</li>
<li>联系我们</li>
</ul>效果：
● 首页
● 新闻
● 课程
● 联系我们实际开发中：
导航栏几乎都是使用：
ul + li然后通过CSS去掉小圆点，设置横向排列。
二、有序列表 <ol>
1. 什么是有序列表？
有序列表表示：
列表中的内容具有明确的先后顺序。
例如：
考试排名：
1. 张三
2. 李四
3. 王五HTML：
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>显示：
1. 张三
2. 李四
3. 王五2. ol标签介绍
ol：
ordered list意思：
有序列表
基本结构：
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>浏览器会自动添加编号。
3. ol常用属性
type属性
可以改变编号类型。
默认：
<ol type="1">显示：
1.
2.
3.使用字母编号
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>显示：
A. HTML
B. CSS
C. JavaScript小写字母：
<ol type="a">显示：
a.
b.
c.罗马数字：
<ol type="I">显示：
Ⅰ.
Ⅱ.
Ⅲ.4. start属性
可以设置开始编号。
例如：
<ol start="5">
<li>第五章</li>
<li>第六章</li>
</ol>效果：
5. 第五章
6. 第六章三、自定义列表 <dl>
1. 什么是自定义列表？
自定义列表用于：
一个标题对应多个描述内容。
常用于：
-
网站底部信息
-
商品介绍
-
名词解释
-
FAQ问题列表
例如：
HTML
超文本标记语言
用于创建网页结构HTML：
<dl>
<dt>HTML</dt>
<dd>
超文本标记语言
</dd>
<dd>
用于创建网页结构
</dd>
</dl>效果：
HTML
超文本标记语言
用于创建网页结构2. dl标签
dl
全称：
description list意思：
自定义列表
负责包裹整个列表。
结构：
<dl>
</dl>3. dt标签
dt
全称：
description term意思：
定义标题
例如：
<dt>HTML</dt>表示：
标题：
HTML4. dd标签
dd
全称：
description details意思：
描述内容
例如：
<dd>
网页结构语言
</dd>完整案例：
<!DOCTYPE html>
<html>
<head>
<title>列表学习</title>
</head>
<body>
<h2>无序列表</h2>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>打开电脑</li>
<li>启动VS Code</li>
<li>编写HTML</li>
</ol>
<h2>自定义列表</h2>
<dl>
<dt>HTML</dt>
<dd>
超文本标记语言
</dd>
<dd>
用于制作网页结构
</dd>
<dt>CSS</dt>
<dd>
层叠样式表
</dd>
</dl>
</body>
</html>四、三种列表区别总结
| 类型 | 标签 | 特点 | 应用场景 |
|---|---|---|---|
| 无序列表 | ul |
没有顺序，小圆点显示 | 导航栏、新闻列表 |
| 有序列表 | ol |
有数字顺序 | 排行榜、步骤说明 |
| 自定义列表 | dl |
标题+描述 | 商品介绍、术语解释 |
五、实际开发中的使用频率
前端开发中：
最高频：
⭐ 无序列表 ul
例如：
-
导航栏
-
新闻列表
-
商品列表
使用：
<ul>
<li></li>
</ul>中等频率：
有序列表 ol
例如：
-
注册步骤
-
教程流程
-
排名
较少：
自定义列表 dl
例如：
-
网站底部链接
-
产品参数
-
问答模块
六、前端开发规范
推荐写法：
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>不要：
<ul>
<div>内容1</div>
<div>内容2</div>
</ul>因为：
ul 的直接子元素应该是 li。
七、总结
HTML列表标签是网页结构中非常重要的一部分。
核心记忆：
无序列表：
ul + li
有序列表：
ol + li
自定义列表：
dl + dt + dd实际开发中：
ul 使用最多，ol 用于有明确步骤的内容，dl 用于解释说明类内容。