html 列表标签 ul ol dl

首先先来看个截图：

这种以列表形式来显示的内容在网页中称为列表，相信大家都经常见到，在Word里也有，很多文档编辑里也都有。在HTML中的列表则有三种类型：无序列表、有序列表、定义列表。

那么我们首先就要来理解列表。我们日常生活工作都是琐碎而没有条理的，而要想得到一个高效的友好的信息互通那么就要梳理信息，做好归类。这样才能有效传达信息。用列表把同类的内容进行简单的归纳，我认为这是列表的一个基本作用。常见的用途有：图书目录、饭店菜单、人员名单、待办事宜等等。而这些信息大多不是大篇的信息内容，而是简要的标题。当然列表的用途不是说只能是归纳标题信息，列表并没有去限制内容的多少。只是我们常用列表去归纳的多是些标题信息罢了。

无序列表
那么我们又如何去理解无序列表呢？无序的对应就是有序，从字面上去理解就很容易，有序就是说他本身就标明了前后顺序的，这是严格的，并且这些信息本身就有着顺序特性。比如我们写操作步骤那就就需要明确第一步第二步，这样的信息必然是有序的，而无序呢？也就是说其本身就是无序的没有任何顺序可言。这里要举个实例让大家思考一下：政府部门的领导名单前后顺序是他们最头疼的事，虽然他们有时会写着排名不分先后，但是实际上依然是有排名的，那么这里我想提出问题：这样的名单应用有序列表还是用无序列表呢？当然这个没有标准答案，各人都有各人的思考方式，那么你是怎么想的？不妨在评论上留下你的想法。这里我就不说我是怎么想的，希望大家能多动动脑筋，多思考。

无序列表的标签形式是：

1 2 3 4 5 6

<ul> <li>这就是列表的内容了</li> <li>这就是列表的内容了</li> <li>这就是列表的内容了</li> <li>这就是列表的内容了</li> </ul>

这里我们要注意到，无序列表有两个部分，一个是最外面的一个标签<ul></ul>，一个是里面的内容<li></li>。我们可以这样去理解，<li></li>是一个个标准化的小盒子，他们主要存放着列表信息，而<ul></ul>则是个大箱子，他的作用就是存放小盒子。这些一个个的小盒子只有放在大箱子里他们才不会弄丢了。整齐而有利于运输（移植）、存放（定位）。那么列表与段落一样可以有很多属性在其中，比如，我们可以为<ul></ul>设置一个id或是class或是title等属性，其特点功用与段落中的一样。而<li></li>也可以有这些属性，但是一般情况下来说列表即然是同类的一般也不作特殊化处理。

有序列表
信息有时候是无序归纳的，有的却有着明确的顺序，在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的：操作步骤、排行榜、书目录……以前我们面对这些有着顺序或是有数字注明排序的内容时大多是在数据前自行加上一个数值，或是由程序加上这个数值。而如果使用有序列表则不需要这么麻烦，根本不用自行去填写序数，当单层列表的时候这种特性似乎并不明显，而当使用多层的时候其特性就很明显了。那么还是先来了解一下有序列表的代码形式：

1 2 3 4 5 6 7

<ol> <li>这就是列表的内容了，这是第一句</li> <li>这就是列表的内容了，这是第二句</li> <li>这就是列表的内容了，这是第三句</li> <li>这就是列表的内容了，这是第四句</li> <li>这就是列表的内容了，这是第五句</li> </ol>

大家看到了其本形式与无序列表的一样，只是在外围标签上名称不同。无序是UL，有序就变成OL了。所不同的是有序列表将会有比无序更多的标签属性。因为是有序的就会涉及顺序的方方面面。

改变有序列表的开始值
通常情况下浏览器会从阿拉伯数字“1”开始自动有序编号。而事有特殊，当有序列表需要变成两个部分，那么下一部人从头开始编号自然就是不对的了。那么下一部分的编号自然是要根据上一段最后一个编号加1为开始号。这就是说我们需要改变列表的开始值。改变开始值的属性是：”start”，正式的写法是：

1 2 3 4 5 6 7

<ol start=”6″> <li>这就是列表的内容了，这是第一句</li> <li>这就是列表的内容了，这是第二句</li> <li>这就是列表的内容了，这是第三句</li> <li>这就是列表的内容了，这是第四句</li> <li>这就是列表的内容了，这是第五句</li> </ol>

大家可以自己试着测试一下，上面这段代码是说列表的开始值是从6开始的，那么现在可以试着在一段有序列表中加入这一属性看看是否发生了变化？

改变编号类型
浏览器中默认一般都是阿拉伯数字为列表编号，那么是否可以有别的类型呢？有，属性为“type”，不过提供的类型不多，只有五种：

