3.1　添加图像

3.1.1　图像的基本格式

如今的网页越来越丰富多彩，是因为添加了各种各样的图像，对网页进行了美化。当前万维网上流行的图像格式以GIF和JPEG为主，另外，PNG格式的图像文件也越来越多地被应用于网络中。下面分别对这3种图像格式进行介绍。

1. GIF格式

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

GIF格式适用于商标、新闻式的标题或其他小于256色的图像。想要将图像以GIF的格式存储，可以使用LZW压缩方法。

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

2. JPEG格式

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

3. PNG格式

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

3.1.2　在HTML中添加图像

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

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

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

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

相对地址的使用方法如下。

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

（2）如果要引用的文件位于该文件的下一级目录中，则只需首先输入目录名，然后加“/”，最后输入文件名即可，如mr/5-2.jpg。

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

下面通过一个实例，在HTML网页中，分别通过<h2>标签添加网页的标题，然后分别使用<p>标签和<img>标签添加文本与图片，实现五子棋的游戏简介。具体代码如下：

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