第三讲 用HTML建立超链接和表格

1、2超链接1.1 链接的基本概念1.2 目录和目录结构1.3 使用创建链接1.4 创建到电子邮箱1.5 以图像作为链接31.1 链接的基本概念n 什么是链接？l是Web与其他媒体最本质的不同之处。l是用户在组成Web站点的多个页面之间切换的途径。l是用户从本站点访问其他站点和其他媒体的途径。n 链接由什么组成？l目的地（destination）：访问者点击链接时将会切换到的网页 或媒体，又称锚（anchor）。l标签（label）：提供给访问者的点击处，可以是文本、图像 或者两者兼有。l显示目标（target）：指定目的地出现的窗口或框架。41.2 目录和目录结构 n目录：分类存放站点网页使用到

2、的各种文件。n目录结构：多个目录之间的组织关系。l根目录：保存站点的主目录l子目录：位于其他目录中的目录l父目录：包含其他目录的目录n示例：我的站点是（ ）目录 我的站点是图书的 （ ）目录 图书是音乐的 （ ）目录下载是音乐的 （ ）目录根父子平行51.2 目录和目录结构文件在目录结构中的位置使用URL表示n 绝对地址（绝对URL）： 显示文件的完整路径，包括 协议模式、服务器名称、 完整路径 和 文件名。n 相对地址（相对URL）： 以包含URL本身的文件的位置为参照点， 描述目标文件的位置。p上级文件 父目录: 使用./ 回溯到上一级父目录p同一目录 平行目录: 不需指定任何内容p下级文

3、件 子目录: 使用子目录名/引用http:/ 表示简洁 2. 修改站点域名或目录名时，不需修改其子目录下的所有链接。61.3 利用创建链接n 目的：建立从当前页面到目的文件的链接n 语法格式：n 注意：l目的文件若在本站点内，适合使用相对路径 目的文件若在其他站点内，适合使用绝对路径l页面上显示的链接文本将被自动加上下划线l该链接文本也可以是图像文件 当前页面上供单击的链接文本当前页面上供单击的链接文本7创建到另一页面的链接n 目的：建立从当前页面到目的页面的链接n 语法格式：n 注意：l目的页面文件若在本站点内，适合使用相对URLl目的页面文件若在其他站点内，适合使用绝对URL 当前页面上供

4、单击的链接文本示例8创建到本页面某个位置的链接n 目的：在长文本页面内，可能需要在各个部分间跳转，方便阅读。n 基本概念：l 源锚点：页面上可以单击的链接l 目的地锚点：源链接指向的特定位置n 方法：第一步：在目的地锚点处使用 目的地锚点文本 第二步：在源锚点处使用源锚点文本(当前页面上供单击的链接文本)注意：一个页面中的id(或name)属性值必须唯一。示例91.4 创建电子邮件的链接n格式：n示例： 当前页面上供单击的链接文本需要咨询请联系我10设置链接的属性targetn 作用：指定包含在链接目标文件显示的位置n 语法格式：n 属性值： 当前页面上供单击的链接文本_blank在新窗口中打

5、开链接_parent在父窗体中打开链接_self在当前窗体打开链接,此为默认值_top在当前窗体打开链接，并替换当前的整个窗体(框架页)框架名在对应框架页中打开11设置链接的属性更改颜色n 由标签中的一组相关属性设置n 各属性及作用：n 示例：属性名作用默认值text属性非可链接文字的颜色黑色link属性可链接文字的颜色蓝色vlink属性已经被访问过的可链接文字的颜色粟色alink属性正被单击的可链接文字的颜色红色 链接文本 示例121.5 以图像作为链接n作用：单击图像实现链接到其他文件n格式：n说明：l把图像创建为链接用以实现导航按钮l图像元素仍然可以使用图像的所有属性 示例13图像映射n

6、 服务器端图像映射：l 服务器的脚本文件处理用户单击的位置坐标指示链接的目标页面。l 具体实现方法依赖于服务器类型及脚本。n 客户端图像映射： 浏览器根据用户单击的位置指示链接的目标页面。 可用HTML（XHTML）代码实现。n 本次仅讨论客户端图像映射的实现。14客户端图像映射n 实现方法：n 第一步：使用插入作为地图的图片 n 第二步：用画图工具找到并记下热点区域需要的各点坐标n 第三步：设置和元素，定义映射图 15area元素设置n shape属性和coords属性shape值创建的形状所需热点区域点坐标default没有定义区域 无rectangle (rect)矩形左上角、右下角（共

