第四章 网页图像与链接

1、本章内容本章内容4.1 4.1 网页图像网页图像4.2 4.2 图文混排图文混排4.3 4.3 网页链接网页链接4.4 4.4 图像映射图像映射4.1 网页图像网页图像4.1.1 4.1.1 图像的基本语法图像的基本语法4.1.2 4.1.2 源属性（源属性（SrcSrc）4.1.3 alt 4.1.3 alt 属性属性4.1.4 height4.1.4 height和和widthwidth属性属性4.1.5 border 4.1.5 border 属性属性4.1.6 align 4.1.6 align 属性属性4.1.7 hspace 4.1.7 hspace 和和 vspace vspac

2、e 属性属性4.1.1 图像的基本语法图像的基本语法在在 HTML 中，图像由中，图像由 标签定义。标签定义。 是空标签是空标签，意思是说，它只包含属性，并且没有闭合标签。，意思是说，它只包含属性，并且没有闭合标签。基本语法：基本语法： 语法解析：语法解析： src定义图像路径，定义图像路径， width定义图像宽度，定义图像宽度， height定义图定义图像高度，像高度， alt定义图像说明文字，定义图像说明文字， border定义图像边框粗细（边框颜定义图像边框粗细（边框颜色在色在css里设置）。里设置）。4.1.2 源属性（源属性（Src）src 指指 source ，源属性的值是图像的

3、，源属性的值是图像的 URL 地址。地址。 标签的标签的 src 属性是必需的属性是必需的。它的值是图像文件的。它的值是图像文件的 URL，也就是，也就是引用该图像的文件的的引用该图像的文件的的绝对路径或相对路径绝对路径或相对路径。绝对绝对 URL ： 指向其他站点指向其他站点（比（比src=http:/ 相对相对 URL ： 指向站点内的文件指向站点内的文件（比如（比如 src=/i/image.gif） 定义图像的语法是：定义图像的语法是： 4.1.3 alt 属性属性 标签的标签的 alt 属性指定了替代文本，用于在属性指定了替代文本，用于在图像无法显示或者用图像无法显示或者用户禁用图像

4、显示户禁用图像显示时，代替图像显示在浏览器中的内容。时，代替图像显示在浏览器中的内容。当用户当用户把鼠标移到图像上方把鼠标移到图像上方，最新的浏览器会在一个文本框中显示描，最新的浏览器会在一个文本框中显示描述性文本。述性文本。 alt 属性的值是一个最多可以包含属性的值是一个最多可以包含 1024 个字符的字符串，其中包括空个字符的字符串，其中包括空格和标点。格和标点。这个字符串必须包含在引号中这个字符串必须包含在引号中。这段。这段 alt 文本中可以包含文本中可以包含对特殊字符的实体引用，但它对特殊字符的实体引用，但它不允许包含其他类别的标记，尤其是不不允许包含其他类别的标记，尤其是不允许有

5、任何样式标签允许有任何样式标签。 基本语法：基本语法： 4.1.4 height和和width属性属性（详解详解） 标签的标签的 height 和和 width 属性设置图像的尺寸。属性设置图像的尺寸。为图像指定为图像指定 height 和和 width 属性是一个好习惯。如果设置了这些属属性是一个好习惯。如果设置了这些属性，就性，就可以在页面加载时为图像预留空间可以在页面加载时为图像预留空间。请不要通过请不要通过 height 和和 width 属性来缩放图像属性来缩放图像。正确的做法是，在网。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。页上使用图像之前，应该通过

6、软件把图像处理为合适的尺寸。基本语法：基本语法： 4.1.5 border 属性属性 标签的标签的 border 属性属性规定图像周围的边框的宽度规定图像周围的边框的宽度，就是说可以，就是说可以增加或去掉图像的边框。增加或去掉图像的边框。默认地，图像是没有边框的（除非图像在默认地，图像是没有边框的（除非图像在 a 元素内部）。元素内部）。 使用使用 border 属性和一个用像素表示的宽度值就可以去掉属性和一个用像素表示的宽度值就可以去掉 (border=“0”) 或加宽图像的边框。或加宽图像的边框。该属性在该属性在 HTML 4 和和 XHTML 中也不再被推荐使用了，同样是应该被中也不再被

7、推荐使用了，同样是应该被样式所代替，样式所代替，但却依然被流行浏览器很好地支持着但却依然被流行浏览器很好地支持着。 基本语法：基本语法： 4.1.6 align 属性属性 标签的标签的 align 属性定义了图像属性定义了图像相对于周围元素相对于周围元素的水平和垂直对的水平和垂直对齐方式。齐方式。HTML 和和 XHTML 标准指定了标准指定了 5 种图像对齐属性值：种图像对齐属性值：left、right、top 、middle 和和 bottom。Netscape 又增加了又增加了 4 种垂直对齐属性：种垂直对齐属性：texttop、absmiddle、baseline 和和 absbott

