大家好，我是[小奇腾]。欢迎来到 “幼儿园前端” 第 6 集！ 经过前几集的学习，我们已经能搭出网页的骨架了。但是，如果你的网页里全是密密麻麻的文字段落，用户看着会很累。 怎么让信息变得条理清晰？答案就是：列清单。 不管是淘宝的商品列表、还是做菜的步骤，都离不开 HTML 里的两个神器：
ul和ol。今天我们就来搞懂它们！
本期详细的视频教程bilibili：幼儿园前端 #06：列表标签 ul/ol —— 别只会写“流水账”，来列个清单吧
一、 为什么要用列表？
假如你家人要你去买东西，然后他是这样你说的：“去买点苹果然后买点香蕉对了还要买一瓶酱油别忘了买个西瓜……” （看着头晕，容易漏买）
如果他给你发的是这样呢？
- 苹果
- 香蕉
- 酱油
- 西瓜
是不是一目了然
在 HTML 里，我们有两种最常用的列表：无序列表 和 有序列表。
二、 ul —— 无序列表 (Unordered List)
- 代码演示
<h3>我的周末计划（无序）</h3>
<ul>
<li>睡懒觉</li>
<li>打游戏</li>
<li>吃火锅</li>
</ul>
- 语法结构
ul：爸爸（表示这是一个无序列表）li>：儿子（List Item，表示具体的每一项）。
- 看浏览器效果
默认情况下，浏览器会在每一项前面加一个 小黑圆点 (●) 。
三、 ol —— 有序列表 (Ordered List)
场景：顺序非常重要，不能颠倒。比如：菜谱步骤、排行榜、安装教程。
- 代码演示
<h3>把大象装进冰箱的步骤（有序）</h3>
<ol>
<li>把冰箱门打开</li>
<li>把大象塞进去</li>
<li>把冰箱门关上</li>
</ol>
- 语法结构
<ol>：爸爸（表示这是一个有序列表）。<li>：儿子（List Item，还是表示每一项）。
- 浏览器效果
浏览器会自动给每一项加上 数字序号。
- 把冰箱门打开
- 把大象塞进去
- 把冰箱门关上
神奇之处：如果你在中间插入一行，浏览器会自动重新排序（比如把 2 变成 3），完全不用你手动改数字！
四、 🚫 新手严禁犯的错：乱认爸爸
这是一个 90% 的新手都会犯的语法错误。
<ul> 和 <ol> 的直接子元素，只能是 <li>！ 你不能把 <p>、<div> 或者文字直接写在 <ul> 里面。
<ul>
<li><p>苹果</p></li>
<li>香蕉</li>
</ul>
五、 进阶：列表套娃（嵌套列表）
- 代码演示
<ul>
<li>
水果
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</li>
<li>
蔬菜
<ul>
<li>白菜</li>
<li>萝卜</li>
</ul>
</li>
</ul>
- 浏览器效果
六、 为什么大家都不用 ol？
例如淘宝、京东网页，基本用的ul标签，因为ol的标签自带的数字，很难自定义样式。所以他们实际开发中会用ul然后结合css（装饰）来画更漂亮的数字标
但在 HTML 阶段，请记住：有顺序就用 ol，没顺序就用 ul，这才是语义化！