7、4个数字）circle (circ)圆形圆心、半径（共3个数字）polygon (poly)多边形每个顶点一对坐标，自动闭合示例使用映射图n使用映射图：n图像使用原则n1. 在设计网页时，应该反复斟酌哪些图像必须要，哪些图像可有可无，对于那些不是必需的图像，要舍得忍痛割爱； n2. 把图像尽量做得小一点n1. 同时使用图像和ALT的纯文本格式16示例二、表格 2.1 定义表格的基本语法2.2 表格的定义 2.3 表格行的控制 2.4 单元格的控制 2.5 表格的分组 2.6 设置表格的标题caption 2.1 2.1 定义表格的基本语法定义表格的基本语法 在在HTML中，表格的建立将中，表格

8、的建立将运用运用、四个标签完成。四个标签完成。 定义表格标签 标签用于定义一个表格元素，标签用于定义一个表格元素，一个表格元素，是由数个横行一个表格元素，是由数个横行（）、单元格（）、单元格（）与表头）与表头单元格（单元格（）子元素所组成。）子元素所组成。定义表行标签 标签用于定义表格的一行，在标签用于定义表格的一行，在一组一组标签内可建立一行表格，标签内可建立一行表格，也可以包含数组由也可以包含数组由或或标签标签所定义的单元格。所定义的单元格。定义单元格标签标签用于定义表格的单元格，标签用于定义表格的单元格，标签必须放在标签必须放在标签内。标签内。数据标签数据标签是成对出现标签，首标签是成对

9、出现标签，首标签和尾标签和尾标签之间的内容就是该单之间的内容就是该单元格中的具体数据。元格中的具体数据。注：在一个最基本的表格元素中，必须包注：在一个最基本的表格元素中，必须包含一组含一组标签、一组标签、一组标签与一标签与一组组标签。标签。 定义表头标签 例子标签用于定义表格内的表头单标签用于定义表格内的表头单元格，此单元格中的文字将以粗体元格，此单元格中的文字将以粗体的方式显示的方式显示标签是成对出现标签，首标签标签是成对出现标签，首标签和尾标签和尾标签之间的内容就是之间的内容就是位于该单元格的表头元素内容。位于该单元格的表头元素内容。在一个表格的定义语法中也可以不在一个表格的定义语法中也可

10、以不使用使用标签，定义表头单元格。标签，定义表头单元格。 是用于定义一个表格元素的标签。是用于定义一个表格元素的标签。标签的属性主要有标签的属性主要有border、bordercolor、bordercolorlight、bordercolordark、width、height、align、bgcolor、background、cellapacing、cellpadding、frame和和rules，它们都是可选，它们都是可选的。的。2.2 2.2 表格的定义表格的定义 设置边框尺寸的语法如下：设置边框尺寸的语法如下： border属性的参数值是数字，属性的参数值是数字，表示表格表示表格边框宽

11、度边框宽度所占的像素点数。例如，所占的像素点数。例如，表示表格的边框宽度为表示表格的边框宽度为10个像个像素点。素点。2.2.1 2.2.1 设置表格边框的尺寸设置表格边框的尺寸borderborder 设置表格边框颜色的基本语法如下：设置表格边框颜色的基本语法如下： 设置表格边框颜色的亮度的基本语法如下：设置表格边框颜色的亮度的基本语法如下： 其中，其中，“#”取值为取值为16进制的颜色代码，进制的颜色代码，其代码可参见颜色代码表。其代码可参见颜色代码表。2.2.2 2.2.2 设置表格边框的颜色设置表格边框的颜色2.2.3 2.2.3 设置表格的尺寸设置表格的尺寸width/heightw

