网页设计与制作

1、 网页设计与制作网页设计与制作 第第3 3章章 HTMLHTML语言语言3.1 HTML的基本结构3.1.13.1.1 HTMLHTML标记及其属性标记及其属性 1.1.标记标记 标记分为单标记指令和双标记指令。标记分为单标记指令和双标记指令。 （1）单标记单标记指令单独使用就能完整地表达意思，它的一般格式为：指令单独使用就能完整地表达意思，它的一般格式为： （2）双标记双标记指令必须成对使用，它的一般格式为：指令必须成对使用，它的一般格式为：内容内容 2. 标记的属性标记的属性 属性的一般格式为：属性的一般格式为：受标记影响的内容受标记影响的内容返返回回 第第3 3章章 HTMLHTML语言

2、语言3.1.23.1.2 HTMLHTML的基本构成标记的基本构成标记 1.HTML文档标记文档标记 格式格式： 功能功能：标记位于标记位于HTML文档的最前边，用来标识文档的最前边，用来标识HTML文档的文档的开始；而开始；而标记恰恰相反，它位于标记恰恰相反，它位于HTML文档的最后边，用来文档的最后边，用来标识标识HTML文档的结束。文档的结束。 2.HTML文件头标记文件头标记 格式格式： 功能功能：用于包含文件的基本信息（文档标题、文档搜索关键字、文：用于包含文件的基本信息（文档标题、文档搜索关键字、文档生成器等）。档生成器等）。 和和构成构成HTML文档的开头部分，在文档的开头部分，

3、在此标记对之间可以使用此标记对之间可以使用、等标记对，等标记对，这些标记对都是描述这些标记对都是描述HTML文档相关信息的标记对，文档相关信息的标记对，标记对之间的内容不会在浏览器上显示出来。标记对之间的内容不会在浏览器上显示出来。 第第3 3章章 HTMLHTML语言语言3.1.23.1.2 HTMLHTML的基本构成标记的基本构成标记 3.HTML文件标题标记文件标题标记 格式格式： 功能功能：定义文件标题。使用过浏览器的人可能都会注意到浏览器窗口：定义文件标题。使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的最上边蓝色部分显示的文本信息，那些信息

4、一般是网页的“主题主题”。要将网页的主题显示到浏览器的顶端方式其实很简单，只要在要将网页的主题显示到浏览器的顶端方式其实很简单，只要在标记对之间加入要显示的文本内容即可。标记对之间加入要显示的文本内容即可。 4.HTML文件主体标记文件主体标记 格式格式： 功能功能：是是HTML文档的主体部分，在此标记对之间文档的主体部分，在此标记对之间可包含可包含、等标记，它们所定义的文本、等标记，它们所定义的文本、图像等将会在浏览器中显示出来。图像等将会在浏览器中显示出来。 第第3 3章章 HTMLHTML语言语言3.1.23.1.2 HTMLHTML的基本构成标记的基本构成标记 HTML文档的结构形式如

5、下：文档的结构形式如下： /文档开始文档开始 /文档头开始文档头开始 /文档标题文档标题 /文档头结束文档头结束 /文档体开始文档体开始 /文档体结束文档体结束 /文档结束文档结束 第第3 3章章 HTMLHTML语言语言3.2 文档设置标记3.2.13.2.1 段落标记段落标记 1.强制换行标记强制换行标记强制换行标记强制换行标记 是单标记，其格式为：文字是单标记，其格式为：文字其用法举例如下，效果读者可自行实践查看：其用法举例如下，效果读者可自行实践查看： 强制换行标记的使用强制换行标记的使用 计算机课程计算机课程程序设计程序设计组成原理组成原理网页制作网页制作操作系统操作系统 第第3 3

6、章章 HTMLHTML语言语言3.2.13.2.1 段落标记段落标记 1.强制换段标记强制换段标记强制换段标记强制换段标记 是双标记，其格式为：是双标记，其格式为： 文字文字 其用法举例如下，效果读者可自行实践查看：其用法举例如下，效果读者可自行实践查看： 强制换段标记的使用强制换段标记的使用 南登杜陵上，南登杜陵上， 北望五陵间。北望五陵间。 秋水明落日，秋水明落日， 流光灭远山。流光灭远山。 第第3 3章章 HTMLHTML语言语言3.2.13.2.1 段落标记段落标记 有多种属性，比较常用的属性是有多种属性，比较常用的属性是align对齐方式，其基本用法对齐方式，其基本用法为：为： 属性

