【H5 前端开发笔记】第 08 期：HTML常用标签 (4) —— 列表标签详解
（2026 最新版 · 实战笔记 · 可直接作为学习笔记）
本期我们重点学习 HTML 中三种列表标签，它们是构建导航、文章目录、商品规格、FAQ 等内容的重要工具。
一、列表标签总览
| 标签 | 名称 | 语义含义 | 默认样式 | 主要用途 |
|---|---|---|---|---|
ul | 无序列表 | Unordered List | 实心圆点 | 导航、菜单、并列内容 |
ol | 有序列表 | Ordered List | 数字序号 | 步骤、排行、流程 |
li | 列表项 | List Item | – | ul 和 ol 的子元素 |
dl | 定义/描述列表 | Description List | 无项目符号 | 术语解释、名词解释、FAQ、商品参数 |
dt | 定义术语 | Definition Term | 粗体 | 定义名词 |
dd | 定义描述 | Definition Description | 缩进 | 对名词的解释或描述 |
二、无序列表 <ul> + <li>
1. 基本写法
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>葡萄</li>
</ul>
2. 常用场景与推荐写法（2026）
<!-- 1. 导航菜单（最常用） -->
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">解决方案</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<!-- 2. 功能特性列表 -->
<ul>
<li>支持 5G 网络</li>
<li>高通骁龙 8 Gen 3 处理器</li>
<li>5000mAh 大电池</li>
<li>徕卡专业影像系统</li>
</ul>
注意：<li> 只能作为 <ul> 或 <ol> 的直接子元素。
三、有序列表 <ol> + <li>
1. 基本写法
<ol>
<li>打开冰箱</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
2. 常用属性（2026 推荐）
| 属性 | 含义 | 示例 |
|---|---|---|
type | 序号类型 | type="1" type="a" type="A" type="i" type="I" |
start | 开始序号 | start="5" |
reversed | 倒序排列 | reversed |
<!-- 步骤类列表（强烈推荐） -->
<ol>
<li>注册账号</li>
<li>完善个人信息</li>
<li>上传身份证</li>
<li>等待审核</li>
</ol>
<!-- 自定义序号类型 -->
<ol type="A" start="3">
<li>第一步</li>
<li>第二步</li>
</ol>
四、自定义列表（定义列表）<dl> + <dt> + <dd>
这是很多人容易忽视但非常实用的列表类型，常用于名词解释、参数表、FAQ。
1. 基本结构
<dl>
<dt>名词</dt>
<dd>对这个名词的解释或描述</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language，超文本标记语言</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets，层叠样式表</dd>
</dl>
2. 实战应用示例
<!-- 商品参数表（强烈推荐写法） -->
<dl class="product-spec">
<dt>屏幕尺寸</dt>
<dd>6.78 英寸</dd>
<dt>处理器</dt>
<dd>高通骁龙 8 Gen 3</dd>
<dt>电池容量</dt>
<dd>5500mAh</dd>
<dt>重量</dt>
<dd>约 205g</dd>
</dl>
<!-- FAQ 常见问题 -->
<dl class="faq">
<dt>如何退货？</dt>
<dd>登录账号进入“我的订单”，点击退货按钮即可。</dd>
<dt>支持分期付款吗？</dt>
<dd>支持花呗、信用卡、京东白条等多期分期。</dd>
</dl>
五、列表嵌套使用（进阶）
列表可以嵌套使用，常用于多级菜单或大纲：
<ul>
<li>前端开发
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>后端开发
<ul>
<li>Python</li>
<li>Java</li>
<li>Go</li>
</ul>
</li>
</ul>
六、本期练习（建议全部手写一遍）
- 写一个网站顶部导航菜单（使用
ul + li + a） - 写一个“学习步骤”有序列表（1. 安装环境 → 2. 学习 HTML → …）
- 写一个手机参数规格表（使用
dl + dt + dd） - 实现一个 FAQ 常见问题列表（至少 4 组）
- 练习列表嵌套（二级菜单）
七、笔记总结（重点记忆）
- 无序列表
<ul>：并列关系、无先后顺序，默认实心圆点 - 有序列表
<ol>：有先后顺序，默认数字序号，可通过type、start修改 - 定义列表
<dl>：由<dt>（术语）和<dd>（描述）组成，适合参数、FAQ - 所有列表项都使用
<li>（ul、ol）或<dd>（dl） - 语义化使用列表，能让页面结构更清晰，对 SEO 和屏幕阅读器友好
第 09 期预告：《HTML 常用标签 (5) —— 表格标签（table、tr、th、td、thead、tbody、tfoot、caption）详解》
需要我立即补充以下任意内容，请直接回复：
- 本期完整可运行的综合示例（导航 + 步骤 + 参数表 + FAQ）
- 列表样式重置的 CSS 代码（去掉默认圆点和序号）
- 第 01~08 期笔记合并成一份完整 HTML 基础笔记文档
- 本期练习的标准参考答案
继续加油！第 08 期笔记到此结束，你的 HTML 列表标签已经掌握得很扎实了！✨
