HTML+CSS+JavaScript第三章幻灯片.pptVIP

3.3水平线和列表 水平线和列表在网页中也会经常用到。在网页设计中使用水平线和列表将信息组织成各种不同形式，可以使网页内容排列得更清晰明了。 3.3.1 水平线 在HTML文件中可以使用hr标签创建水平线，将不同的内容分开，从视觉上将网页分隔成多个部分，使各部分内容看起来清晰明了。 hr标签的作用是换行并在该行下添加一条水平线，水平线的上下都会留出一定的空白。hr标签有size、align、color、width、noshade等可选属性，创建水平线的语法结构如下： hr size=参数值 width=参数值 align=参数值 color=颜色值 noshade 各属性的含义如下： size：设置水平线的粗细，以像素为单位，默认值2。 width：设置水平线的长度，单位为像素或百分比，默认值100%。 align：设置水平线的对齐方式，属性值为left、center（默认）、right。 color：设置水平分线的颜色，默认值为black。 noshade：表示水平线不显示3D阴影效果。 3.2.2 列表 当网页中包含多项内容时，可以使用列表将这些内容进行合理组织。HTML中的列表可分为无序列表、有序列表、自定义列表3种。 1．无序列表 无序列表是用项目符号来表示一个没有特定顺序的相关条目的集合。用于说明文件中需要列出的项，可以按任意顺序显示出来，各个列表项之间没有顺序级别之分。通常会在每个列表项的前面添加一个项目符号，并且每行缩进相同的距离。 无序列表使用一对标签ul…/ul定义，并且每个列表项都要使用li标签进行定义。 创建无序列表的语法格式如下： ul type=符号类型 li列表项/li li列表项/li li列表项/li …… /ul 其中ul和/ul必须成对出现，且li…/li必须放在ul…/ul标签之间，/li可以省略。省略/li变成单标签，在省略/li的无序列表中，下一个li的出现，就表明上一个列表项的结束。 type属性用于指定每个列表项的项目符号。type属性值为disc表示使用实心圆点（●）作为项目符号，这是默认值；属性值为circle表示项目符号为空心圆点（○）；属性值为square表示使用实心方形（■）作为项目符号。 2．有序列表 有序列表用于说明文件中需要按特定顺序排列和显示的内容。有序列表在列表的每项前都加上编号。因此，浏览者可以清晰地了解各个项目的顺序。定义有序列表需要使用有序标签ol…/ol和列表项标签li…/li， 创建有序列表的语法格式如下： ol type=符号类型 start=符号开始值 li第一个列表项/li li第二个列表项/li li第三个列表项/li …… /ol 顺序编号是由属性type和start来设置的。 type表示标号的类型， type属性取值1表示列表项用数字（1，2，3…）编号，是默认值； A表示列表项用大写英文字母（A，B，C…）编号； a表示表示用小写英文字母（a，b，c…）编号； I表示用大写罗马字母（I，II，III…）编号； i表示列表项用小写罗马字母（i，ii，iii…）编号。 start属性表示列表项目的编号从第几项开始，例如，type=1，start=1表示有序列表的序号类型为数字，从第一个项目开始编号。 3．嵌套列表 将一个列表嵌入另一个列表中，作为另一个列表的一部分，叫做嵌套列表。HTML可以用层层嵌套的方式来实现嵌套列表。 使用嵌套列表可以把网页的内容分为多个层次，增强内容的层次感，有序列表和无序列表自身可以嵌套，彼此之间也可以进行嵌套。 4．自定义列表 自定义列表是项目及其注释的组合。自定义列表用于比较复杂的列表说明，不只可以分项说明，还可以针对每一个小项目再加以说明。创建自定义列表的语法格式如下： dl dt自定义列表项目1/dt dd项目1的解释1/dd …… dt自定义列表项目2/dt dd项目2的解释1/dd …… /dl 其中，dl和/dl之间的内容就是自定义列表的内容，由一系列用自定义列表项标签dt和解释项标签dd标识的列表项组成。在显示时，解释项的内容会自动缩进一定的距离，使列表的结构更加清晰。 本章小结 本章主要介绍了如何使用表格、框架、水平线和列表来布局网页。通过本章的学习，读者应重点掌握表格和框架的使用，熟悉添加水平线和定义列表的方法，能够设计制作出层次清晰、页面美观的HTML文档。 本章结束 谢谢！ 5．合并单元格 在表格中使用th和td标签的colspan和rowspan属性设置跨行和跨列的单元格，将单元格合并，语法格式如下： th colspan=数值 th rowspan=数值 td colspan=数值 td rowspan=数值 r