7、值可以是属性值可以是left（左对齐）、（左对齐）、center（居中）或（居中）或right（右对（右对齐）。齐）。其用法举例如下，效果读者可自行实践查看：其用法举例如下，效果读者可自行实践查看：文字的对齐文字的对齐左对齐左对齐居中居中右对齐右对齐 第第3 3章章 HTMLHTML语言语言3.2.13.2.1 段落标记段落标记 3. 显示预排格式标记显示预排格式标记 当用其他编辑工具编排好段文字后，其中很可能有一些当用其他编辑工具编排好段文字后，其中很可能有一些HTML文文件不支持的控制符号，如件不支持的控制符号，如Enter键、多个空格、键、多个空格、Tab键等。如果希键等。如果希望在浏览

8、网页时仍保留在编辑工具中已经排好的段落格式，可以望在浏览网页时仍保留在编辑工具中已经排好的段落格式，可以使用使用标记将预先排好的格式保留下来。显示预排格式标记标记将预先排好的格式保留下来。显示预排格式标记的格式为：的格式为：预先排好的格式预先排好的格式 4. 注释标记注释标记 与许多计算机语言一样，与许多计算机语言一样，HTML语言也提供了注释功能。浏览器语言也提供了注释功能。浏览器遇到注释标记就会自动忽略此标记中的内容。为遇到注释标记就会自动忽略此标记中的内容。为HTML文档的不文档的不同部分加上说明，是为了便于日后的阅读和修改。注释标记的格同部分加上说明，是为了便于日后的阅读和修改。注释标

9、记的格式为：式为： 第第3 3章章 HTMLHTML语言语言3.2.13.2.1 段落标记段落标记 5.分区显示标记分区显示标记 标记常用来排版较长的标记常用来排版较长的HTML段落，也可以用于格式化表，段落，也可以用于格式化表，此标记的用法与段落标记此标记的用法与段落标记非常相似。非常相似。 6.插入水平线标记插入水平线标记 在网页上插入水平线，可以将不同功能的文字、图片、表格等在网页上插入水平线，可以将不同功能的文字、图片、表格等进行分隔，使网页看起来更加整齐。进行分隔，使网页看起来更加整齐。 第第3 3章章 HTMLHTML语言语言3.2.23.2.2 文字标记文字标记 1.标题标记标题

10、标记 格式格式：， 功能功能：设置各种大小不同的标：设置各种大小不同的标题。题。 HTML语言提供了一系列对文语言提供了一系列对文本中的标题进行操作的标记对：本中的标题进行操作的标记对：，即，即共有共有6对标题的标记对。其中对标题的标记对。其中是最大的标题，是最大的标题，是最小的标题，是最小的标题，标记中标记中“h”后面的数字代表标后面的数字代表标题的级别，该数字越大标题文题的级别，该数字越大标题文本就越小。本就越小。6对标题显示效果如对标题显示效果如图所示。图所示。 第第3 3章章 HTMLHTML语言语言3.2.23.2.2 文字标记文字标记 2.字体设置标记字体设置标记 格式格式： 功能

11、功能：设置字体格式。：设置字体格式。 标记符具有标记符具有3个常用的属性：个常用的属性：size（大小）、（大小）、color（颜色）（颜色）和和face（字体）。（字体）。 size表示字体的大小，取值范围为表示字体的大小，取值范围为07，默认值是，默认值是3，取，取1时最小，时最小，取取7时最大。使用相对数值时，可以用时最大。使用相对数值时，可以用“”或或“”来指定相对于来指定相对于当前默认值的字号。如当前默认值的字号。如“+2”表示比当前默认字号大表示比当前默认字号大2号。号。 face用来设置字体，如宋体、黑体、楷体等。用来设置字体，如宋体、黑体、楷体等。 color的取值可以是十六进

12、制的取值可以是十六进制RGB颜色码，也可以是颜色码，也可以是HTML语言给定语言给定的颜色常量名。的颜色常量名。 第第3 3章章 HTMLHTML语言语言3.2.23.2.2 文字标记文字标记 3.其他字体标记其他字体标记 其他字体标记的用法举例如下，读者可自行实践效果：其他字体标记的用法举例如下，读者可自行实践效果： 其他字体标记其他字体标记粗体字粗体字斜体字斜体字加下划线加下划线小型字体小型字体大型字体大型字体 第第3 3章章 HTMLHTML语言语言3.2.23.2.2 文字标记文字标记 4.背景颜色背景颜色 设置背景颜色的一般格式为：设置背景颜色的一般格式为：或或 其用法举例如下，读者