8、om；Internet Explorer 则增加了则增加了 center。 基本语法：基本语法： align属性值属性值值值 描述描述 left 把图像对齐到左边把图像对齐到左边 right 把图像对齐到右边把图像对齐到右边 middle 把图像与中央对齐把图像与中央对齐 top 把图像与顶部对齐把图像与顶部对齐 bottom 把图像与底部对齐把图像与底部对齐 4.1.7 hspace 和和 vspace 属性属性 标签的标签的 hspace 和和 vspace 属性可以属性可以设置图像周围的空间设置图像周围的空间。hspace，以像素为单位，指定图像左边和右边的文字与图像之间的间，以像素为单

9、位，指定图像左边和右边的文字与图像之间的间距；而距；而 vspace 值则是上面的下面的文字与图像之间的距离的像素数。值则是上面的下面的文字与图像之间的距离的像素数。基本语法：基本语法： 4.2 图文混排图文混排图文混排练习图文混排练习4.3 网页链接网页链接4.3.1 4.3.1 超链接概述超链接概述4.3.2 4.3.2 超链接分类超链接分类4.3.3 4.3.3 内部链接内部链接4.3.4 4.3.4 外部链接外部链接.5 锚点链接锚点链接4.3.6 4.3.6 其他链接其他链接4.3.1 超链接概述超链接概述超链接是网页页面中最重要的元素之一超链接是网页页面中最重要的元

10、素之一，也是一个网站的灵魂。一个，也是一个网站的灵魂。一个网站是由多个页面组成的，各个网页链接在一起后，才能真正构成一网站是由多个页面组成的，各个网页链接在一起后，才能真正构成一个网站。个网站。所谓的超链接是所谓的超链接是指从一个网页指向一个目标的连接关系指从一个网页指向一个目标的连接关系,这个目标可以这个目标可以是另一个网页是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。一个电子邮件地址，一个文件，甚至是一个应用程序。 在一个网页中用来超链接的对象，可以是在一个网页中用来超链接的对象

11、，可以是一段文本一段文本或者是或者是一个图片一个图片。链接构成链接构成（1）位置点（）位置点（anchor）标签）标签，将文本或图标标识为链接。，将文本或图标标识为链接。（2）属性）属性href= ，放在位置点起始标签中，如：，放在位置点起始标签中，如： （3）地址（称为）地址（称为URL），告诉浏览器要链接的文件，），告诉浏览器要链接的文件，URL用于标识用于标识Web或本地磁盘上的文件位置或本地磁盘上的文件位置，这些地址可能指向某个，这些地址可能指向某个HTML文档，也可文档，也可能指向文档引用的其他元素，如图形、小程序、脚本和其他文件。能指向文档引用的其他元素，如图形、小程序、脚本和其他

12、文件。URL总是放在引号中，例如总是放在引号中，例如address.html。基本语法基本语法基本语法：基本语法： 属性（属性（ attribute ）描述描述href指定链接地址，必含属性指定链接地址，必含属性name给链接命名给链接命名title给链接指定提示文字给链接指定提示文字target指定链接的目标窗口指定链接的目标窗口4.3.2 超链接分类超链接分类按照链接路径的不同按照链接路径的不同,网页中超链接一般分为以下网页中超链接一般分为以下3种类型种类型: 内部链接内部链接,锚点链接锚点链接和和外部链接外部链接。 如果按照使用对象的不同，网页中的链接又可以分为：如果按照使用对象的不同，

13、网页中的链接又可以分为：文本超链接文本超链接，图像超链接图像超链接，E-mail链接链接，锚点链接锚点链接，多媒体文件链接多媒体文件链接，空链接空链接等。等。 4.3.3 内部链接内部链接内部链接指的是在内部链接指的是在同一个网站内部，不同同一个网站内部，不同HTML页面之间的链接关系页面之间的链接关系。基本语法：基本语法： 链接文字链接文字语法解释语法解释 ：通过：通过href属性指定地址；属性指定地址；file_name为要链接站内文件的为要链接站内文件的URL路径；路径； 链接文字链接文字为用鼠标左键点击文字内容。为用鼠标左键点击文字内容。URL（Uniform Resource Loc

14、ator 统一资源定位符）统一资源定位符）绝对绝对URL ，指，指地址的一个全部路径过程地址的一个全部路径过程，如：，如： http:/ ，指，指这个文件所在的位置与其他文件的关系这个文件所在的位置与其他文件的关系，也可，也可以说是相对位置。以说是相对位置。同级目录同级目录：直接引用文件名：直接引用文件名下级目录下级目录：目录名：目录名/文件名文件名上级目录上级目录：./文件名文件名u href=a.html 本地当前路径下的文件本地当前路径下的文件u href=web/a.html 本地当前路径下称做本地当前路径下称做web子目录下的文件子目录下的文件u href=./a.html 本地当前

