第四章 网页图像与链接.

《第四章 网页图像与链接.》由会员分享，可在线阅读，更多相关《第四章 网页图像与链接.（38页珍藏版）》请在文档大全上搜索。

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 hspace4.1.7 hspace 和和 vspacevspace

2、属性属性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 和和 absbottom

8、；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 外部链接外部链接4.3.54.3.5 锚点链接锚点链接4.3.6 4.3.6 其他链接其他链接4.3.1 超链接概述超链接概述超链接是网页页面中最重要的元素之一超链接是网页页面中最重要的元素之

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

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