13、可自行实践效果：其用法举例如下，读者可自行实践效果： 网页背景色的设置网页背景色的设置这是这是bgcolor=#CCCCCC时的网页背景色时的网页背景色 第第3 3章章 HTMLHTML语言语言3.2.23.2.2 文字标记文字标记 5.背景音乐背景音乐 在网页中使用在网页中使用标记创建背景音乐，标记创建背景音乐，其格式为其格式为： bgsound可以放在页面文件中的任何位置，出于阅读代码考虑，一可以放在页面文件中的任何位置，出于阅读代码考虑，一般将其放在标签后的第一个位置上。般将其放在标签后的第一个位置上。 它它有有src和和loop两个属性两个属性，其中的，其中的src是用来指定音乐文件的

14、具体是用来指定音乐文件的具体url路路径径，音乐文件可以是，音乐文件可以是wav、au或者或者midi等格式；等格式；loop用来指定背景音用来指定背景音乐循环播放的次数乐循环播放的次数，当，当loop=1时，背景音乐将会连续播放，直到时，背景音乐将会连续播放，直到浏览器开始载入下一个页面为止。浏览器开始载入下一个页面为止。 第第3 3章章 HTMLHTML语言语言3.2.33.2.3 列表标记列表标记 1.有序列表标记有序列表标记有序列表也称数字式列表，其有序列表也称数字式列表，其格式格式如下：如下： 功能功能：建立有序列表。：建立有序列表。使用使用标记建立有序列表，使用标记建立有序列表，使

15、用标记建立列表项。对标记建立列表项。对于于，其开始标记和结尾标记都是必选的，即每个表项的结，其开始标记和结尾标记都是必选的，即每个表项的结束就是下一个表项的开始。束就是下一个表项的开始。标记具有两个常用的属性：标记具有两个常用的属性：type和和start。它们分别用来设置数字。它们分别用来设置数字序列的样式和起始值。序列的样式和起始值。 第第3 3章章 HTMLHTML语言语言3.2.33.2.3 列表标记列表标记 当位于当位于标记符内时，标记符内时，标记符具有两个常用的属标记符具有两个常用的属性性：type和和value。type属性属性：用于设置数字样：用于设置数字样式，取值与式，取值与

16、ol的的type属性相同。属性相同。value属性属性：用于指定一个新：用于指定一个新的数字序列起始值，以获得非的数字序列起始值，以获得非连续性的数字序列连续性的数字序列 创建有序列表的效果如图创建有序列表的效果如图所示。所示。 第第3 3章章 HTMLHTML语言语言3.2.33.2.3 列表标记列表标记 2.有序列表的嵌套有序列表的嵌套 如果用户想用不同层次如果用户想用不同层次的编号列表来表示页面内的编号列表来表示页面内容，那么可以使用嵌套的容，那么可以使用嵌套的有序列表。在使用嵌套的有序列表。在使用嵌套的有序列表时，只需将相关有序列表时，只需将相关的列表标记符嵌套使用即的列表标记符嵌套使

17、用即可。可。 嵌套的有序列表的效果嵌套的有序列表的效果如图所示。如图所示。 第第3 3章章 HTMLHTML语言语言3.2.33.2.3 列表标记列表标记3.无序列表无序列表无序列表的格式如下：无序列表的格式如下： 列表项内列表项内容容 列表项内容列表项内容 无序列表中无序列表中type属性的取值有属性的取值有3种种:disc表示表示实心圆实心圆，为默认值；，为默认值；circle表示表示空心圆空心圆；square表示表示实心或空心的方块实心或空心的方块(取决于浏览取决于浏览器器)。 创建无序列表的效果如图所示。创建无序列表的效果如图所示。 第第3 3章章 HTMLHTML语言语言3.2.33

18、.2.3 列表标记列表标记 4.定义型列表定义型列表 定义型列表的格式如下：定义型列表的格式如下： 定义型列表以标记定义型列表以标记开始，以开始，以标记标记结束。定义型列表中结束。定义型列表中包含一系列术语和定义对；包含一系列术语和定义对；标记后为被定义的术语；标记后为被定义的术语；标标记则出现在被定义的内容前，用记则出现在被定义的内容前，用于列表的自动换行和缩排。于列表的自动换行和缩排。 定义型列表的效果如图所示。定义型列表的效果如图所示。 第第3 3章章 HTMLHTML语言语言3.2.43.2.4 层标记层标记 所谓层，就是网页内容的容器所谓层，就是网页内容的容器。层分为两种类型：。层分

