《HTML列表标签全解析1》.doc

HTML列表标签（ul/li、ol/li、dl/dt/dd）全解析 一、列表标签的分类与说明 定义：HTML列表标签是用来罗列出一些相似或者相关的项目分为无序列表有序列表定义列表. 无序列表无序列表的标签是ul/ul，而每一个列表项目则用li标签。ul style=background-color:#0099FF li我是无序列表li内容001 /li li我是无序列表li内容002/li li我是无序列表li内容003/li /ul 效果如下图： 为了更好的突出效果，此案例源码给ul加了一个浅蓝色的背景行间样式。 从效果图可以看出此标签默认属性有以下几点： A、圆点的项目符号（CSS规则为：“list-style-type: disc;”若要去除，则将其值设置为“none;”即可，此规则处于标签ul上。） B、42PX的左填充(CSS规则为：“padding-left: 42px; ”若要去除则将其值设置为“0PX;”即可，此规则处于标签ul上。) IE7:margin-left:0px; C、19PX的上边界(CSS规则为：“margin-top: 19px; ”若要去除则将其值设置为“0PX;”即可，此规则处于标签ul上。此效果在本效果图上没有直接显示。) 2. 有序列表有序列表的标签是ol/ol，列表项目仍然是li。ol style=background-color:#0099FF li我是有序列表li内容001 /li li我是有序列表li内容002/li li我是有序列表li内容003/li /ol 效果如下图： 为了更好的突出效果，此案例源码给ol加了一个浅蓝色的背景行间样式。 从效果图可以看出此标签默认属性有以下几点： A、数字序列的项目符号（CSS规则为：“list-style-type: decimal;”若要去除则将其值设置为“none;”即可，此规则处于标签ol上。） B、42PX的左填充(CSS规则：“padding-left: 42px;”若要去除则将其值设置为“0PX;”即可，此规则处于标签ol上。 C、19PX的上边界(CSS规则为：“margin-top: 19px; ”若要去除则将其值设置为“0PX;”即可，此规则处于标签ol上。此效果在本效果图上没有直接显示。) 3. 定义列表定义列表有别于以上两种列表，它由两个部分组成：定义条件和定义描述。定义列表由dl元素起始和结尾，dt用来指定定义条件，dd用来指定定义描述。dl style=background-color:#0099FF dt我是定义列表dt标题内容001：/dt dd我是定义列表dd内容标签的解释说明性内容001。/dd dt我是定义列表dt标题内容002：/dt dd我是定义列表dd内容标签的解释说明性内容002。/dd /dl 效果如下图： 为了更好的突出效果，此案例源码给dl加了一个浅蓝色的背景行间样式。 从效果图可以看出此标签有默认属性如下： A、“dd”标签42PX的左边界(CSS规则为：“margin-left: 42px;”若要去除则将其值设置为“0PX;”即可，此规则处于标签dd上。) B、34PX的上边界(CSS规则为：“margin-top: 34px; ”若要去除则将其值设置为“0PX;”即可，此规则处于标签dl上。此效果在本效果图上没有直接显示。) 二、列表标签的区别与联系 从以上案例说明可以明显看出三种列表标签上的区别与联系： 区别1：默认属性的不同。 ul无序列表的ul标签有圆形的项目符号与42像素的左填充； ol有序列表的ol标签有数字序列的项目符号与42像素的左填充； dl定义列表的dd标签有42像素的左边界。 区别2：功能性的不同 顾名思义，ul无序列表其项目符号是同一种几何图形，应用于多个li; ol有序列表其项目符号是要求根据li的值依次的顺序排列分布； 而dl定义列表则是用于为某“定义”而对其条件进行描述的列表文段。 联系：都属于列表。列表即是多个重复性或层次性的文段的结合，因而列表是不可独立而存在的，即是ul/li、ol/li、dl/dt/dd五个标签是按多组来进行使用与搭配的，任何独立的使用与错搭，都是不符合列表标签的使用规范与原则的。 三、列表标签的其它扩展性用途 1.用于网站导航的设计与制作 2.网页按钮的使用 3.重复区块与图片块的使用等等 由于列表标签具有多个内容天然的重复性，因而在网页制作中有许许多多的重复性的区块，如导航按钮，多组图片，文章序列等等，都使用到了列表标签的运用。其使用除了可以达到实现效果的简便之外，其实还增强了CSS的可控制性和功能的扩大化，