搜索
33第四章列表列表（List）是一种常用的数据排列方式，它以条列式的模式来显示数据，使读者能一目了然。在HTML有三种列表，分别是无序列表（unorderedlists）、有序列表（orderedlists）和定义列表（definitionlists）。4.1无序列表无序列表（unorderedlists）是一种不编号的列表方式，而在每一个项目文字之前，用符号作为分项标识，最常用的符号是圆黑点。常用语法为：ultype=符号类型li第1项li第2项……li第n项/ul无序列表由ul开始，每个列表项由li开始，最后由/ul结束。在默认情况下，无序列表的项目符号是“●”，但通过type属性可指定项目符号，其值有三个，分别是：disc：默认的项目列表符号“●”。circle：空心园符号“〇”。square：方块符号“■”【例1】无序列表的使用。htmlheadtitleitsway--列表/title/headbodyul中国古代四大名著：li《红楼梦》li《三国演义》li《水浒传》li《西游记》/ulfontsize=2color=#990000ultype=circleitsway三大基本教程：liHTML教程liCSS教程liJavaScript教程/ul/font/body/html34显示结果如下图所示。4.2有序列表有序列表（orderedlists）中的每个列表项使用编号、而不是符号来进行排列，以表示顺序性，一般采用数字或字母作为顺序号。常用语法为：oltype=符号类型start=起始数字li第1项li第2项……li第n项/ol有序列表由ol开始，每个列表项由li开始，最后由/ol结束。在默认情况下，无序列表的编号是阿拉伯数字，但通过type属性可指定编号，其值有五个，分别是：1（阿拉伯数字1）：用1、2、3、4、……编号。a：用小写英文字母a、b、c、d、……编号。A：用大写英文字母A、B、C、D、……编号。i：用小写罗马数字i、ii、iii、iv、……编号。I（大写的字母i）：用大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ、……编号。在默认情况下，有序列表的列表项从1开始编号，但通过start属性可设置起始数值，它不仅对数字起作用，而且对英文和罗马字母起作用。【例2】有序列表的使用。htmlheadtitleitsway--列表/title图浏览结果35/headbodyoltype=1中国古代四大名著：li《红楼梦》li《三国演义》li《水浒传》li《西游记》/olfontsize=2color=#990000oltype=Astart=3itsway三大基本教程：liHTML教程liCSS教程liJavaScript教程/ul/font/body/html显示结果如下图所示。4.3定义列表定义列表（definitionlists）通常用于术语的定义，它包含两个层次的列表，第一层次是需要解释的名词，第二层次是具体的解释。常用语法为：dldt第1项dd解释1图浏览结果36dt第2项dd解释2……dt第n项dd解释n/dl定义列表由dl开始，每个列表项由dt开始，列表项的解释由dd开始。最后由/dl结束。【例3】定义列表的使用。htmlheadtitleitsway--列表/title/headbodypfontface=楷体_gb2312size=3color=blackb中国古代四大名著：/b/font/pfontsize=2color=#000080dldtfontcolor=redu《红楼梦》/u/font：dd又称《石头记》，被认为是中国最具文学成就的古典小说，也是一部中国末期封建社会的百科全书。小说以上层贵族社会为中心图画，真实、生动地描写了十八世纪上半叶中国末期封建社会的全部生活，是这段历史生活的一面镜子和缩影，是中国古老封建社会已经无可挽回地走向崩溃的真实写照。作者曹雪芹。dtfontcolor=redu《三国演义》/u/font：dd描写的是从东汉末年到西晋初年之间近一百年的历史风云。全书反映了东汉末年黄巾起义时期，及以后三国时代的政治军事斗争。反映了三国时代各类社会矛盾的渗透与转化，概括了这一时代的历史巨变，塑造了一批咤叱风云的英雄人物。作者罗贯中。dtfontcolor=redu《水浒传》/u/font：dd是中国历史上第一部描写农民起义的长篇小说。它以农民起义的发生、发展过程为主线，通过各个英雄被逼上梁山的不同经历，描写出他们由个体觉醒到走上小规模联合反抗，到发展为盛大的农民起义队伍的全过程，深刻反映出北宋末年的政治状况和社会矛盾。作者一般认为是元末明初的施耐庵。dtfontcolor=redu《西游记》/u/font：dd主要描写的是孙悟空保唐僧西天取经，历经九九八十一难的故事。《西游记》向人们展示了一个绚丽多彩的神魔世界，人们无不在作者丰富而大胆的艺术想象面前惊叹不已。作者吴承恩。/dl/font/body/html显示结果如下图所示。37可以看出，dd里的文字会缩进显示。在本例中使用定义列表时，还嵌套使用了font、b、u等多种标记。读者可以看到多种标记的组合使用，会产生更加美观的效果。在Firefox中，本例的显示效果略有不同，如下图所示。最大的区别是列表项的解释（dd标记）内容的排列，在IE中是全部缩进，而在Firefox中是首行缩进。这说明：虽然浏览器在显示网页时需要遵循HTML规范，但它们之间仍可能存在细微差别。这些差别需要我们在编辑网页时注意，一般不会产生很大影响。图浏览结果384.4其他列表除了以上三种列表之外，还有菜单列表和目录列表。菜单列表主要用于设计单列的列表，其实显示效果和无序列表是相同的，因此其实不必要。菜单列表的格式为：menuli第1项li第2项……li第n项/menu目录列表一般用来创建多列的列表，它在浏览器中的显示效果也和无序列表相同，因此也不必要。其格式为：dirli第1项li第2项……li第n项/dir读者可以把前面例子中的ul、/ul替换成menu、/menu或dir、/dir，效果是相同的。menu、/menu和dir、/dir标记已经过时了，不提倡使用。这里列出仅仅是为了介绍，以便读者遇到它们时有个印象。4.5列表的高级应用当制作的列表清单过长时，浏览器可能需要利用滚动条才能看到所有内容。为了节省空间，避免过多的留白，可以考虑利用列表标记的compact属性来紧密排列各项的内容。其实，compact属性是前面讲过的几乎所有列表标记的属性（dl标记除外），因此这里统一讲解。它的语法为：列表标记compactli第1项li第2项……li第n项/列表标记不过，无论用IE还是用Firefox显示带compact属性的列表，其效果都和不加compact属性使用，因此这里不再单独演示。列表还可以嵌套使用。最常见的是有序列表和无序列表的嵌套。【例4】列表的嵌套。htmlhead39titleitsway--列表/title/headbodyulcomopacttype=squareli唐代著名诗人：oltype=1li李白li杜甫li白居易li杜牧li王维li刘禹锡li李商隐/olli宋代著名诗人：oltype=1li苏轼li陆游li李清照li文天祥/olli元代著名诗人：oltype=1li萨都剌li王冕/ol/ul/body/html显示结果如右图所示。在本例中，外层列表是无序列表，在每个无序列表项中，都嵌套了一个有序列表。通常用嵌套的列表反映层次较多的内容。图浏览结果