19、为两种类型：CSS层和层和NetScape层。前者在层。前者在HTML文件中的层标记符使用文件中的层标记符使用div和和span，被浏览器，被浏览器Internet Explorer 4.0和和NetScape 4.0支持；后者使用支持；后者使用layer和和ilayer，被浏览器，被浏览器NetScape 4.0支持。支持。 层的基本语句如下层的基本语句如下： 其中，其中，id表示层的编号；表示层的编号；style表示层的方式；表示层的方式；left表示层左边界距离浏表示层左边界距离浏览器窗口左边界的距离；览器窗口左边界的距离；top表示层上边界距离浏览器窗口上边界的距离；表示层上边界距离浏

20、览器窗口上边界的距离；width表示层的宽度；表示层的宽度；height表示层的高度；表示层的高度；zindex表示在垂直平面的表示在垂直平面的方向上层的顺序号。方向上层的顺序号。 第第3 3章章 HTMLHTML语言语言3.2.53.2.5 表单标记表单标记 表单是表单是用于实现网页浏览者（客户用于实现网页浏览者（客户端）与服务器（或者说网页所有者）端）与服务器（或者说网页所有者）之间信息交互的一种页面元素，在之间信息交互的一种页面元素，在网络上被广泛用于各种信息的搜集网络上被广泛用于各种信息的搜集和反馈。右图所示为一个用于进行和反馈。右图所示为一个用于进行网站用户登录系统的表单。网站用户登

21、录系统的表单。 表单的标记符为表单的标记符为，其格式如下：，其格式如下： 其中，其中，action属性提供处理表单的程序地址，其处理程序可以由站点支属性提供处理表单的程序地址，其处理程序可以由站点支持的任何语言来编写，如持的任何语言来编写，如ASP、JSP、PHP等等;method属性是用户数据提交给属性是用户数据提交给服务器的方法。服务器的方法。 第第3 3章章 HTMLHTML语言语言3.2.53.2.5 表单标记表单标记 1.发送与重置发送与重置 标记格式为：标记格式为： 其中，其中，type表示按钮的动作属表示按钮的动作属性。前者为提交表单按钮，性。前者为提交表单按钮，“#”符号代表按

22、钮上显示的文本，如符号代表按钮上显示的文本，如“发送表单发送表单”或或“填好了填好了”等；等；后者为重置按钮，后者为重置按钮，“#”符号代表符号代表按钮上显示的文本，如按钮上显示的文本，如“重新填重新填写写”等。等。 下面介绍一些表单中的常用项。下面介绍一些表单中的常用项。 2.文字输入与密码输入文字输入与密码输入 标记格式为：标记格式为： 其中，其中，*为为text或或password；#为文本框中的初始值；为文本框中的初始值；n1为文本框为文本框的长度；的长度；n2为文本框的最大长度。为文本框的最大长度。 第第3 3章章 HTMLHTML语言语言3.2.53.2.5 表单标记表单标记 3.

23、复选框和单选按钮复选框和单选按钮（1）复选框复选框（CheckBox）标记格式为）标记格式为 其中，加入其中，加入“checked”表示该复选框表示该复选框在网页下载之后呈选中状态。在网页下载之后呈选中状态。（2）单选按钮单选按钮（RadioButton）标记格式）标记格式为：为：同样，加入同样，加入“checked”表示该复选框在网表示该复选框在网页下载之后呈选中状态。页下载之后呈选中状态。 4.选择菜单框选择菜单框（Selectable Menu） 其其标记格式为：标记格式为： 若若标记变为标记变为，则表示该项被默认，则表示该项被默认选中。选中。 第第3 3章章 HTMLHTML语言语言3

24、.2.63.2.6 框架标记框架标记 使用框架可以将浏览器分成多个区域，每个区域都是相对独立并可以显使用框架可以将浏览器分成多个区域，每个区域都是相对独立并可以显示的示的HTML文件。它的基本结构如下文件。它的基本结构如下: 框架的标记符为框架的标记符为，表示一个框架组，它可以将框架分为横，表示一个框架组，它可以将框架分为横的部分和竖的部分，而的部分和竖的部分，而表示单个框架。表示单个框架。 第第3 3章章 HTMLHTML语言语言3.3 图像标记 插入图像插入图像/ /视频标记视频标记 在在HTML中，一般用中，一般用来表示插入的图像。其中，来表示插入的图像。其中，img表示图像的标记符。一

