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

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

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

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

4、 注意： l目的页面文件若在本站点内，适合使用相对URL l目的页面文件若在其他站点内，适合使用绝对URL 当前页面上供单击的链接文本 示例 8 创建到本页面某个位置的链接 n 目的：在长文本页面内，可能需要在各个部分间跳转， 方便阅读。 n 基本概念： l 源锚点：页面上可以单击的链接 l 目的地锚点：源链接指向的特定位置 n 方法： 第一步：在目的地锚点处使用 目的地锚点文本 第二步：在源锚点处使用 源锚点文本(当前页面上供单击的链接文本) 注意： 一个页面中的id(或name)属性值必须唯一。 示例 9 1.4 创建电子邮件的链接 n格式： n示例： 当前页面上供单击的链接文本 需要咨询

5、请联系我 10 设置链接的属性target n 作用：指定包含在链接目标文件显示的位置 n 语法格式： n 属性值： 当前页面上供单击的链接文本 _blank在新窗口中打开链接 _parent在父窗体中打开链接 _self在当前窗体打开链接,此为默认值 _top在当前窗体打开链接， 并替换当前的整个窗体(框架页) 框架名在对应框架页中打开 11 设置链接的属性更改颜色 n 由标签中的一组相关属性设置 n 各属性及作用： n 示例： 属性名作用默认值 text属性非可链接文字的颜色黑色 link属性可链接文字的颜色蓝色 vlink属性已经被访问过的可链接文字的颜色粟色 alink属性正被单击的可

6、链接文字的颜色红色 链接文本 示例 12 1.5 以图像作为链接 n作用：单击图像实现链接到其他文件 n格式： n说明： l把图像创建为链接用以实现导航按钮 l图像元素仍然可以使用图像的所有属性 示例 13 图像映射 n 服务器端图像映射： l 服务器的脚本文件处理用户单击的位置坐标指示链接 的目标页面。 l 具体实现方法依赖于服务器类型及脚本。 n 客户端图像映射： 浏览器根据用户单击的位置指示链接的目标页面。 可用HTML（XHTML）代码实现。 n 本次仅讨论客户端图像映射的实现。 14 客户端图像映射 n 实现方法： n 第一步：使用插入作为地图的图片 n 第二步：用画图工具找到并记下

7、热点区域需要的各点坐标 n 第三步：设置和元素，定义映射图 15 area元素设置 n shape属性和coords属性 shape值创建的形状所需热点区域点坐标 default没有定义区域 无 rectangle (rect)矩形左上角、右下角（共4个数字） circle (circ)圆形圆心、半径（共3个数字） polygon (poly)多边形每个顶点一对坐标，自动闭合 示例 使用映射图 n使用映射图： n图像使用原则 n1. 在设计网页时，应该反复斟酌哪些图像 必须要，哪些图像可有可无，对于那些不 是必需的图像，要舍得忍痛割爱； n2. 把图像尽量做得小一点 n1. 同时使用图像和AL

8、T的纯文本格式 16 示例 二、表格 2.1 定义表格的基本语法 2.2 表格的定义 2.3 表格行的控制 2.4 单元格的控制 2.5 表格的分组 2.6 设置表格的标题caption 2.1 2.1 定义表格的基本语法定义表格的基本语法 在在HTML中，表格的建立将中，表格的建立将 运用运用、 四个标签完成。四个标签完成。 定义表格标签 标签用于定义一个表格元素，标签用于定义一个表格元素， 一个表格元素，是由数个横行一个表格元素，是由数个横行 （）、单元格（）、单元格（）与表头）与表头 单元格（单元格（）子元素所组成。）子元素所组成。 定义表行标签 标签用于定义表格的一行，在标签用于定义表

9、格的一行，在 一组一组标签内可建立一行表格，标签内可建立一行表格， 也可以包含数组由也可以包含数组由或或标签标签 所定义的单元格。所定义的单元格。 定义单元格标签 标签用于定义表格的单元格，标签用于定义表格的单元格， 标签必须放在标签必须放在标签内。标签内。 数据标签数据标签是成对出现标签，首标签是成对出现标签，首标签 和尾标签和尾标签之间的内容就是该单之间的内容就是该单 元格中的具体数据。元格中的具体数据。 注：在一个最基本的表格元素中，必须包注：在一个最基本的表格元素中，必须包 含一组含一组标签、一组标签、一组标签与一标签与一 组组标签。标签。 定义表头标签 例子 标签用于定义表格内的表头

10、单标签用于定义表格内的表头单 元格，此单元格中的文字将以粗体元格，此单元格中的文字将以粗体 的方式显示的方式显示 标签是成对出现标签，首标签标签是成对出现标签，首标签 和尾标签和尾标签之间的内容就是之间的内容就是 位于该单元格的表头元素内容。位于该单元格的表头元素内容。 在一个表格的定义语法中也可以不在一个表格的定义语法中也可以不 使用使用标签，定义表头单元格。标签，定义表头单元格。 是用于定义一个表格元素的标签。是用于定义一个表格元素的标签。 标签的属性主要有标签的属性主要有border、 bordercolor、bordercolorlight、 bordercolordark、width

