项目教程：图像标签与路径

项目要求

项目展示

作品展示如图6.1、6.2所示。

图6.1　作品展示一

图6.2　作品展示 二

教学内容

1. 常用图像格式

（1）GIF格式。GIF最突出的之处就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。

（2）PNG格式。PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。

（3）JPG格式。JPG所能显示的颜色比GIF和PNG要多得多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。

2. 图像标签

在网页中要想显示图像就需要使用图像标签以及它的相关属性。图像标签的基本语法格式如下：

〈img src=“图像URL”〉

图像标签的属性如表6.1所示。

(www.xing528.com)

图像标签

表6.1　图像标签

3. 相对路径和绝对路径

路径

（1）相对路径。相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

相对路径的三种情况：

① 图像文件和html文件位于同一文件夹：

只需输入图像文件的名字即可，如〈img src=”logo.gif” /〉

② 图像文件位于html文件的下一级文件夹：

输入文件夹名和文件名，之间用“/”隔开，如：〈img src=”imgs/logo.gif” /〉

③ 图像文件位于html文件的上一级文件夹：

在文件名之前加入“../”，如果是上两级，则需要使用“../../”，以此类推，如：

〈img src=”../imgs/logo.gif” /〉

（2）绝对路径。绝对路径一般是指带有盘符的路径，例如完整的网络地址“http://www.itcast.cn/images/logo.gif”。

项目训练