第09篇：列表三种形态

第09篇：列表三种形态

列表是网页中最常用的信息组织方式之一。HTML 提供了三种列表类型，分别适用于不同的场景。掌握它们，让你的内容结构清晰、层次分明。

学习目标

• 掌握无序列表ul、有序列表ol、定义列表dl的用法
• 学会嵌套列表构建层级结构
• 理解ol的type、start、reversed属性
• 能够根据内容语义选择正确的列表类型
• 了解列表的默认样式及语义化注意事项

核心知识点

一、无序列表：ul+li

无序列表（Unordered List）用于表示无顺序关系的项目集合，每个项目前有一个默认的项目符号（通常是圆点）。

<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>

默认渲染效果

• HTML • CSS • JavaScript

ul的适用场景

• 导航菜单项
• 功能特性列表
• 商品规格项
• 任何不强调顺序的项目集合

二、有序列表：ol+li

有序列表（Ordered List）用于表示有顺序关系的项目集合，每个项目前有数字或字母编号。

<ol><li>准备食材</li><li>清洗处理</li><li>烹饪加工</li><li>装盘上桌</li></ol>

默认渲染效果

1. 准备食材 2. 清洗处理 3. 烹饪加工 4. 装盘上桌

ol的专属属性

<!-- 大写字母编号 --><oltype="A"><li>选项一</li><li>选项二</li></ol><!-- 从第 5 项开始 --><olstart="5"><li>第五条</li><li>第六条</li></ol><!-- 倒序排列 --><olreversed><li>第一名</li><li>第二名</li><li>第三名</li></ol>

type取值

⚠️注意：虽然type属性可以控制编号样式，但现代前端开发更推荐使用CSSlist-style-type来控制视觉效果，HTML 的type仅作为语义补充。

三、定义列表：dl+dt+dd

定义列表（Definition List）用于表示术语-定义的键值对关系。

<dl><dt>HTML</dt><dd>超文本标记语言，用于创建网页的标准语言。</dd><dt>CSS</dt><dd>层叠样式表，用于描述网页的外观和格式。</dd><dt>JavaScript</dt><dd>一种脚本语言，用于实现网页的交互和动态效果。</dd></dl>

默认渲染效果

HTML 超文本标记语言，用于创建网页的标准语言。 CSS 层叠样式表，用于描述网页的外观和格式。 JavaScript 一种脚本语言，用于实现网页的交互和动态效果。

dl的组成

dl的适用场景

• 术语表 / 词汇表
• 元数据展示（作者、日期、分类）
• FAQ（问题-答案）
• 产品参数（属性-值）

<!-- FAQ 示例 --><dl><dt>什么是 HTML？</dt><dd>HTML 是超文本标记语言，是网页的骨架。</dd><dt>学习 HTML 需要什么基础？</dt><dd>不需要编程基础，只需要一台电脑和一颗好奇的心。</dd></dl>

一个dt可以对应多个dd

<dl><dt>作者</dt><dd>张三</dd><dd>李四</dd><dd>王五</dd></dl>

四、嵌套列表

列表可以嵌套在其他列表项中，构建层级结构。

<ul><li>前端开发<ul><li>HTML</li><li>CSS<ul><li>Flexbox</li><li>Grid</li></ul></li><li>JavaScript</li></ul></li><li>后端开发<ul><li>Node.js</li><li>Python</li></ul></li></ul>

嵌套列表的注意事项

• 嵌套的列表必须是外层li的子元素
• 嵌套列表通常会有不同的缩进和项目符号样式
• ul里可以嵌套ol，ol里也可以嵌套ul

<!-- ✅ 正确：嵌套列表在 li 内部 --><ul><li>水果<ul><li>苹果</li><li>香蕉</li></ul></li></ul><!-- ❌ 错误：嵌套列表在 li 外面 --><ul><li>水果</li><ul><li>苹果</li></ul></ul>

五、三种列表选择指南

要展示一组项目？ │ ├── 有明确的顺序/排名？ │ └── → ol（有序列表） │ 步骤说明、排行榜、操作顺序 │ ├── 是术语-定义的关系？ │ └── → dl（定义列表） │ 词汇表、FAQ、产品参数、元数据 │ └── 无顺序，只是项目集合？ └── → ul（无序列表） 导航菜单、功能列表、商品特性

选择对比示例

六、列表的默认样式与 CSS

浏览器默认样式

/* ul 默认样式 */ul{list-style-type:disc;/* 实心圆点 */padding-left:40px;/* 左侧缩进 */}/* ol 默认样式 */ol{list-style-type:decimal;/* 阿拉伯数字 */padding-left:40px;}/* dl 默认样式 */dl{margin:1em 0;}dd{margin-left:40px;/* dd 默认有左缩进 */}

常见 CSS 列表样式（了解即可）

/* 去掉列表符号 */ul{list-style:none;padding:0;}/* 改变符号样式 */ul{list-style-type:square;/* 方块 *//* 其他：circle（空心圆）、disc（实心圆，默认） */}

💡 第15篇会详细学习 HTML5 语义化导航，其中nav包裹的ul是最常见的导航结构。

动手练习

练习 1：列表类型辨析

判断以下场景应该用哪种列表，并说明理由：

练习 2：制作目录结构

用嵌套列表展示你的电脑桌面文件夹结构：

• 使用无序列表ul
• 至少包含 3 层嵌套
• 包含文件夹和文件两种类型
• 合理命名，结构清晰

练习 3：创建食谱页面

创建一个食谱页面，综合运用三种列表：

• 用ol展示制作步骤（有顺序）
• 用ul展示所需食材（无顺序）
• 用dl展示营养信息（术语-定义）
• 每个列表至少包含 5 项
• 整体结构用h1（食谱名）+h2（各区块标题）组织

常见误区 ⚠️

速查卡片 📋

三种列表对比

列表选择速查

有顺序？ → ol 键值对？ → dl 其他 → ul

ol属性速查

嵌套列表结构

<ul><li>父级项<ul><!-- 嵌套列表必须在 li 内部 --><li>子级项</li></ul></li></ul>

dl多对多关系

<dl><dt>术语A</dt><dd>定义1</dd><dd>定义2</dd><!-- 一个 dt 对应多个 dd --><dt>术语B</dt><dt>术语C</dt><!-- 多个 dt 对应一个 dd --><dd>共同定义</dd></dl>

列表使用 checklist

• 根据内容语义选择ul/ol/dl
• 嵌套列表放在li内部
• 不要仅用列表符号做装饰，语义优先
• dl考虑用于 FAQ、产品参数、元数据等场景

扩展阅读

• MDN:
  • 元素
• MDN:
  1. 元素
• MDN:

  元素

• MDN:
• 元素

📌下一步：列表组织了信息的层级。进入 第10篇：表格基础与结构，学习用表格展示二维数据。