11、、height、align、 bgcolor、background、cellapacing、 cellpadding、frame和和rules，它们都是可选，它们都是可选 的。的。 2.2 2.2 表格的定义表格的定义 设置边框尺寸的语法如下：设置边框尺寸的语法如下： border属性的参数值是数字，属性的参数值是数字，表示表格表示表格 边框宽度边框宽度所占的像素点数。例如，所占的像素点数。例如，表示表格的边框宽度为表示表格的边框宽度为10个像个像 素点。素点。 2.2.1 2.2.1 设置表格边框的尺寸设置表格边框的尺寸borderborder 设置表格边框颜色的基本语法如下：设置表格边框颜

12、色的基本语法如下： 设置表格边框颜色的亮度的基本语法如下：设置表格边框颜色的亮度的基本语法如下： 其中，其中，“#”取值为取值为16进制的颜色代码，进制的颜色代码， 其代码可参见颜色代码表。其代码可参见颜色代码表。 2.2.2 2.2.2 设置表格边框的颜色设置表格边框的颜色 2.2.3 2.2.3 设置表格的尺寸设置表格的尺寸width/heightwidth/height 设置表格尺寸的语法如下：设置表格尺寸的语法如下： width和和height属性的作用是指定表格的大属性的作用是指定表格的大 小。其中小。其中width属性用以规定表格的宽度，属性用以规定表格的宽度， height属性用

13、以规定表格的高度属性用以规定表格的高度。这两个属。这两个属 性的参数值性的参数值可以是数字或百分数可以是数字或百分数 2.2.3 2.2.3 设置表格的尺寸设置表格的尺寸width/heightwidth/height 例：例： 表示该表格的宽度为表示该表格的宽度为200个像素点，高度个像素点，高度 为为浏览器窗口浏览器窗口高度的高度的50%。 设置表格的位置的基本语法如下：设置表格的位置的基本语法如下： align属性的参数值为属性的参数值为left、center和和 right之一，分别之一，分别 表示表格位于其相邻文表示表格位于其相邻文 字的左侧、表格水平居中和表格位于与字的左侧、表格水

14、平居中和表格位于与 其相邻的文字右侧。其相邻的文字右侧。 2.2.4 2.2.4 设置表格的位置设置表格的位置alignalign 2.2.5 2.2.5 设置表格的背景颜色或背景图像设置表格的背景颜色或背景图像 设置表格的背景颜色或背景图像的基本设置表格的背景颜色或背景图像的基本 语法如下：语法如下： 其中，其中，“#”取值为取值为16进制的颜色代码。进制的颜色代码。 2.2.6 2.2.6 设置格框线设置格框线 的宽度的宽度cellspacingcellspacing 设置格框线宽度的语法如下：设置格框线宽度的语法如下： 在在格与格之间有间隔线，称其为格框格与格之间有间隔线，称其为格框 线

15、线。使用。使用 cellspacing属性可以指定格框线属性可以指定格框线 的宽度。的宽度。 该属性的参数值取像素值，该属性的参数值取像素值，默认值为默认值为2。 加宽了格框线，表格会变得大一些。加宽了格框线，表格会变得大一些。 2.2.7 2.2.7 设置格框与设置格框与 内容的空隙内容的空隙cellpaddingcellpadding 设置格框与内容的空隙的语法如下：设置格框与内容的空隙的语法如下： cellpadding属性用于指定单元格内容与属性用于指定单元格内容与 单元格边界之间空白距离的大小单元格边界之间空白距离的大小。该属性。该属性 的参数值取像素值，表示单元格内容与上的参数值取

16、像素值，表示单元格内容与上 下边界之间空白距离的高度所占的像素点下边界之间空白距离的高度所占的像素点 数以及单元格内容与左右边界之间空白距数以及单元格内容与左右边界之间空白距 离的宽度所占的像素点数。离的宽度所占的像素点数。 设置表格的左边框、右边框、上边框、下边框为显示设置表格的左边框、右边框、上边框、下边框为显示 或者隐藏。或者隐藏。 设置表格边框显示状态的基本语法如下：设置表格边框显示状态的基本语法如下： 显示整个表格边框显示整个表格边框 不显示表格边框不显示表格边框 只显示表格的上下边框只显示表格的上下边框 只显示表格的左右边框只显示表格的左右边框 只显示表格的上边框只显示表格的上边框