25、般使用的图像格式有表示图像的标记符。一般使用的图像格式有GIF和和JPG，二者，二者的加载方法一样。在使用图像标记符时有两件事值得注意：一是文的加载方法一样。在使用图像标记符时有两件事值得注意：一是文件名，二是路径。如果文件名和路径不正确，网页中的图像是无法件名，二是路径。如果文件名和路径不正确，网页中的图像是无法显示的。显示的。 第第3 3章章 HTMLHTML语言语言 插入图像插入图像/ /视频标记视频标记图像标记符的使用方法如下：图像标记符的使用方法如下：图像标记符图像标记符显示在显示在D盘下盘下photo文件夹中名为文件夹中名为flower.jpg的图片的图片效果如图所示。效果如图所示

26、。 插入视频标记的方法和插入图插入视频标记的方法和插入图像标记的相同。像标记的相同。 第第3 3章章 HTMLHTML语言语言3.4 表格和框架 3.4.1 3.4.1 表格的基本构成表格的基本构成 1. 所有的表格都是包含在所有的表格都是包含在“”标记对里。标记对里。表格的边框宽度由它的表格的边框宽度由它的border属性规定，属性规定，其基本格式为其基本格式为：表格内表格内容容 边框宽度默认为边框宽度默认为0时，浏览器将时，浏览器将不显示表格的边框。不显示表格的边框。 2. 标记符用于显示表格的标记符用于显示表格的标题，直接位于标题，直接位于之后。之后。 可以用可以用标记符的标记符的ali

27、gn属性属性控制表格标题的显示位置，控制表格标题的显示位置，align属性可以属性可以有有4种取值种取值：top(标标题放在表格上部题放在表格上部)、bottom(标题标题放在表格下部放在表格下部)、left(标题放在表标题放在表格上部的左侧格上部的左侧)和和right(标题放在表标题放在表格上部的右侧格上部的右侧)。默认情况下使用。默认情况下使用top。 第第3 3章章 HTMLHTML语言语言 3.4.1 3.4.1 表格的基本构成表格的基本构成 3. 标记符用于定义标记符用于定义表格的行。每一个表表格的行。每一个表格行，都对应一对格行，都对应一对标记符。标记符。 4.和和 表格中的每个单

28、元格，都对应于一个表格中的每个单元格，都对应于一个标记符或者标记符或者标记符，用于标记表格的标记符，用于标记表格的内容，其中可以包括文字、图像或其他对象。内容，其中可以包括文字、图像或其他对象。 与与的功能和用法几乎完全相同的功能和用法几乎完全相同(可以任意使用，但效果略有不同可以任意使用，但效果略有不同)，唯一不，唯一不同之处在于同之处在于表示普通表格数据，而表示普通表格数据，而表示表格的行列标题数据表示表格的行列标题数据(也就是通常也就是通常所说的表头所说的表头)。和和的结束标记符都的结束标记符都可以省略，并且可以不包括任何内容可以省略，并且可以不包括任何内容(此时此时即为空单元格即为空单

29、元格)。 第第3 3章章 HTMLHTML语言语言 3.4.1 3.4.1 表格的基本构成表格的基本构成创建表格的效果如图所示。创建表格的效果如图所示。 第第3 3章章 HTMLHTML语言语言 3.4.2 3.4.2 表格的基本属性表格的基本属性 3.定义表格单元格标记定义表格单元格标记和和的属性的属性 标记的属性主要有标记的属性主要有 ： (1)width属性：设置单元格的宽度，单位是属性：设置单元格的宽度，单位是pixel。例如：。例如：内容内容 (2)height属性：设置单元格的高度，单位是属性：设置单元格的高度，单位是pixel。例如：。例如：内容内容 (3)align属性：设置单

30、元格中内容的水平对齐方式。例如：属性：设置单元格中内容的水平对齐方式。例如：内容内容 （4)valign属性：设置单元格中内容的垂直对齐方式。例如：属性：设置单元格中内容的垂直对齐方式。例如：内容内容 (5)bgcolor属性：设置单元格的背景颜色。例如：属性：设置单元格的背景颜色。例如：内容内容 (6)nowarp属性：强制单元格的内容不换行，该标记没有属性值，如果不属性：强制单元格的内容不换行，该标记没有属性值，如果不加此属性值则单元格默认为自动换行。例如：加此属性值则单元格默认为自动换行。例如： 内容内容 第第3 3章章 HTMLHTML语言语言 3.4.2 3.4.2 表格的基本属性表

