242个htmlcss标签速查第5章网页中的列表

1、第5章网页中的列表列表在 Word 文档中很常用，是一种非常实用的数据排列方式。使用列表组织的数据，可以使读者一目了然，增加文件的可读性。HTML 文件中也可实现相同的功能，提供了 3 种列表，分别是：无序列表（Unordered Lists）、有序列表（Ordered Lists）、和定义列表（Definition Lists），下面分别介绍。5.1有序列表有序列表的各个列表项使用用数字或者字母作为顺序号。进行排列。列表中的项目通常都有先后顺序性，一般采5.1.1有序列表标记ol带的列表称为有序列表，有序列表以开始，以结束。在每个处都会自动添加和分行，且每行都有缩进。【说明】说明：在该语法中

2、，和标记标志着有序列表的开始和结束，而标记表示一个列表项的开始，默认情况下，采用数字序号进行排列。【上机实战】【运行效果】运行这段代码，可以看到列表序列前面包含了顺序号，如图 5-1 所示。创建有序列表虚拟光驱的安装和使用虚拟光驱安装虚拟光驱运行第1项第2项第3项图 5-1 有序列表5.1.2有序列表的序号类型type默认情况下，有序列表的序号是数字的，通过 type 属性可以调整序号的类型，例如将其修改成字母等。【说明】说明：在该语法中，序号类型可以有 5 种，见表 5-1 所示。表5-1有序列表的序号类型【上机实战】【运行效果】运行这段代码，可以实现有序列表的不同类型的序号排列，如图 5-

3、2 所示。创建有序列表创建有序列表虚拟光驱的安装和使用虚拟光驱安装虚拟光驱运行type取值列表项目的序号类型1数字1,2,3,4a小写英文字母a,b,c,dA大写英文字母A,B,C,D小写罗马数字,大写罗马数字,第1项第2项第3项图 5-2 设置有序列表的序号5.1.3有序列表的起始数值start默认情况下，有序列表的列表项是从数字 1 开始的，通过 start 参数可以调整起始数值。这个数值可以对数字起作用，也可以作用于英文字母或者罗马数字。【说明】说明：在该语法中，起始数值只能是数字，但是同样可以对字母和罗马数字起作用。【上机实战】【运行效果】运行这段代码的效果如图 5-3 所示，其中定义

4、了不同的起始。有序列表的起始值虚拟光驱的安装和使用虚拟光驱安装虚拟光驱运行VS2008安装步骤打开虚拟光驱弹出VS2008加载组件框协议与安装密钥 选择安装方式第1项第2项第3项图 5-3 设置有序列表的起始5.2无序列表无序列表和有序列表最大的不同在于列表项的序号，有序列表使用序号进行排列，而无序列表通常使用符号作为标志即可。5.2.1无序列表标记ul无序列表的特征在于提供一种不为列表项标识。的列表方式，而在每一个项目文字之前，以符号作【说明】说明：在该语法中，使用标记表示这一个无序列表的开始和结束，而则表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。【上机实战】【运行效果】运

5、行这段代码，看到窗口中建立了一个无序列表，这个列表共包含了 4 个列表项。如图5-4 所示。创建无序列表导航项目首页生活第1项第2项第3项图 5-4 无序列表5.2.2无序列表的符号类型type默认情况下，无序列表的项目符号是，而通过 type 参数可以调整无序列表的项目符号，避免列表符号的单调。【说明】说明：在该语法中，无序列表其他的属性不变，type 属性则决定了列表项开始的符号。它可以设置的值有 3 个，见表 5-2 所示。其中 disc 是默认的属性值。表5-2 无序列表的符号类型【上机实战】创建无序列表出售的种类：计算机类书籍休闲杂志类书籍类书籍社会科学类书籍外语原版书出售的数码产品

6、种类：电脑配件数码相机MP3类型值列表项目的符号disccirclesquare第1项第2项第3项【运行效果】运行这段代码，可以看到除了默认的列表项符号之外，显示了另外两种列表项目符号的效果，如图 5-5 所示。图 5-5 无序列表图 5-6 无序列表项目符号无序列表的类型定义也可以在项中，其语法是，这样定义的结果是对单个项目进行定义，【上机实战】【运行效果】运行这段代码效果如图 5-6 所示。5.3定义列表标记dl在 HTML 中还有一种列表标记，称为定义列表（Definition Lists）。不同于前两种列表，它主要用于解释名词，包含两个层次的列表，第一层次是需要解释的名词，第二层次是具

7、体创建无序列表导航项目首页生活出售的数码产品种类：电脑配件数码相机MP3的解释。【说明】说明：在该语法中，标记和标记分别定义了定义列表的开始和结束，后面就是要解释的名称，而在后面就添加该名词的具体解释。作为解释的内容在显示的时候会自动缩进，有些像字典中的词语解释。【上机实战】【运行效果】运行这段代码，可以实现如图 5-7 所示的定义列表效果。图 5-7 定义列表标记5.4菜单列表标记菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的，因此它的功能也可以通过无序列表来实现。【说明】列表项1列表项2列表项3创建定义列表类类是一组具有相同数据结构和操作的对象集合接口应

8、用程序之间相用的一种协议定义一种变量指代一个函数名词1解释1名词2解释2名词3解释3说明：在该语法中，和标志着菜单列表的开始和结束。【运行效果】运行这段代码的效果如图 5-8 所示。图 5-8菜单列表5.5目录列表dir目录列表一般用来创建多列的目录列表，它在浏览器中的显示效果与无序列表相同，因此它的功能也可以通过无序列表来实现。【说明】说明：在该语法中，和标志着菜单列表的开始和结束。创建目录列表本节内容值类型列表项1列表项2列表项3创建菜单列表本章主要介绍的内容：值类型类型装箱和拆箱常量和变量【运行效果】运行这段代码的效果如图 5-9 所示。图 5-9 目录列表5.6列表的高级应用前面介绍的

9、都是列表的基本用法，HTML 还提供了一些优化和美化列表的参数，下面介绍列表的简化和设置列表项文字颜色的方法。5.6.1列表的简化当制作的列表过长时，浏览器可能就需要利用滚动条才能看到所有的内容。为了节省空间避免过多的留白，可以考虑利用compact 参数来紧密排列各列表项的内容。【说明】说明：在该语法中，compact 参数除了与定义列表结合之外，还可以与各种列表结合使用，达到列表的简化功能。【上机实战】【运行效果】列表简化类类是一组具有相同数据结构和操作的对象集合接口应用程序之间相用的一种协议定义一种变量指代一个函数类型装箱和拆箱常量和变量运行这段代码，与本章 5.3 节的实例相对比，可以看到解释内容没有单独开始一行，而是直接在词语后面，从而节省了空间，如图 5-10 所示。图 5-10 列表的简化5.6.2设置列表文字的颜色在创建列表的时候，可以单独控制列表中文字的颜色。使用color 颜色属性可以设置列表项文字的颜色。【说明】列表项的内容说明：列表项内容的颜色就变成了设置后的颜色，也可以在列表中进行整体颜色的设置。【上机实战】【运行效果】运行这段代码的效果如图 5-11 所示。创建列表文字颜色导航项目首页生活出售的数码产品种类：电脑配件数码相机MP3图 5-11 列表项文字颜色5.7列表的嵌套有序列表和无序列表、有序列表之间、无序列表之间都可以进行嵌套，最常见的列表嵌套