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 标签的速查指南
