2.7　图像标签和超链接标签

2.7.1　网页中的图像

一图抵千言，图片是网页中不可缺少的元素，会使网页更加生动，可以描述更复杂的问题。在网页中巧妙地使用图片，可以使网页图文并茂，为网页增色不少。网页支持多种图片格式，并且可以对插入的图片设置宽度和高度。

网页中使用的图片格式可是GIF、JPEG、BMP、TIFF、PNG等，其中使用最广泛的是JPEG、GIF和PNG这3种格式。它们的相同点是都经过了压缩，压缩比越高，图像品质越差。

2.7.2　图像标签的基本语法

图像标签的基本语法如下：

其中，src属性用于指定图片源文件的路径，是<img>标签必不可少的属性。alt属性指定的替代文字，表示图像无法显示时（如图片路径错误或网速太慢等）替代显示的文本，这样，即使当图片无法显示时，用户还是可以看到网页丢失的信息内容，如图2.11所示。

title属性可以提供额外的提示或帮助信息，当鼠标移至图片上时显示该提示信息，方便用户使用。代码如示例2.9所示。

示例2.9：

在浏览器中的效果如图2.12所示。

2.7.3　设置图片的宽度和高度

在HTML文档中，还可以设置插入图片的显示大小，一般是按原尺寸来显示，但也可以任意设置显示尺寸。设置图片尺寸时，分别用属性width（宽度）和height（高度）。代码如示例2.10所示。

示例2.10：

在浏览器中的效果如图2.13所示。

如图2.13所示，左图是图片的原始尺寸，中图是改变宽度的尺寸，右图是改变宽度和高度的尺寸。

可以看出图片的显示尺寸是由width（宽度）和height（高度）控制的。当只为图片设置一个尺寸属性时，另外一个尺寸就以图片原始的长宽比例来显示。图片的尺寸单位可以选择百分比或数值。百分比为相对尺寸，数值是绝对尺寸。

2.7.4　排列图片

在网页的文字中，如果插入图片，就可以对图片进行排列。常用的排列方式为居中、底部对齐和顶部对齐。代码如示例2.11所示。

示例2.11：

在浏览器中的效果如图2.14所示。

示例2.12：

在浏览器中的效果如图2.15所示。