31、格的基本属性 2.定义表格行标记定义表格行标记的属性的属性 标记用来创建表格中的一行。此标记只能放在标记用来创建表格中的一行。此标记只能放在标记内部标记内部使用，而在此标记对之间加入文本将是无用的，因为在使用，而在此标记对之间加入文本将是无用的，因为在之间只之间只能紧跟能紧跟标记对才是有效的语法。标记对才是有效的语法。 标记的主要属性有标记的主要属性有bgcolor、align、valign。 bgcolor取值是十六进制取值是十六进制RGB颜色或颜色常量名；颜色或颜色常量名； align取值为取值为left、center或或right； valign取值为取值为top(靠顶端对齐靠顶端对齐)

32、、middle(居中间对齐居中间对齐)或或bottom(靠底靠底部对齐部对齐)。 第第3 3章章 HTMLHTML语言语言 3.4.2 3.4.2 表格的基本属性表格的基本属性 2.定义表格行标记定义表格行标记的属性的属性 标记用来创建表格中的一行。此标记只能放在标记用来创建表格中的一行。此标记只能放在标记内部标记内部使用，而在此标记对之间加入文本将是无用的，因为在使用，而在此标记对之间加入文本将是无用的，因为在之间只之间只能紧跟能紧跟标记对才是有效的语法。标记对才是有效的语法。 标记的主要属性有标记的主要属性有bgcolor、align、valign。 bgcolor取值是十六进制取值是十六

33、进制RGB颜色或颜色常量名；颜色或颜色常量名； align取值为取值为left、center或或right； valign取值为取值为top(靠顶端对齐靠顶端对齐)、middle(居中间对齐居中间对齐)或或bottom(靠底靠底部对齐部对齐)。 第第3 3章章 HTMLHTML语言语言 3.4.2 3.4.2 表格的基本属性表格的基本属性 标记中的属性值标记中的属性值 bgcolor=colorvalue设置单元格背景颜色设置单元格背景颜色 align=alignstyle设置单元格水平对齐方式设置单元格水平对齐方式 valign=valignstyle设置单元格垂直对齐方式设置单元格垂直对齐

34、方式 width=size设置单元格宽度设置单元格宽度 height=size设置单元格高度设置单元格高度 rowspan=number设置单元格所占的行数设置单元格所占的行数 colspan=number设置单元格所占的列数设置单元格所占的列数 第第3 3章章 HTMLHTML语言语言 3.4.2 3.4.2 表格的基本属性表格的基本属性 4.合并单元格合并单元格 1）rowspan属性：行合并属性：行合并 在在和和标记内使用标记内使用rowspan属性可以进行行合并，属性可以进行行合并，rowspan的取值表示向下延伸合并垂直单元格的行数。实际上，的取值表示向下延伸合并垂直单元格的行数。实

35、际上，rowspan这个单这个单词本身的含义就是跨越的行数。词本身的含义就是跨越的行数。 2）colspan属性：列合并属性：列合并 在在和和标记内使用标记内使用colspan属性可以进行列合并，属性可以进行列合并，colspan的的取值表示向右延伸合并水平单元格的列数。实际上，取值表示向右延伸合并水平单元格的列数。实际上，colspan这个单词本这个单词本身的含义就是跨越的列数。身的含义就是跨越的列数。 例如：例如：合并合并3个水平单元格个水平单元格合并合并2个垂直单元格个垂直单元格 第第3 3章章 HTMLHTML语言语言 3.4.3 3.4.3 表格的尺寸设置表格的尺寸设置 1.cell

36、spacing属性属性 该属性的功能是设置表格间隙。使用该属性的功能是设置表格间隙。使用cellspacing属性可以控制单属性可以控制单元格之间的空白，属性的取值通常都采用像素数。其基本格式为：元格之间的空白，属性的取值通常都采用像素数。其基本格式为： 例如，例如，表示表格单元之间的距，表示表格单元之间的距离是离是8个像素点。个像素点。 2.cellpadding属性属性 该属性的功能是设置表格内部空隙。使用该属性的功能是设置表格内部空隙。使用cellpadding属性可以控制属性可以控制表格分隔线和数据之间的距离，属性的取值通常都采用像素数。其基本表格分隔线和数据之间的距离，属性的取值通常