12、idth/height 设置表格尺寸的语法如下：设置表格尺寸的语法如下： width和和height属性的作用是指定表格的大属性的作用是指定表格的大小。其中小。其中width属性用以规定表格的宽度，属性用以规定表格的宽度，height属性用以规定表格的高度属性用以规定表格的高度。这两个属。这两个属性的参数值性的参数值可以是数字或百分数可以是数字或百分数2.2.3 2.2.3 设置表格的尺寸设置表格的尺寸width/heightwidth/height例：例：表示该表格的宽度为表示该表格的宽度为200个像素点，高度个像素点，高度为为浏览器窗口浏览器窗口高度的高度的50%。 设置表格的位置的基本语

13、法如下：设置表格的位置的基本语法如下： align属性的参数值为属性的参数值为left、center和和right之一，分别之一，分别 表示表格位于其相邻文表示表格位于其相邻文字的左侧、表格水平居中和表格位于与字的左侧、表格水平居中和表格位于与其相邻的文字右侧。其相邻的文字右侧。2.2.4 2.2.4 设置表格的位置设置表格的位置alignalign2.2.5 2.2.5 设置表格的背景颜色或背景图像设置表格的背景颜色或背景图像 设置表格的背景颜色或背景图像的基本设置表格的背景颜色或背景图像的基本语法如下：语法如下： 其中，其中，“#”取值为取值为16进制的颜色代码。进制的颜色代码。2.2.6

14、 2.2.6 设置格框线设置格框线的宽度的宽度cellspacingcellspacing 设置格框线宽度的语法如下：设置格框线宽度的语法如下： 在在格与格之间有间隔线，称其为格框格与格之间有间隔线，称其为格框线线。使用。使用 cellspacing属性可以指定格框线属性可以指定格框线的宽度。的宽度。 该属性的参数值取像素值，该属性的参数值取像素值，默认值为默认值为2。加宽了格框线，表格会变得大一些。加宽了格框线，表格会变得大一些。2.2.7 2.2.7 设置格框与设置格框与内容的空隙内容的空隙cellpaddingcellpadding 设置格框与内容的空隙的语法如下：设置格框与内容的空隙的

15、语法如下： cellpadding属性用于指定单元格内容与属性用于指定单元格内容与单元格边界之间空白距离的大小单元格边界之间空白距离的大小。该属性。该属性的参数值取像素值，表示单元格内容与上的参数值取像素值，表示单元格内容与上下边界之间空白距离的高度所占的像素点下边界之间空白距离的高度所占的像素点数以及单元格内容与左右边界之间空白距数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。离的宽度所占的像素点数。 设置表格的左边框、右边框、上边框、下边框为显示设置表格的左边框、右边框、上边框、下边框为显示或者隐藏。或者隐藏。设置表格边框显示状态的基本语法如下：设置表格边框显示状态的基本语法如

16、下： 显示整个表格边框显示整个表格边框 不显示表格边框不显示表格边框 只显示表格的上下边框只显示表格的上下边框 只显示表格的左右边框只显示表格的左右边框 只显示表格的上边框只显示表格的上边框 只显示表格的下边框只显示表格的下边框 只显示表格的左边框只显示表格的左边框 只显示表格的右边框只显示表格的右边框 2.2.8 2.2.8 设置表格设置表格边框的显示状态边框的显示状态frameframe2.2.9 2.2.9 设置分隔线的显示状态设置分隔线的显示状态rulesrules设置表格中分隔线的显示状态设置表格中分隔线的显示状态，各种效果如图所示。，各种效果如图所示。 设置表格中分隔线的显示状态的

17、基本语法如下：设置表格中分隔线的显示状态的基本语法如下： 显示所有分隔线显示所有分隔线 只显示组与组的分隔线只显示组与组的分隔线 只显示行与行的分隔线只显示行与行的分隔线 只显示列与列的分隔线只显示列与列的分隔线 所有分隔线都不显示所有分隔线都不显示 2.3 2.3 表格行的控制表格行的控制 HTML中的表格是按行组织的。一个表中的表格是按行组织的。一个表格由几行组成，就要有几个行标签与之相格由几行组成，就要有几个行标签与之相应对。应对。标签有标签有height、bordercolor、bgcolor、align和和valign属性，它们都是可属性，它们都是可选的。选的。 height属性可控

