HTML列表标签学习博客：有序列表、无序列表、自定义列表详解

一、什么是HTML列表？

在网页开发中，我们经常需要展示一组具有一定关系的数据，例如：

  • 新闻列表

  • 商品分类

  • 网站导航

  • 菜单

  • 文章目录

  • 课程章节

如果直接使用大量文字堆叠，结构会非常混乱。

HTML提供了专门的列表标签（List），用于将相关内容按照一定格式排列。

HTML中的列表主要分为三种：

  1. 无序列表（unordered list）

  2. 有序列表（ordered list）

  3. 自定义列表（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 ● JavaScript

4. 无序列表实际应用

网站导航栏

例如：

<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>

表示：

标题：

HTML

4. 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 用于解释说明类内容。