37、都采用像素数。其基本格式为：格式为： 例如，例如，表示表格单元边缘与单元，表示表格单元边缘与单元内容之间的距离是内容之间的距离是8个像素点。个像素点。 第第3 3章章 HTMLHTML语言语言 3.4.4 3.4.4 边框与分隔线边框与分隔线 1.frame属性属性 格式为格式为： 表格边框表示表格最外层的表格边框表示表格最外层的4条框线，可以用条框线，可以用frame属性进行控制。属性进行控制。该属性的取值可以是：该属性的取值可以是：void:表示无边框。表示无边框。void是默认值，即默认时不显示边框。是默认值，即默认时不显示边框。above:表示仅有顶部边框。表示仅有顶部边框。below

38、:表示仅有底部边框。表示仅有底部边框。hsides:表示仅有顶部边框和底部边框。表示仅有顶部边框和底部边框。lhs:表示仅有左侧边框。表示仅有左侧边框。rhs:表示仅有右侧边框。表示仅有右侧边框。vsides:表示仅有左、右侧边框。表示仅有左、右侧边框。box:表示包含全部表示包含全部4个边框。个边框。border:表示包含全部表示包含全部4个边框。个边框。 第第3 3章章 HTMLHTML语言语言 3.4.4 3.4.4 边框与分隔线边框与分隔线 2.rules属性属性 格式为：格式为： 其中其中rules属性用于控制是否显示以及如何显示单元格之间的分隔属性用于控制是否显示以及如何显示单元格

39、之间的分隔线，取值可以是以下几种：线，取值可以是以下几种：none:表示无分隔线。表示无分隔线。none是默认值，即默认时不显示单元格间的是默认值，即默认时不显示单元格间的分隔线。分隔线。all:表示包括所有分隔线。表示包括所有分隔线。rows:表示仅有行分隔线。表示仅有行分隔线。cols:表示仅有列分隔线。表示仅有列分隔线。groups:表示仅在行组和列组间有分隔线。表示仅在行组和列组间有分隔线。 第第3 3章章 HTMLHTML语言语言 3.4.5 3.4.5 表格在页面中的对齐表格在页面中的对齐 表格在页面中的对齐与对齐页面其他内容一样，可以直接在表格在页面中的对齐与对齐页面其他内容一样

40、，可以直接在标记符中使用标记符中使用align属性。其基本格式为：属性。其基本格式为： 其中其中align属性的取值可以为属性的取值可以为left、center或或right。 另外，也可以用另外，也可以用标记符的标记符的align属性设置表格的对齐，属性设置表格的对齐，方法是将方法是将标记包含在标记包含在和和之间之间 第第3 3章章 HTMLHTML语言语言 3.4.6 3.4.6 表格内文字的对齐表格内文字的对齐 1.表格内容的水平对齐表格内容的水平对齐 设置水平对齐的方法是：在标设置水平对齐的方法是：在标记符记符、内使用内使用align属性。其基本格式为：属性。其基本格式为： 其中其中a

41、lign属性的取值可以为属性的取值可以为left、center、right或或justify，分，分别表示左对齐、居中、右对齐和两别表示左对齐、居中、右对齐和两端对齐。端对齐。 其效果如图所示。其效果如图所示。 第第3 3章章 HTMLHTML语言语言 3.4.6 3.4.6 表格内文字的对齐表格内文字的对齐 2.表格内容的垂直对齐表格内容的垂直对齐 设置表格数据在垂直方向的对设置表格数据在垂直方向的对齐时齐时,应在应在、标记符标记符中使用中使用valign属性，其基本格式为属性，其基本格式为: valign属性的取值为属性的取值为top、middle、bottom和和baseline，分，分

42、别代表顶对齐、垂直居中、底部对别代表顶对齐、垂直居中、底部对齐和基线对齐。齐和基线对齐。 其效果如图所示。其效果如图所示。 第第3 3章章 HTMLHTML语言语言 3.4.7 3.4.7 设置单元格的大小设置单元格的大小 如果要分割页面区域，经常要如果要分割页面区域，经常要做的就是设置单元格的大小。由于做的就是设置单元格的大小。由于表格能将网页划分为任意大小的矩表格能将网页划分为任意大小的矩形区域，所以表格在网页中更多地形区域，所以表格在网页中更多地用做排版工具，用户可以用做排版工具，用户可以使用标记使用标记符的符的width和和height属性设置单元属性设置单元格的大小格的大小，这两个属