18、制表格内某行的高度属性可控制表格内某行的高度，此属性的设置语法如下：此属性的设置语法如下： 数值的设置值为一整数，其单位为像数值的设置值为一整数，其单位为像素（素（Pixel）。）。2.1 2.1 设置行的高度设置行的高度heightheight bordercolor属性用于控制表格某行属性用于控制表格某行内边框颜色内边框颜色，此属性的设置语法如下：，此属性的设置语法如下： 其中，其中，“#”取值为取值为16进制的颜色代进制的颜色代码。码。2.1.2 2.1.2 设置行内框的颜色设置行内框的颜色bordercolorbordercolor bgcolor属性可以控制表格中该行属性可以控制表格

19、中该行单元格的背景颜色单元格的背景颜色，设置语法如下：，设置语法如下： 其中，其中，“#”取值为取值为16进制的颜色代进制的颜色代码。码。 2.1.3 2.1.3 设置行的背景颜色设置行的背景颜色bgcolorbgcolor align属性可以控制表格中该行单元格内属性可以控制表格中该行单元格内文字的水平对齐方式文字的水平对齐方式，设置语法如下：，设置语法如下： 其中，参数值为其中，参数值为left、center、right之之一，分别表示该行中各单元格内容是左对一，分别表示该行中各单元格内容是左对齐、水平居中和右对齐的。齐、水平居中和右对齐的。align属性的缺属性的缺省值为省值为left。

20、 2.1.4 2.1.4 设置行的设置行的文字水平对齐方式文字水平对齐方式alignalign40valign属性可以控制表格中该行单元属性可以控制表格中该行单元格内文字的垂直方向对齐方式格内文字的垂直方向对齐方式，设置语法，设置语法如下：如下： 其中，参数值为其中，参数值为top、middle和和bottom之一，分别表示该行中各单元格内容是上之一，分别表示该行中各单元格内容是上对齐、垂直居中和下对齐的。对齐、垂直居中和下对齐的。valign属性的属性的缺省值为缺省值为middle。2.1.5 2.1.5 设置行的文字设置行的文字垂直对齐方式垂直对齐方式valignvalign41和和标签都

21、是用于规定单元格内容标签都是用于规定单元格内容的。除了表头元素是以粗体显示这一点外，的。除了表头元素是以粗体显示这一点外，表头元素和具体数据元素几乎没有什么区表头元素和具体数据元素几乎没有什么区别。别。和和标签的所有属性及相应的属性标签的所有属性及相应的属性功能是完全一样的。功能是完全一样的。 和和标签的属标签的属性有性有bordercolor、bgcolor、background、width、align、valign、rowspan、colspan，它们都是可选的。它们都是可选的。2.4 2.4 单元格的控制单元格的控制42 当当bordercolor属性设置在属性设置在或或标标签中时，将可

22、控制表格内某单元格的边框签中时，将可控制表格内某单元格的边框颜色颜色，此属性的设置语法如下：，此属性的设置语法如下： 其中，其中，“#”取值为取值为16进制的颜色代码。进制的颜色代码。2.4.1 2.4.1 设置单元格设置单元格边框的颜色边框的颜色bordercolorbordercolor43 当当bgcolor/background属性使用在属性使用在或或标签时，可以控制表格中某单元格标签时，可以控制表格中某单元格的背景颜色和背景图像的背景颜色和背景图像，设置语法如下：，设置语法如下： 或或 其中其中“#”的取值为的取值为16进制颜色代码。进制颜色代码。2.4.2 2.4.2 设置单元格的

23、设置单元格的背景颜色和背景图像背景颜色和背景图像44 当当width属性设置在属性设置在或或标签中时，标签中时，可控制表格中某单元格的宽度，设置语法可控制表格中某单元格的宽度，设置语法如下：如下： 此属性的参数值可以是数字或百分数，此属性的参数值可以是数字或百分数，其中数字表示此单元格宽度所占的像素点其中数字表示此单元格宽度所占的像素点数，百分数表示此单元格的宽度占整个表数，百分数表示此单元格的宽度占整个表格宽度的百分比。格宽度的百分比。 2.4.3 2.4.3 设置设置单元格的宽度单元格的宽度widthwidth45 在表格的使用中，有时会遇到某些数据占多在表格的使用中，有时会遇到某些数据占

