HTML 里只有 3 种列表标签。它们的作用主要是告诉浏览器和机器这些数据是什么关系。
1. 无序列表 <ul>：并列关系
这玩意是干嘛的：
当一组数据完全不分先后顺序时使用。比如导航菜单、商品标签。
怎么写：
用 <ul> (Unordered List) 划定区域，数据必须包裹在 <li> (List Item) 中。
<!– 导航菜单 –>
<ul>
<li>首页</li>
<li>关于我们</li>
<li>联系邮箱</li>
</ul>
效果：
核心定律：只要元素的顺序打乱也不影响对整体内容的理解，就应该用 <ul>。
2. 有序列表 <ol>：步骤与排名
这玩意是干嘛的：
当且仅当数据必须按照特定顺序展示时使用。比如操作步骤、排行榜。
怎么写：
用 <ol> (Ordered List) 划定区域，数据依旧包裹在 <li> 中。
<!– 操作步骤 –>
<ol>
<li>点击右上角登录</li>
<li>输入验证码</li>
<li>完成绑定</li>
</ol>
效果：
3. 描述列表 <dl>：键值对映射
这玩意是干嘛的：
专门用来展示术语 + 解释的问答关系。实际业务中常用于 FAQ 详情解答或电商商品参数说明。
怎么写：
这需要一套组合拳标签。
- <dl> (Description List)：声明描述区域。
- <dt> (Term)：你要解释的术语。
- <dd> (Definition)：对术语的具体解释文字。
<!– 商品参数 –>
<dl>
<dt>保质期</dt>
<dd>冷藏保存1个月</dd>
<dd>冷冻保存6个月</dd> <!– 一个术语可以对应多条解释 –>
</dl>
效果：
常见错误：浏览器默认会给 <dd> 加上视觉缩进效果。绝不要为了白嫖这个缩排效果去滥用 <dl>。样式排版交给 CSS，标签只负责数据关系。
4. 嵌套列表：层级结构
当列表的某一项内容里还需要包含次级列表时，必须遵守唯一的嵌套规则：子组件列表必须完整包裹在一个父级 <li> 标签内部。
<ul>
<li>前端语言
<!– 正确做法：子列表完整包裹在 li 内部 –>
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
</li>
<li>后端语言</li>
</ul>
效果：
常见错误：千万不能在 <ul> 里直接塞入一个 <ol> 或另一个 <ul>，<ul> 和 <ol> 的直接子元素只能且必须是 <li>。
总结：
- <ul> = 无序并列（打乱顺序也不影响理解，如导航栏、商品平铺）
- <ol> = 有序步骤（必须按先后排布，如排行榜、操作步骤）
- <dl> = 键值对映射（解释名词短语、Q&A问答，必须配合 dt 和 dd）
- 铁律：<ul> 和 <ol> 的直接儿子只能且必须是 <li>！
➡️ 下期预告：
掌握了列表的“结构语义”后，如果你遇到需要特殊排版的文字片段，该怎么办呢？
比如化学公式的上下标、界面快捷键按键提示、名人的大段引用语……遇到这些场景怎样写才能既少写冗余 CSS，又能让搜索引擎精准抓取？
请看下一章👉 【大白话前端 08】HTML 文本语义化：6 类非 div 标签的速查指南
