Learn HTML & CSS列表
网页上有相当多的内容其实都是列表：导航菜单、搜索结果、商品网格、菜谱里的食材、重置密码的步骤。每当内容是一组相关的条目时，HTML 都有对应的元素来表达这一点，用上它，浏览器以及借助辅助软件阅读页面的人，就都能知道这些条目是归在一起的。
无序列表
当条目的顺序无关紧要时，你用**无序列表**。想想购物清单：牛奶、面包、鸡蛋。先写哪一个都无所谓，它们只是归在一起的一堆东西。
构建它要用到两个标签。<ul> 标签包住整个列表，每个条目放在自己的 <li> 标签里（"list item"，意思是"列表项"）：
<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> 里面"的规则，是这里唯一要记住的事。