类型值	生成样式	序列举例
A	大写字母	A、B、C、D、E
a	小写字母	a、b、c、c、e
I	大写罗马数字	I、II、III、IV、V
i	小写罗马数字	i、ii、iii、iv、v
1	阿拉伯数字	1、2、3、4、5

在代码中的写法应该是： 

1 2 3 4 5 6 7

<ol type=”A”> <li>这就是列表的内容了，这是第一句</li> <li>这就是列表的内容了，这是第二句</li> <li>这就是列表的内容了，这是第三句</li> <li>这就是列表的内容了，这是第四句</li> <li>这就是列表的内容了，这是第五句</li> </ol>

我认为这个类型值大家还是少用为好，因为用css一样可以设置这个类型。园子一向主张样式方面的事应由样式语言来做。那么除非特殊原因，这个属性还是不用为好。当然无论是CSS1还是CSS2基本上都没考虑中国，在CSS2中已经为提供了日文编号字符，可是还没有中文。我认为在这点上CSS2还是有着缺陷的，至少他没有提供更好的扩展形式。虽然他没提供，但是我们一样可以用我们自己的形式去完成多样化。

自定义类表

和li标签,至于dl,dt,dd一般都很少用到，这三个标签就是属于定义列表类的标签，下面园子给大家说一下大概的用法。先来分解一下这个列表的代码：

1 2 3 4

<dl><!–Definition List (定义列表)–> <dt></dt><!–Definition Term （定义项）–> <dd></dd><!–Definition Description （定义描述）–> </dl>

看上面这段代码我们发现这里并没有出现<li>标签，而是由DL、DT、DD三个标签组成，根据外型以及之前的列表我们可以知道，DL是这个列表的一个容器，就像个箱子，不同的是这次箱子里不只有统一标准的单个小盒子了。而是出现两个不同的内容我们怎么理解这个DT与DD呢？从语义上来讲，DT是名称，是标题，而DD是解释，是内容。DT与DD都是盒子，DD只对应解释他上面的一个DT，不能越级或是向下解释。当DT不存在的时候那么DD也就没有存在的意义，而DT是否一定需要DD跟随其后，这点上我还没有找到确切的文献可以说明这一点，但是以我对于定义列表的理解，我认为如果数据中只有DT没有DD那么这就一不能成为定义列表，直接用UL无序列表就可以了。但是当数据中只有某一个或是少数几个没有DD，而大部分都有DD，那么园子认为这种形式是可以存在的。

再看个例子：

1 2 3 4 5 6

<dl> <dt>有序列表</dt> <dt>有序列表</dt> <dt>有序列表</dt> <dt>有序列表</dt> </dl>

以上这种很明显就不合适了，这样的形式就是无序列表，何必要用定义列表呢，从语义上也说不通。

一个DT可以带多个DD吗？例：

1 2 3 4 5 6 7 8

<dl> <dt>国内电视台</dt> <dd>中央一套</dd> <dd>中央二套</dd> <dd>中央三套</dd> <dt>国外电视台</dt> <dd>美国在线</dd> </dl>

上面这种形式则我个人认为是可行的。关于一个DT是否可以带多个DD的问题，这点上我同样没有找到文献说明不可以，并且在一些知名的网站中这种一个DT带多个DD的依然很多。我对此的看法是，物殊情况下一个DT带多个DD是可以的，但是一般情况上我认为这种做法还是有所欠缺。从解释上来看，多个DD是否表明着多个解释？或是解释内容要分段也不需要让DD来当这只抓耗子的狗。一个DD中完全可以内嵌很多个段落标签。再则从样式应用上来讲，多个DD整体松散，其设计的扩展性不足。比如，当我们要做一个点击DT隐藏对应的DD的效果时，这种多DD的做法就不那么好实现了。所以在不是特殊用途情况下尽可能不要使用一个DT带多个DD的做法，还是把内容放在DD里，分段的就让段落标签去做，分列表的就让有序或是无序列表去表现。您的意见呢？

最后给一个比较好的例子供大家参考：

1 2 3 4 5 6 7 8

<dl> <dt >《千与千寻》</dt> <dd>剧情说的是10岁的少女千寻与父母一起从都市搬家到了乡下。没想到在搬家的途中，一家人 发生了意外。他们进入了汤屋老板魔女控制的奇特世界——在那里不劳动的人将会被变成动物。</dd> <dt>《龙猫》</dt> <dd>和爸爸一起搬到乡下的两姐妹，在家旁的一棵大树下发现了只有好孩子才能看见的TOTORO。 其间发生了很多不可思议而有趣的故事。</dd> </dl>