HTML列表标签学习博客：有序列表、无序列表、自定义列表详解
一、什么是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 用于解释说明类内容。