HTML第4章--列----表

HTML网页设计参考手册·50·列表第章无序列表的设计有序列表的设计定义列表标记——dl菜单列表标记——menu目录列表——dir列表的高级应用列表的嵌套列表（List）是一种非常实用的数据排列方式，它以条列式的模式来显示数据，使读者能够一目了然。在HTML中有3种列表，分别是无序列表（UnorderedLists）、有序列表（OrderedLists）和定义列表（DefinitionLists）。第4章列表·51·4.1无序列表的设计4.1.1无序列表标记——ul无序列表的特征在于提供一种不编号的列表方式，而在每一个项目文字之前，以符号作为分项标识。语法：ulLI第1项LI第2项LI第3项……/ul说明：在该语法中，使用ul/ul标记表示这一个无序列表的开始和结束，而LI则表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。实例代码：htmlheadtitle创建无序列表/title/headbodyfontsize=5color=#990000提供下载的软件类别：/fontbrbrulLI系统程序LI媒体工具LI管理软件LI游戏娱乐/ul/body/html运行这段代码，可以看到窗口中建立了一个无序列表，该列表共包含了4个列表项，如图4-1所示。图4-1创建无序列表HTML网页设计参考手册·52·4.1.2设置无序列表的符号类型——type默认情况下，无序列表的项目符号是●，而通过type参数可以调整无序列表的项目符号，避免列表符号的单调。语法：ultype=符号类型LI第1项LI第2项LI第3项……/ul说明：在该语法中，无序列表其他的属性不变，type属性则决定了列表项开始的符号。它可以设置的值有3个，见表4-1。其中disc是默认的属性值。表4-1无序列表的符号类型类型值列表项目的符号disc●circle○square■实例代码：htmlheadtitle创建无序列表/title/headbodyfontsize=5color=#990000出售的图书种类：/fontbrbrultype=circleLI计算机类书籍LI休闲杂志类书籍LI考试教材类书籍LI社会科学类书籍LI外语原版书/ulhrcolor=#CC0000size=2fontsize=5color=#990000出售的数码产品种类：/fontbrbrultype=squareLI电脑配件LI数码相机LI手机LIMP3/ul/body/html第4章列表·53·运行这段代码，可以看到除了默认的列表项符号之外，显示了另外两种列表项目符号的效果，如图4-2所示。无序列表的类型定义也可以在LI项中，其语法是LItype=符号类型，这样定义的结果是对单个项目进行定义，实例代码如下：htmlheadtitle不同的项目符号/title/headbodyfontsize=5color=#990000出售的图书种类：/fontbrbrulLItype=disc计算机类书籍LItype=circle休闲杂志类书籍LItype=square社会科学类书籍/ul/body/html运行这段代码，效果如图4-3所示。图4-2设置无序列表项目符号图4-3设置不同的项目符号4.2有序列表的设计4.2.1有序列表标记——ol有序列表中，各个列表项使用编号而不是符号来进行排列。列表中的项目通常都有先后顺序性，一般采用数字或者字母作为顺序号。语法：olLI第1项HTML网页设计参考手册·54·LI第2项LI第3项……/ol说明：在该语法中，ol和/ol标记标志着有序列表的开始和结束，而LI标记表示这是一个列表项的开始，默认情况下，采用数字序号进行排列。实例代码：htmlheadtitle创建有序列表/title/headbodyfontsize=5color=#990000创建HTML文件的步骤：/fontbrbrolLI启动编写HTML文件的软件，如DreamweaverLI编写文件代码LI保存文件LI运行文件并查看效果/ol/body/html运行这段代码，可以看到序列前面包含了顺序号，如图4-4所示。4.2.2有序列表的序号类型——type默认情况下，有序列表的序号是数字的，通过type属性可以调整序号的类型，例如将其修改成字母等。语法：oltype=序号类型LI第1项LI第2项LI第3项……/ol说明：在该语法中，序号类型可以有5种，见表4-2。表4-2有序列表的序号类型type取值列表项目的序号类型1数字1，2，3，4……a小写英文字母a，b，c，d……图4-4有序列表第4章列表·55·续表type取值列表项目的序号类型A大写英文字母A，B，C，D……i小写罗马数字i，ii，iii，iv……I大写罗马数字I，II，III，IV……实例代码：htmlheadtitle创建有序列表/title/headbodyfontsize=4color=#990000小小蚂蚁测试你如何面对人际关系/fontbrbr你和朋友约好一起逛街，可是你的朋友迟到了。于是你就开始在地上乱画。突然，你发现有很多蚂蚁正在成群结队地往前行进。你认为这些蚂蚁正在做什么？oltype=ALI正在搬家LI大家正要前往救助掉落洞穴中的伙伴LI发现好吃的食物，大家正要去搬运LI正要去袭击侵入它们势力范围的敌人/olhrsize=2color=#CC0000fontsize=4color=#990000走路姿势透露你的另一面/fontbrbr走路是我们每天都要做的事情，似乎就像我们呼吸空气一样平常，走路会藏有什么玄机呢？其实，这里面的奥妙可大着呢！每个人有每个人的习惯，由此，我们每个人走路的姿态就会有所不同，就在这不同的姿势中，你的性格特征以及爱情玄机就一点一滴地泄露出来了哟！oltype=iLI走路的时候速度比较快，通常五指伸得笔直LI走路时的速度一般，手掌常自然地握成拳状LI常将一只手插进口袋，或两手同时插进口袋LI走路的时候速度比较慢，五指自然微微弯曲/ol/body/html运行这段代码，可以实现有序列表的不同类型的序号排列，如图4-5所示。4.2.3有序列表的起始数值——start默认情况下，有序列表的列表项是从数字1开始的，通过start参数可以调整起始数值。这个数值图4-5有序列表的类型HTML网页设计参考手册·56·可以对数字起作用，也可以作用于英文字母或者罗马数字。语法：olstart=起始数值LI第1项LI第2项LI第3项……/ol说明：在该语法中，起始数值只能是数字，但是同样可以对字母和罗马数字起作用。实例代码：htmlheadtitle有序列表的起始值/title/headbodyfontsize=4color=#990000这些动物都是国家保护动物：/fontbrbrolstart=3LI大熊猫LI金丝猴LI娃娃鱼LI变色龙/olhrsize=2color=#CC0000fontsize=4color=#990000读完本期故事会，选择您认为最好的一篇文章：/fontbrbroltype=Astart=5LI晴天、雨天LI我长大了LI风中的百合花/ol/body/html运行这段代码，效果如图4-6所示，其中定义了不同的起始编号。图4-6设置有序列表的起始编号第4章列表·57·4.3定义列表标记——dl在HTML中还有一种列表标记，称为定义列表（DefinitionLists）。不同于前两种列表，它主要用于解释名词，包含两个层次的列表，第一层次是需要解释的名词，第二层次是具体的解释。语法：dldt名词1dd解释1dt名词2dd解释2dt名词3dd解释3……/dl说明：在该语法中，dl标记和/dl标记分别定义了定义列表的开始和结束，dt后面就是要解释的名称，而在dd后面则添加该名词的具体解释。作为解释的内容在显示时会自动缩进，有些像字典中的词语解释。实例代码：htmlheadtitle创建定义列表/title/headbodyfontsize=5color=”#000099”网页创作的相关知识：/fontbrbrdldtHTMLddHTML是英文HyperTextMarkupLanguage的缩写，即超文本标志语言dtCSSddCSS是CascadingStyleSheets（层叠样式表单）的简称，一种设计网页样式的工具dtJavaScriptddJavaScript是一种新的描述语言，可以被嵌入HTML的文件之中dtCGIddCGI是一段程序，它运行在Server上，提供同客户端HTML页面的接口/dl/body/html运行这段代码，可以实现如图4-7所示的定义列表效果。图4-7定义列表端HTML网页设计参考手册·58·4.4菜单列表标记——menu菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的，因此它的功能也可以通过无序列表来实现。语法：menuLI列表项1LI列表项2LI列表项3……/menu说明：在该语法中，menu和/menu标志着菜单列表的开始和结束。实例代码：htmlheadtitle创建菜单列表/title/headbodyfontsize=5color=#000066本章中介绍的列表主要包括：/fontbrbrmenuLI无序列表LI有序列表LI定义列表LI菜单列表LI目录列表/menu/body/html运行这段代码，效果如图4-8所示。4.5目录列表——dir目录列表一般用来创建多列的目录列表，它在浏览器中的显示效果与无序列表相同，因此它的功能也可以通过无序列表来实现。语法：dirLI列表项1图4-8菜单列表的效果第4章列表·59·LI列表项2LI列表项3……/dir说明：在该语法中，menu和/menu标志着菜单列表的开始和结束。实例代码：htmlheadtitle创建目录列表/title/headbodyfontsize=5color=#000066禅/fontbrbrdirLI诸恶不作,众善奉行LI人间万事塞翁马LI一切众生希有佛性LI面面佛面行行佛行/dir/body/html运行这段代码，效果如图4-9所示。4.6列表的高级应用4.6.1列表的简化当制作的列表清单过长时，浏览器可能需要利用滚动条才能看到所有的内容。为了节省空间，避免过多的留白，可以考虑利用compact参数来紧密排列各要项的内容。语法：dlcompact/dl说明：在该语法中，compact参数除了与定义列表结合之外，还可以与各种列表结合使用，达到列表的简化功能。实例代码：htmlheadtitle创建定义列表/title/headbodyfontsize=5color=#000099网页创作的相关知识：/fontbrbrdlcompactdtHTML