3.1 添加图像

3.1.1 图像的基本格式

我们今天所看到的网页之所以越来越丰富多彩，是因为添加了各种各样的图像，对网页进行了美化。当前万维网上流行的图像格式以GIF及JPEG为主，还有一种PNG格式的图像文件也越来越多地被应用于网络中。以下分别对这3种图像格式的特点进行介绍。

1.GIF格式

GIF 格式采用 LZW 压缩，是通过压缩相同颜色的色块来使图像文件变小的。由于 LZW压缩不会造成任何品质上的损失，而且压缩效率高，再加上 GIF格式在各种平台上都可以使用，所以很适合在互联网上使用，但它只能处理256色。

GIF格式适合商标、新闻式的标题或其他小于256色的图像。

LZW压缩是一种能将数据中重复的字符串加以编码制作成数据流的压缩法，通常应用于GIF图像文件的压缩。

2.JPEG格式

对于照片之类全彩的图像，通常以JPEG格式来进行压缩，也可以说，JPEG格式通常用来保存超过256色的图像。JPEG的压缩过程会造成一些图像数据的损失，所造成的“损失”是剔除了一些视觉上不容易觉察的部分。如果剔除适当，则不但在视觉上能够接受，而且图像的压缩效率也会提高，使图像文件变小；反之，剔除太多图像数据，则会造成图像过度失真。

3.PNG格式

PNG格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备GIF图像格式的大部分优点，而且还支持48 bit的色彩、更快的交错显示、跨平台的图像亮度控制、更多层的透明度设置。

3.1.2 添加图像的方法

有了图像文件之后，就可以使用＜img＞标签将图像插入网页中，从而达到美化页面的效果。其语法格式如下：

其中，src用来设置图像文件所在的地址，这一路径可以是相对地址，也可以是绝对地址。

绝对地址就是主页上的文件或目录在硬盘上的真正路径，如路径“D：\mr\5\5-1.jpg”。使用绝对路径定位链接目标文件比较清晰，但是这样做有两个缺点：一是需要输入更多的内容；二是如果该文件被移动了，就需要重新设置所有的相关链接。例如，在本地测试网页时链接全部可用，但是到了互联网上就不可用了。

相对地址是最适合网站的内部文件引用的。只要是属于同一网站之下的，即使不在同一个目录下，相对地址也非常适用。只要处于站点文件夹之内，相对地址可以自由地在文件之间构建链接。这种地址形式利用的是构建链接的两个文件之间的相对关系不受站点文件夹所处服务器位置的影响。因此，这种书写形式省略了绝对地址中的相同部分。这样做的优点是，在站点文件夹所在服务器地址发生改变时，文件夹中的所有内部文件地址都不会出问题。

相对地址的使用方法为：

● 如果要引用的文件位于该文件的同一目录中，则只需输入要链接文档的名称即可，如5-1.jpg。

● 如果要引用的文件位于该文件的下一级目录中，则先输入目录名，然后加“/”，再输入文件名，如mr/5-2.jpg。

● 如果要引用的文件位于该文件的上一级目录中，则先输入“../”，再输入目录名、文件名，如../mr/5-2.jpg。

下面列举一个实例。在HTML页面中，首先使用＜h2＞标签添加网页标题，然后分别使用＜p＞和＜img＞标签添加文本和图片，实现五子棋游戏简介的页面展示。具体代码如下（实例位置：资源包\MR\源码\03\01）：

编辑完代码后，在浏览器中打开文件，显示页面效果如图3.1所示。