17、 只显示表格的下边框只显示表格的下边框 只显示表格的左边框只显示表格的左边框 只显示表格的右边框只显示表格的右边框 2.2.8 2.2.8 设置表格设置表格 边框的显示状态边框的显示状态frameframe 2.2.9 2.2.9 设置分隔线的显示状态设置分隔线的显示状态rulesrules 设置表格中分隔线的显示状态设置表格中分隔线的显示状态，各种效果如图所示。，各种效果如图所示。 设置表格中分隔线的显示状态的基本语法如下：设置表格中分隔线的显示状态的基本语法如下： 显示所有分隔线显示所有分隔线 只显示组与组的分隔线只显示组与组的分隔线 只显示行与行的分隔线只显示行与行的分隔线 只显示列与列

18、的分隔线只显示列与列的分隔线 所有分隔线都不显示所有分隔线都不显示 2.3 2.3 表格行的控制表格行的控制 HTML中的表格是按行组织的。一个表中的表格是按行组织的。一个表 格由几行组成，就要有几个行标签与之相格由几行组成，就要有几个行标签与之相 应对。应对。标签有标签有height、bordercolor、 bgcolor、align和和valign属性，它们都是可属性，它们都是可 选的。选的。 height属性可控制表格内某行的高度属性可控制表格内某行的高度， 此属性的设置语法如下：此属性的设置语法如下： 数值的设置值为一整数，其单位为像数值的设置值为一整数，其单位为像 素（素（Pixe

19、l）。）。 2.1 2.1 设置行的高度设置行的高度heightheight bordercolor属性用于控制表格某行属性用于控制表格某行 内边框颜色内边框颜色，此属性的设置语法如下：，此属性的设置语法如下： 其中，其中，“#”取值为取值为16进制的颜色代进制的颜色代 码。码。 2.1.2 2.1.2 设置行内框的颜色设置行内框的颜色bordercolorbordercolor bgcolor属性可以控制表格中该行属性可以控制表格中该行 单元格的背景颜色单元格的背景颜色，设置语法如下：，设置语法如下： 其中，其中，“#”取值为取值为16进制的颜色代进制的颜色代 码。码。 2.1.3 2.1.

20、3 设置行的背景颜色设置行的背景颜色bgcolorbgcolor align属性可以控制表格中该行单元格内属性可以控制表格中该行单元格内 文字的水平对齐方式文字的水平对齐方式，设置语法如下：，设置语法如下： 其中，参数值为其中，参数值为left、center、right之之 一，分别表示该行中各单元格内容是左对一，分别表示该行中各单元格内容是左对 齐、水平居中和右对齐的。齐、水平居中和右对齐的。align属性的缺属性的缺 省值为省值为left。 2.1.4 2.1.4 设置行的设置行的 文字水平对齐方式文字水平对齐方式alignalign 40 valign属性可以控制表格中该行单元属性可以控

21、制表格中该行单元 格内文字的垂直方向对齐方式格内文字的垂直方向对齐方式，设置语法，设置语法 如下：如下： 其中，参数值为其中，参数值为top、middle和和bottom 之一，分别表示该行中各单元格内容是上之一，分别表示该行中各单元格内容是上 对齐、垂直居中和下对齐的。对齐、垂直居中和下对齐的。valign属性的属性的 缺省值为缺省值为middle。 2.1.5 2.1.5 设置行的文字设置行的文字 垂直对齐方式垂直对齐方式valignvalign 41 和和标签都是用于规定单元格内容标签都是用于规定单元格内容 的。除了表头元素是以粗体显示这一点外，的。除了表头元素是以粗体显示这一点外， 表

22、头元素和具体数据元素几乎没有什么区表头元素和具体数据元素几乎没有什么区 别。别。 和和标签的所有属性及相应的属性标签的所有属性及相应的属性 功能是完全一样的。功能是完全一样的。 和和标签的属标签的属 性有性有bordercolor、bgcolor、background、 width、align、valign、rowspan、colspan， 它们都是可选的。它们都是可选的。 2.4 2.4 单元格的控制单元格的控制 42 当当bordercolor属性设置在属性设置在或或标标 签中时，将可控制表格内某单元格的边框签中时，将可控制表格内某单元格的边框 颜色颜色，此属性的设置语法如下：，此属性的设

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

24、或或标签中时，标签中时， 可控制表格中某单元格的宽度，设置语法可控制表格中某单元格的宽度，设置语法 如下：如下： 此属性的参数值可以是数字或百分数，此属性的参数值可以是数字或百分数， 其中数字表示此单元格宽度所占的像素点其中数字表示此单元格宽度所占的像素点 数，百分数表示此单元格的宽度占整个表数，百分数表示此单元格的宽度占整个表 格宽度的百分比。格宽度的百分比。 2.4.3 2.4.3 设置设置 单元格的宽度单元格的宽度widthwidth 45 在表格的使用中，有时会遇到某些数据占多在表格的使用中，有时会遇到某些数据占多 行多列的情况。可以使用行多列的情况。可以使用或或标签中的标签中的 co

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

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

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

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

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