# HTML5教程 - 8 列表
是不是学到这里，感觉什么都做不了，连一个正式的页面也没写，不知道如何下手？
不要着急，在学习CSS之前，基本是做不了正式的页面的，做出来也是很丑的页面，所以还是继续学习页面中的各个元素，最终通过这些元素构成页面。
什么是列表
比如我们去超时买很多东西，会写一个购物清单，上面列出了要买的商品，就是一个列表，列表中是一项一项的条目。
在 HTML 中，列表分为 3 种：无序列表、有序列表、定义列表。
# 8.1 无序列表
无序列表，使用 <ul> 标签来创建无序列表，使用 <li> 表示列表项。
代码如下：
<body>
<ul>
<li>牛奶</li>
<li>面包</li>
<li>鸡蛋</li>
</ul>
</body>
2
3
4
5
6
7
效果：
可以看出显示为一个列表，但是看上去有个特点，就是 丑。
无序列表是三个类型的列表中用的最多的，在网页中，一般导航栏都会使用无序列表来进行构建，包括横向导航栏和纵向导航栏。
那你会问，上面的列表明明是纵向的，横向导航栏如何使用列表构建呢？
这些都是由CSS来控制的，包括上面列表前面显示了一个“点”，都是可以通过CSS去掉的，所以现在不用在意列表的样式。
# 8.2 有序列表
有序列表，使用 <ol> 标签来创建有序列表，使用 <li> 表示列表项。
代码如下：
<body>
<ol>
<li>牛奶</li>
<li>面包</li>
<li>鸡蛋</li>
</ol>
</body>
2
3
4
5
6
7
效果如下：
可以看到有序列表的每个列表项前会有编号。
但其实我们在实际的开发中，有序列表和无序列表可以无差别使用，因为我们会使用CSS将无序列号和有序列表前面的“点”和“编号”去掉，一是因为很丑，另外这些样式在不同的浏览器显示会有差异，去掉“点”和“编号”，这样有序列表和无序列表就基本相同的。
# 8.3 定义列表
定义列表，定义列表除了列表中的每一个列表项，还包括对列表项的注释。
使用 <dl> 标签来创建定义列表，使用 <dt> 表示定义的内容，使用 <dd> 来对内容进行解释说明。
代码如下：
<body>
<dl>
<dt>牛奶</dt>
<dd>牛产的奶，叫牛奶</dd>
<dt>面包</dt>
<dd>面做的包，叫面包</dd>
<dt>鸡蛋</dt>
<dd>鸡下的蛋，叫鸡蛋</dd>
</dl>
</body>
2
3
4
5
6
7
8
9
10
11
12
效果如下：
总体而言，定义列表用的不多。
# 8.4 列表的嵌套
列表是可以嵌套的，就是在一个列表的列表项中，可以嵌套其他列表。
例如，下面在无序列表中嵌套了一个有序列表，代码如下：
<body>
<ul>
<li>牛奶</li>
<li>
面包
<ol>
<li>肉松面包</li>
<li>牛奶面包</li>
<li>火腿面包</li>
</ol>
</li>
<li>鸡蛋</li>
</ul>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
显示如下：
总结：最常用的是无序列表，一般用来构建菜单。