15、目录的上一级子目录下的文件本地当前目录的上一级子目录下的文件u href=././a.html 本地当前目录的上两级子目录下的文件本地当前目录的上两级子目录下的文件4.3.4 外部链接外部链接所谓外部链接，指的是所谓外部链接，指的是跳转到当前网站外部，和其他网站中的页面或跳转到当前网站外部，和其他网站中的页面或元素之间的链接关系元素之间的链接关系。这种链接在一般情况下需要。这种链接在一般情况下需要输入绝对的链接地输入绝对的链接地址址。制作外部链接的时候，使用制作外部链接的时候，使用URL来定位万维网信息，这种方式将简单、来定位万维网信息，这种方式将简单、明了、准确地描述信息所在的地点。明了、准

16、确地描述信息所在的地点。 4.3.5 锚点链接（锚点链接（name或或Id）锚记链接又名锚记链接又名书签链接书签链接，链接文档中的特定位置可，链接文档中的特定位置可在同一页面中链接在同一页面中链接，也可在不同页面中链接。也可在不同页面中链接。如果内容较多会导致页面过长，需要不断拖拉滚动条才能看清所有内如果内容较多会导致页面过长，需要不断拖拉滚动条才能看清所有内容，这样会很不方便，如果要寻找特定的内容，就更加不方便，此时容，这样会很不方便，如果要寻找特定的内容，就更加不方便，此时可以使用锚点链接。可以使用锚点链接。基本语法：基本语法：文字文字文字链接文字链接4.3.6 其他链接其他链接空链接：空

17、链接：空空文字链接：文字链接：文字文字图像链接：图像链接： 图像图像电子邮件链接：电子邮件链接： 文字文字下载链接：下载链接：下载下载4.4 图像映射图像映射4.4.1 4.4.1 图像映射概念图像映射概念4.4.2 4.4.2 标签标签4.4.3 4.4.3 标签标签4.4.4 4.4.4 矩形（矩形（rectangle rectangle ）4.4.5 4.4.5 圆形（圆形（circle circle ）4.4.6 4.4.6 多边形多边形 （polygon polygon ）4.4.1 图像映射概念图像映射概念图像映射（图像映射（image-map）指带有可点击区域的一幅图像，也称为）

18、指带有可点击区域的一幅图像，也称为热点热点链接链接。一张图片可以拥有多个超链接，在其上切分成不同的区域，每一个区一张图片可以拥有多个超链接，在其上切分成不同的区域，每一个区域可以链接到不同的地址，这称为域可以链接到不同的地址，这称为图像的热区图像的热区。每一个热区可以有各。每一个热区可以有各自的链接地址，浏览者单击热区后，就会转到相应的地址，这就是图自的链接地址，浏览者单击热区后，就会转到相应的地址，这就是图像映射。像映射。三种标签：三种标签：、。注意：注意：为双标签，为双标签， 为单标签为单标签。基本语法基本语法 4.4.2 标签标签 定义一个客户端图像映射。定义一个客户端图像映射。中的中的

19、 usemap 属性可引用属性可引用 中的中的 id 或或 name 属性（取决属性（取决于浏览器），于浏览器），所以我们应同时向所以我们应同时向 添加添加 id 和和 name 属性属性。语法格式：语法格式： 所有主流浏览器都支持所有主流浏览器都支持 标签。标签。4.4.3 标签标签 标签标签定义图像映射中的区域定义图像映射中的区域（注：图像映射指得是带有可点击（注：图像映射指得是带有可点击区域的图像区域的图像 ）。）。标签总是嵌套在标签总是嵌套在 标签中。标签中。基本语法：基本语法： Shape属性的属性值属性的属性值属性值属性值描述描述rect矩形区域矩形区域circle椭圆形区域椭圆形

20、区域poly多边形区域多边形区域4.4.4 矩形（矩形（rectangle ） 基本语法：基本语法： 语法解释：第一对坐标是矩形的一个角的顶点坐标，另一对坐标是对语法解释：第一对坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，角的顶点坐标，“0,0” 是图像左上角的原点坐标。是图像左上角的原点坐标。 （0，0）5050200200实例参考实例参考 矩形热点矩形热点.html.html4.4.5 圆形（圆形（circle ）基本语法：基本语法： 语法解释：语法解释：x 和和 y 定义了圆心的位置（定义了圆心的位置（0,0 是图像左上角的坐标），是图像左上角的坐标），r 是以像素为单位的圆形半径。是以像素为单位的圆形半径。 （0，0）100100实例参考实例参考 圆形热点圆形热点.html.html504.4.6 多边形多边形 （po