第十五章 列表

在日常中，我们经常会写各种列表，但是很少意识到他是一个单独的类型。在网页里，毕竟它不是一个段落，我们要用我们的标记来把它说清楚。

早晨起来，妈妈叫我帮她去买菜，那我得把要买的东西记下来，这叫做购物清单：

• 土豆
• 胡萝卜
• 牛肉

看起来晚饭是要吃咖喱了（假装自己是蜡笔小新，这很美味~不过我们也别光顾着吃，来说一下怎么写列表吧。

第一步，先要标记从哪里到哪里，是一个列表。

<ul><!-- 我宣布这里面就是列表的内容了 --></ul>

这样做标记我们已经非常熟悉了，现在我们来写里面的项目：

<ul><li>土豆</li><li>胡萝卜</li><li>牛肉</li></ul>

这样我们就写出了文章最开始的那种列表。不用解释，你也可以知道，用 <li></li> 标签标记起来的内容就是列表的一个项目，我们叫做列表项。可能有的同学会说，不就一行一个吗，无论是用换行还是用段落都可以做到的事情，为什么又要新弄出来一个标签呢？

因为我们现在演示，是用的最简单的情况，其实列表项里面可以放比较复杂的内容，比如多个段落，虽然这么写不太好看吧。那么我来说一种非常常用的情况，就是列表的嵌套。关于嵌套的问题，我们在 第十章 一些细节（二） 中提到过一些，总之就是像俄罗斯套娃一样，一层一层套下去，事实上，到现在我们也写了很多次。列表的嵌套呢，也是一样的，列表中的某一个项目还细分为许多小项，那我们就在这个项目里再放上一个列表好了，来看一下下面的例子：

<ul><li>土豆</li><li>胡萝卜</li><li>牛肉</li><li>调味料<ul><li>咖喱粉</li><li>盐</li></ul></li></ul>

我们对调味料部分进行了细分，其实就是在里面又放入了一个列表。显示效果如下：

• 土豆
• 胡萝卜
• 牛肉
• 调味料
  • 咖喱粉
  • 盐

让人感到十分舒适，容易理解。而代码中，你只要理解一层套一层的层级关系，就没有问题。注意写好代码的缩进，这让你更方便对应代码间的层级关系；在必要的时候，我们还可以加上一定的注释，方便自己对代码的阅读。

大家思考一下，我们上面的列表，对于顺序有要求吗？购物的时候，并不一定按照这个列表的顺序进行购买，而是进入超市之后，先看到哪一个就买哪一个。所以这个列表的顺序并不重要，我们叫它无序列表。还有一种情况，我们的列表的顺序要求非常高，比如现在食材已经买回来了，我们要开始做饭了（并不会做……），做饭的操作就讲先后顺序了，随意乱放就成了黑暗料理，所以菜谱里边的列表，都是标着 123 的，这样的列表又怎么写呢？特别简单，只要把上面的列表改一个字母（其实是两处）就可以：

<ol><li>把锅放在灶上</li><li>锅里放上油</li><li>把油烧热</li><li>放入葱花</li><li>……</li><ol/>

所以只要把 ul 换成 ol，就从无序列表变成了有序列表，效果如下：

1. 把锅放在灶上
2. 锅里放上油
3. 把油烧热
4. 放入葱花
5. ……

所以今天我们只是用到了三个只有两个字母长的单词，请问哪位同学记不住？