列表
网页中出人意料的大部分内容其实都是列表：导航菜单、搜索结果、产品网格、食谱的材料清单、重置密码的步骤。只要内容是一组相关项目，HTML 就有一个元素来表示这一点，使用它意味着浏览器和任何使用辅助软件的人都知道这些项目属于一起。
无序列表
当项目的顺序不重要时，你使用**无序列表**。想象一个购物清单：牛奶、面包、鸡蛋。你先写哪个都不重要，它们就是一组聚集在一起的东西。
你用两个标签来构建它。<ul> 标签包裹整个列表，每个项目放在它自己的 <li> 标签内（"列表项"）：
<ul>
<li>牛奶</li>
<li>面包</li>
<li>鸡蛋</li>
</ul>浏览器在每个项目前面显示一个项目符号，每个项目单独占一行。你没有自己添加项目符号或换行符，浏览器这样做是因为你告诉它这是一个列表。
<ul>，并将每个项目包裹在它自己的 <li> 中。浏览器为你添加项目符号和换行符，所以你永远不需要手动输入那些。我花了一段时间才相信这一点，我总是想自己添加点。 有序列表及其属性
有时顺序是关键。食谱中的步骤、比赛中的位置、你依次遵循的说明。对于这些，你使用**有序列表**，它为你编号项目。
它的工作方式完全像无序列表，但容器是 <ol> 而不是 <ul>：
<ol>
<li>将烤箱预热到 180°C</li>
<li>混合面粉和糖</li>
<li>倒入锡盒中，烘烤 25 分钟</li>
</ol>现在浏览器在项目前面显示 1、2、3 而不是项目符号。如果你稍后在中间添加一个新步骤，数字会自动重新编号。你永远不需要输入数字，这就是使用 <ol> 的意义。
<ol>，浏览器为你编号项目。添加或删除一个步骤，数字会自动修复，所以你永远不需要手动输入 1. 或 2.。与之前相同的 <li> 项目，只是不同的容器。 描述列表
有第三种列表类型，用于当每个项目真的是一对时：一个词和它的意思，一个标签和它的值。词汇表是最清楚的例子，每个术语后面跟着它的含义。
这是一个**描述列表**，它使用三个标签。<dl> 包裹整个东西，<dt> 保存每个术语，<dd> 保存与其相关的描述：
<dl>
<dt>HTML</dt>
<dd>描述页面结构的语言。</dd>
<dt>CSS</dt>
<dd>描述页面外观的语言。</dd>
</dl>浏览器在每个术语下面缩进显示每个描述，所以配对一目了然。把 "dt" 想象为你定义的词，把 "dd" 想象为定义。
<dl>，对每个术语使用 <dt>，对其后的描述使用 <dd>。词汇表是你要记住的图片，术语然后定义，术语然后定义。 嵌套列表
列表可以放在其他列表中。一个菜单可能有 "饮料" 下面有热和冷的选项，每一个都有它自己的选择。把一个列表放在另一个列表中称为**嵌套**。
要点是要做对：内部列表放在 <li> 内，不是浮动在项目之间。你把整个 <ul>（或 <ol>）放在它属于的列表项中：
<ul>
<li>饮料
<ul>
<li>咖啡</li>
<li>茶</li>
</ul>
</li>
<li>零食</li>
</ul>"咖啡" 和 "茶" 是 "饮料" 的一部分，所以它们的小列表存在于 "饮料" 项中。浏览器缩进内部列表，所以你可以看到它属于上面的项目。
<li> 中，而不是松散地放在项目之间。浏览器缩进它，所以你可以看到它是上面项目的一部分。那个在 <li> 中的规则是这里要记住的唯一东西。