1、第6节 列表标签,武汉纺织大学传媒学院,2018/9/23,1,传媒学院,在制作网页时,列表经常被用到写提纲和品种说明书。通过列表标签的使用能使这些内容在网页中条理清晰、层次分明、格式美观的表现出来。同时列表还可用来制作菜单,本节将介绍列表标签的简单使用,2018/9/23,2,传媒学院,2018/9/23,3,传媒学院,1、无序列表,标签关键字ulUnordered Listul一个没有特定顺序的相关条目(也称为列表项)的集合在无序列表中,各个列表项之间属并列关系,没有先后顺序之分,它们之间以一个项目符号(标签关键字为li)来标记,2018/9/23,4,传媒学院,基本语法 项目名称 项目名
2、称ul表示无序列表,li是列表项关键字,表示列表中的项type取值disc指定项目符号为一个实心圆点(IE浏览器的默认值)circle指定项目符号为一个空心圆点square指定项目符号为一个实心方块,2018/9/23,5,传媒学院,例子语文数学英语效果如右,2018/9/23,6,传媒学院,2、有序列表,标签关键字olOrdered List有序列表是一个有特定顺序的相关条目(列表项)的集合。在有序列表中,各个列表项有先后顺序之分,它们之间以编号来标记,2018/9/23,7,传媒学院,基本语法 项目名称 项目名称 项目名称 ,2018/9/23,8,传媒学院,2.1、有序列表的编号样式,t
3、ype属性取值1:指定项目编号为阿拉伯数字(IE浏览器的默认值)a:指定项目编号为小写英文字母A:指定项目编号为大写英文字母i:指定项目编号为小写罗马数字I:指定项目编号为大写罗马数字,2018/9/23,9,传媒学院,例子语文数学英语效果如下,2018/9/23,10,传媒学院,2.2、有序列表的编号起始值,ol的start属性默认从1开始,如果是其他符号也是从第一个开始,比如字母,从a开始例子语文数学英语效果如右,2018/9/23,11,传媒学院,2.3、列表项的样式,通常li使用ul或ol定义的符号样式(type属性决定的)但也可通过li标签的type属性单独定义列表项(li)的样式而
4、且li的type属性取值和ul、ol的type属性取值定义一样例子语文数学效果如右,2018/9/23,12,传媒学院,2.4、列表项的编号,列表项标记的type属性只能改变当前列表项的符号或编号的样式,并不会改变其值的大小而使用列表项标记的value属性,可以改变当前列表项的编号大小,并会影响其后所有列表项的编号大小该属性只适用于有序列表例子语文数学英语效果如右,2018/9/23,13,传媒学院,3、嵌套列表,列表可以嵌套使用,也就是一个列表中还可以包含有多层子列表在网页文件中,对于内容层次较多的情况,使用嵌套列表不仅使网页的内容布局更加合理美观,而且使其内容看起来更加清晰、明了嵌套的列表可以是无序列表的嵌套,也可以是有序列表的嵌套,还可以是无序列表和有序列表的混合嵌套,2018/9/23,14,传媒学院,例子 文科 语文历史地理 理科 数学物理化学 ,2018/9/23,15,传媒学院,作业1,利用列表编写如下所示网页,2018/9/23,16,传媒学院,作业1文字素材,一个嵌套列表咖啡 茶 红茶 绿茶 中国茶 非洲茶 牛奶,2018/9/23,17,传媒学院,利用列表编写如下所示网页,作业2,2018/9/23,18,传媒学院,