43、性的取值可以，这两个属性的取值可以是像素数，也可以为百分比，多数是像素数，也可以为百分比，多数情况下使用绝对的像素数。情况下使用绝对的像素数。 其效果如图所示。其效果如图所示。 第第3 3章章 HTMLHTML语言语言 3.4.8 3.4.8 设置表格和单元格的背景设置表格和单元格的背景 与设置整个页面的背景与设置整个页面的背景类似，表格或单元格也可以类似，表格或单元格也可以设置背景色或图案，设置方设置背景色或图案，设置方法为：法为：在在或或标标记符内记符内,使用使用bgcolor属性设属性设置背景颜色置背景颜色，使用，使用background属性设置背景属性设置背景图案。图案。 其效果如图所

44、示。其效果如图所示。 第第3 3章章 HTMLHTML语言语言 3.4.9 3.4.9 框架的应用框架的应用 一幅一幅Web页面分为几个部分，每一个部分都可以独立地显示页面分为几个部分，每一个部分都可以独立地显示一个一个HTML文件，形成多个窗体。多窗口页面也称为框架页面。文件，形成多个窗体。多窗口页面也称为框架页面。 框架的基本语法格式为：框架的基本语法格式为： 在框架集网页中，除了基本的在框架集网页中，除了基本的、等标记符以外，等标记符以外，还包括框架集标记符还包括框架集标记符（必须有结束标记符（必须有结束标记符）和框架标记符和框架标记符（没有结束标记符）。（没有结束标记符）。 第第3 3

45、章章 HTMLHTML语言语言 3.4.9 3.4.9 框架的应用框架的应用 框架集网页示例如下：框架集网页示例如下：框架集网页示例框架集网页示例 显示效果如图所示。显示效果如图所示。 第第3 3章章 HTMLHTML语言语言 3.4.9 3.4.9 框架的应用框架的应用 由于框架是按行和列进行排列的，所以建立框架结构时由于框架是按行和列进行排列的，所以建立框架结构时,使用使用标记符的标记符的rows属性或属性或cols属性，分别可以构造出横向分隔框架属性，分别可以构造出横向分隔框架和纵向分隔框架，根据和纵向分隔框架，根据rows属性或属性或cols属性的取值，可以确定框架结构中包属性的取值，

46、可以确定框架结构中包含多少框架，相应也就必须设置对应个数的含多少框架，相应也就必须设置对应个数的标记符。标记符。 rows属性和属性和cols属性分别用来定义横向框架或纵向框架属性分别用来定义横向框架或纵向框架，它们一般不，它们一般不同时使用，如果需要创建同时包含横向框架和纵向框架的文档，应使用嵌套同时使用，如果需要创建同时包含横向框架和纵向框架的文档，应使用嵌套框架。框架。 rows属性和属性和cols属性的取值包括以下属性的取值包括以下3种类型：种类型： （1）直接指定像素值。）直接指定像素值。 （2）指定百分数，即相对于浏览器窗口大小的百分数。）指定百分数，即相对于浏览器窗口大小的百分数

47、。 （3）使用）使用“n，*”指定相对大小，其中指定相对大小，其中n 是大于或等于是大于或等于1的整数。的整数。 第第3 3章章 HTMLHTML语言语言 3.4.9 3.4.9 框架的应用框架的应用 水平方向框架示例如下：水平方向框架示例如下：水平方向框架水平方向框架 显示效果如图所示。显示效果如图所示。 第第3 3章章 HTMLHTML语言语言 3.4.9 3.4.9 框架的应用框架的应用 垂直方向框架示例如下：垂直方向框架示例如下：垂直方向框架垂直方向框架显示效果如图所示。显示效果如图所示。 第第3 3章章 HTMLHTML语言语言 3.4.10 3.4.10 框架的嵌套框架的嵌套 有时网页设计者需要创建有时网页设计者需要创建一些复杂的框架集，如同时包一些复杂的框架集，如同时包含横向和纵向的框架，这时可含横向和纵向的框架，这时可以使用框架嵌套。在使用框架以使用框架嵌套。在使用框架嵌套时，只需在使用嵌套时，只需在使用标记框架时使用标记框架时使用，再标记一个框架集。再标记一个框架集。 嵌套框