列表
列表是 HTML 中组织内容的基础结构，能让信息层次分明、易于阅读。HTML 提供了三种列表类型：无序列表、有序列表和描述列表，分别适用于不同的场景。
本文你会学到：
🎯 掌握三种 HTML 列表类型的语法与语义
🔧 了解 ol 的 reversed、start、type 等实用属性
🧱 学会列表的嵌套写法与注意事项
📊 根据内容特点选择最合适的列表类型
📋 列表类型概览
三种列表各有分工，下表帮助你快速建立整体认知：
类型
标签
默认样式
适用场景
类比
无序列表
ul + li圆点标记
项目之间没有先后顺序
购物清单
有序列表
ol + li数字编号
项目之间存在明确的顺序
菜谱步骤
描述列表
dl + dt + dd无标记，缩进排列
术语解释、键值对
词典词条
核心原则：列表的语义比样式更重要。不要因为「想要圆点」就用 ul——如果内容有明确的先后顺序，应该用 ol。
🔘 无序列表
无序列表（Unordered List）表示各项内容之间没有先后顺序，浏览器默认在每个 li 前显示一个圆点（•）。
ul 与 li
ul（Unordered List）是列表容器，li（List Item）是列表中的每一项。一个 ul 中可以包含任意数量的 li。
无序列表基本结构 <!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > 无序列表基本结构</ title >
</ head >
< body >
<!-- 无序列表基本结构：ul 容器 + li 列表项 -->
< ul >
< li > HTML</ li >
< li > CSS</ li >
< li > JavaScript</ li >
</ ul >
</ body >
</ html >
💡 ul 的子元素只能是 li（或脚本/模板元素）。不要在 ul 内直接放 div、p 等其他标签——如果需要更复杂的结构，把内容放在 li 内部。
li 内部可以包含其他元素 <!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > li 内部可以包含其他元素</ title >
</ head >
< body >
<!-- li 内部可以包含其他元素：strong、span 等行内标签 -->
< ul >
< li >
< strong > HTML</ strong > — 定义网页的结构和内容
</ li >
< li >
< strong > CSS</ strong > — 控制网页的样式和布局
</ li >
</ ul >
</ body >
</ html >
🔢 有序列表
有序列表（Ordered List）表示各项内容之间存在明确的顺序关系，浏览器默认在每个 li 前显示数字编号。
ol 与 li
ol（Ordered List）的用法与 ul 类似，只是容器标签不同：
有序列表基本结构 <!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > 有序列表基本结构</ title >
</ head >
< body >
<!-- 有序列表基本结构：ol 容器 + li 列表项 -->
< ol >
< li > 打开编辑器</ li >
< li > 编写 HTML 文件</ li >
< li > 在浏览器中打开预览</ li >
</ ol >
</ body >
</ html >
⚠️ 有序列表的编号是由浏览器自动生成的。如果用 CSS 去掉了默认样式，但内容本身有顺序语义，ol 仍然是正确的选择——语义不会因为样式的改变而消失。
有序列表的额外属性
MDN
ol 元素支持以下属性来控制编号行为，这些属性让有序列表更加灵活。
属性
说明
示例
reversed倒序编号（布尔属性，无需赋值）
<ol reversed>
start指定起始编号
<ol start="5">
type指定编号类型
<ol type="A">
type 属性支持的编号类型：
值
编号样式
示例
1（默认）阿拉伯数字
1, 2, 3
A大写字母
A, B, C
a小写字母
a, b, c
I大写罗马数字
I, II, III
i小写罗马数字
i, ii, iii
从第 5 步开始的有序列表 <!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > 从第 5 步开始的有序列表</ title >
</ head >
< body >
<!-- 从第 5 步开始的有序列表：使用 start 属性 -->
< p > 接续上文的操作步骤：</ p >
< ol start = "5" >
< li > 部署到测试环境</ li >
< li > 执行自动化测试</ li >
< li > 发布上线</ li >
</ ol >
</ body >
</ html >
使用 type 指定大写字母编号 <!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > 使用 type 指定大写字母编号</ title >
</ head >
< body >
<!-- 使用 type 指定大写字母编号 -->
< ol type = "A" >
< li > 方案一：自研框架</ li >
< li > 方案二：采用开源方案</ li >
< li > 方案三：混合方案</ li >
</ ol >
</ body >
</ html >
倒序列表 <!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > 倒序列表</ title >
</ head >
< body >
<!-- 倒序列表：使用 reversed 属性 -->
< p > 最新发布的版本：</ p >
< ol reversed >
< li > v3.2.0</ li >
< li > v3.1.0</ li >
< li > v3.0.0</ li >
</ ol >
</ body >
</ html >
💡 reversed + start 可以组合使用，例如 <ol reversed start="10"> 会从 10 倒数到 1。
📖 描述列表
描述列表（Description List）用于展示术语与描述的配对关系。它由三部分组成：
dl（Description List）— 列表容器dt（Description Term）— 术语 / 标题dd（Description Details）— 描述 / 内容
dl / dt / dd
描述列表基本结构 <!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > 描述列表基本结构</ title >
</ head >
< body >
<!-- 描述列表基本结构：dl 容器 + dt 术语 + dd 描述 -->
< dl >
< dt > HTML</ dt >
< dd > 超文本标记语言，用于定义网页的结构和内容。</ dd >
< dt > CSS</ dt >
< dd > 层叠样式表，用于控制网页的视觉表现。</ dd >
< dt > JavaScript</ dt >
< dd > 脚本语言，用于实现网页的交互行为。</ dd >
</ dl >
</ body >
</ html >
💡 一个 dt 可以对应多个 dd（一个术语有多个描述），多个 dt 也可以共用一个 dd（多个术语指向同一描述）。
一对多和多对一的描述列表 <!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > 一对多和多对一的描述列表</ title >
</ head >
< body >
<!-- 一对多和多对一的描述列表 -->
< dl >
<!-- 一个术语，多个描述 -->
< dt > cookie</ dt >
< dd > 一种小型文本文件，由服务器发送并存储在浏览器中。</ dd >
< dd > 也指一种 Unix 中的网络请求工具。</ dd >
<!-- 多个术语，一个描述 -->
< dt > JavaScript</ dt >
< dt > JS</ dt >
< dd > 一种动态脚本语言，广泛用于 Web 前端开发。</ dd >
</ dl >
</ body >
</ html >
⚠️ dl 的直接子元素只能是 dt 和 dd（以及脚本/模板元素）。不要在 dl 内直接嵌套其他标签。
🔗 列表嵌套
列表可以嵌套使用，即在 li 内部再放入一个完整的列表。嵌套时内层列表必须放在 li 标签内部，而不是 li 之间。
正确的嵌套写法 <!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > 正确的嵌套写法</ title >
</ head >
< body >
<!-- 正确的嵌套写法：内层列表放在 li 内部 -->
< ul >
< li > 前端
< ul >
< li > HTML</ li >
< li > CSS</ li >
< li > JavaScript</ li >
</ ul >
</ li >
< li > 后端
< ul >
< li > Java</ li >
< li > Python</ li >
< li > Go</ li >
</ ul >
</ li >
</ ul >
</ body >
</ html >
❌ 以下写法是错误的——内层 ul 放在了 li 的外面：
错误的嵌套写法——内层列表不在 li 内部 <!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > 错误的嵌套写法</ title >
</ head >
< body >
<!-- 错误的嵌套写法：内层列表不在 li 内部 -->
< ul >
< li > 前端</ li >
< ul > <!-- ❌ ul 不能作为 ul 的直接子元素 -->
< li > HTML</ li >
</ ul >
</ ul >
</ body >
</ html >
💡 不同类型的列表也可以互相嵌套，例如在 ol 中嵌套 ul 来展示步骤的细节：
有序列表中嵌套无序列表 <!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > 有序列表中嵌套无序列表</ title >
</ head >
< body >
<!-- 有序列表中嵌套无序列表 -->
< ol >
< li > 安装依赖
< ul >
< li > npm install react</ li >
< li > npm install react-dom</ li >
</ ul >
</ li >
< li > 创建组件</ li >
< li > 启动开发服务器</ li >
</ ol >
</ body >
</ html >
⚠️ 嵌套层级建议不超过 3 层。过深的嵌套不仅影响可读性，也会给屏幕阅读器用户带来导航困难。
📊 列表使用场景对比
MDN
选择列表类型时，关注的是内容的语义关系，而非视觉呈现。如果需要更改列表的标记样式，应通过 CSS 实现，而不是更换列表类型。
场景
推荐列表
原因
功能特性清单
ul各功能之间没有顺序关系
操作步骤 / 排行榜
ol顺序本身就是关键信息
术语表 / FAQ
dl术语和描述是一对一的映射关系
导航菜单
ul（嵌套）菜单项无先后顺序，嵌套表示层级
食谱步骤（含子步骤）
ol（嵌套 ul）外层有序，内层补充细节无序
📝 小结：三种列表的分工可以用一句话概括——无序看项目、有序看顺序、描述看配对 。在编写页面时，先问自己「这些内容之间是什么关系」，答案自然会指向合适的列表类型。