24、多行多列的情况。可以使用行多列的情况。可以使用或或标签中的标签中的colspan和和rowspan属性来实现属性来实现。设置语法如下：。设置语法如下： 或或 rowspan属性的参数值是数字，表示该单元格属性的参数值是数字，表示该单元格所跨的行数。该属性的缺省值为所跨的行数。该属性的缺省值为1。 colspan属性的参数值是数字，表示该单元属性的参数值是数字，表示该单元格所跨的列数。该属性的缺省值也是格所跨的列数。该属性的缺省值也是1。2.4.4 2.4.4 设置跨多行跨多列的单元格设置跨多行跨多列的单元格46可以在可以在和和标签中使用标签中使用align和和valign属属性调整单元格中内容

25、的左右、上下位置。性调整单元格中内容的左右、上下位置。 align属性的设置语法如下：属性的设置语法如下： align属性用于规定单元格内容在水平方向属性用于规定单元格内容在水平方向上的位置。属性的参数值为上的位置。属性的参数值为left、center和和right之一，分别表示该单元格内容是左对齐、水平之一，分别表示该单元格内容是左对齐、水平居中和右对齐的。缺省时，单元格内容是左对居中和右对齐的。缺省时，单元格内容是左对齐的。齐的。2.4.5 2.4.5 设置单元格内文字的对齐方式设置单元格内文字的对齐方式47 valign属性的设置语法如下：属性的设置语法如下： valign属性用于规定单

26、元格内容在垂直属性用于规定单元格内容在垂直方向上位置。属性的参数值为方向上位置。属性的参数值为top、middle和和bottom之一，分别表示该单元格之一，分别表示该单元格内容是上对齐、垂直居中和下对齐的。缺内容是上对齐、垂直居中和下对齐的。缺省时，单元格内容是垂直居中的。省时，单元格内容是垂直居中的。2.4.5 2.4.5 设置单元格内文字的对齐方式设置单元格内文字的对齐方式2.5表格的分组49 HTML允许文档编辑者将表格按行分组。允许文档编辑者将表格按行分组。每一组由表头、表格主体和尾注三部分组成。每一组由表头、表格主体和尾注三部分组成。其中尾注部分是可选的。其中尾注部分是可选的。表格

27、的按行分组是通过使用表头行标签表格的按行分组是通过使用表头行标签、表格主体标签、表格主体标签和尾注标签和尾注标签来实现的。来实现的。2.5.1 2.5.1 表格的行分组表格的行分组thead/tbody/tfootthead/tbody/tfoot50标签是成对标签标签是成对标签，首标签，首标签和和尾标签尾标签之间的内容是一系列由表头之间的内容是一系列由表头标签标识的表头元素。我们标签标识的表头元素。我们可以在可以在标签中规定表头行中所有表头元素的公共属标签中规定表头行中所有表头元素的公共属性性。标签拥有的属性以及属性对应标签拥有的属性以及属性对应的功能和的功能和标签完全一样标签完全一样。2.

28、5.1 2.5.1 表格的行分组表格的行分组thead/tbody/tfootthead/tbody/tfoot51和和标签也是成对标签，其中标签也是成对标签，其中标签用于规定表格主体部分的共有标签用于规定表格主体部分的共有特性特性,标签用于规定尾注的特性。标签用于规定尾注的特性。实实践中，践中，标签很少使用。标签很少使用。2.5.1 2.5.1 表格的行分组表格的行分组thead/tbody/tfootthead/tbody/tfoot52 HTML使用使用标签来将表格按列分组标签来将表格按列分组。基本语法设置如下：基本语法设置如下： 标签有两个属性：标签有两个属性：span和和align，它，它们都是可选的。们都是可选的。span属性的参数值为数字，表示该属性的参数值为数字，表示该组包含的列数组包含的列数。该属性的缺省值为。该属性的缺省值为1。align属性用属性用以规定该组所跨列中所有单元格内容在水平方向上以规定该组所跨列中所有单元格内容在水平方向上的位置。该属性的参数值为的位置。该属性的参数值为left、center和和right之一，之一，分别表示各单元格内容是左对齐、水平居中和右对分别表示各单元格内容是左对齐、水平居中和右对齐的。齐的。2.5.2 2.5.2 表格的列分组表格的列分组