2.4 网页中的图像<img>
俗话说“一图胜千言”，图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。网页支持多种图片格式，并且可以对插入的图片设置宽度和高度。
2.4.1 网页中支持的图片格式
图片在网页中具有画龙点睛的作用，既能装饰网页又能表达个人的情调和风格。但在网页上加入的图片不宜过多，否则浏览的速度就会受到影响，导致用户失去耐心而离开页面。网页中使用的可以是GIF、JPEG、BMP、TIFF、PNG等格式的图片文件，其中使用广泛的主要是GIF和JPEG两种格式。
GIF格式是由Compuserve公司提出的与设备无关的图像存储标准，也是Web上使用最早、应用最广泛的图像格式。GIF是通过减少组成图像每个像素的储存位数和LZH压缩存储技术来降低图像文件大小的。GIF格式最多只能是256色的图像。GIF图像文件短小、下载速度快、低颜色数下比JPEG装载速度更快，并且可用许多具有同样大小的图像文件组成动画。在GIF图像中可指定透明区域，使图像具有非同一般的显示效果。
JPEG格式是在目前Internet中最受欢迎的图像格式，可支持多达16M种颜色，它能展现十分丰富生动的图像，还能压缩。但压缩方式是以损失图像质量为代价的，压缩比越高，图像质量损失越大，图像文件也就越小。一般情况下，Windows支持的BMP格式图像大小是JPEG格式的5至10倍，而GIF格式最多只能是256色，因此可以载入256色以上图像的JPEG格式成了Internet中最受欢迎的图像格式。
当网页中需要载入一个较大的GIF或JPEG图像文件时，装载速度会很慢。为改善网页的视觉效果，可在载入时设置为隔行扫描。隔行扫描在显示图像开始看起来非常模糊，接着细节逐渐添加上去直到图像完全显示出来。
GIF是支持透明、动画的图片格式，但色彩只有256色。JPEG是一种不支持透明和动画的图片格式，但是色彩模式比较丰富，保留大约1670万种颜色。
技巧提示
网页中现在也有很多PNG格式的图片。PNG图片具有不失真、兼有GIF和JPEG的色彩模式、网络传输速度快、支持透明图像的制作特点，近年来在网络中也很流行。
2.4.2 使用路径
HTML文档支持文字、图片、声音、视频等媒体格式，但是在这些格式中，除了文本是写在HTML中的，其他都是嵌入式的，HTML文档只记录了这些文件的路径。这些媒体信息能否正确显示，路径至关重要。
路径的作用是定位一个文件的位置。文件的路径可以有两种表述方法：以当前文档为参照物表示文件的位置，即相对路径；以根目录为参照物表示文件的位置，即绝对路径。
为了方便讲述绝对路径和相对路径，现有目录结构如图2-12所示。
图2-12 目录结构
1．绝对路径
例如，在E盘的webs目录下的../Images下有一个tp.jpg图像，那么它的路径就是E:\webs\../Images\tp.jpg，像这种完整地描述文件位置的路径就是绝对路径。如果将图片文件tp.jpg插入到网页index.html，绝对路径表示方式如下：
E:\webs\../Images\tp.jpg
如果使用了绝对路径E:\webs\../Images\tp.jpg进行图片链接，那么在本地电脑中将一切正常，因为在E:\webs\../Images下的确存在tp.jpg这个图片。如果将文档上传到网站服务器上后就不会正常了，因为服务器给你划分的存放空间可能在E盘其他目录中，也可能在D盘其他目录中。为了保证图片正常显示，必须从webs文件夹开始，放到服务器或其他电脑的E盘根目录下。
通过上述讲解读者会发现，当链接本站点内的资源时，使用绝对路径对位置要求非常严格。因此，链接本站内的资源不建议采用绝对路径。如果链接其他站点的资源，就必须使用绝对路径。
2．相对路径
如何使用相对路径设置上述图片呢？所谓相对路径，顾名思义就是以当前位置为参考点，自己相对于目标的位置。例如，在index.html中连接tp.jpg就可以使用相对路径。index.html和tp.jpg图片的路径根据上述目录结构图可以这样来定位。从index.html位置出发，它和../Images属于同级，路径是通的，因此可以定位到../Images，../Images的下级就是tp.jpg。使用相对路径表示图片如下：
../Images/tp.jpg
使用相对路径，不论将这些文件放到哪里，只要tp.jpg和index.html文件的相对关系没有变，就不会出错。
在相对路径中，“..”表示上一级目录，“../..”表示上级的上级目录，以此类推。例如，将tp.jpg图片插入a.html文件中，使用相对路径表示如下：
../../Images/tp.jpg
技巧提示
细心的读者会发现，路径分隔符使用了“\”和“/”两种，其中“\”表示本地分隔符，“/”表示网络分隔符。因为网站制作好肯定是在网络上运行的，所以要求使用“/”作为路径分隔符。
有的读者可能会有这样的疑惑：一个网站有许多链接，怎么能保证它们的连接都正确，如果调整了一下图片或网页的存储路径，那不是全乱了吗？如何提高工作效率呢？
技巧提示
Dreamweaver工具的站点管理功能，不但可以将绝对路径自动地转化为相对路径，并且当在站点中改动文件路径时，与这些文件关联的连接路径都会自动更改。
2.4.3 网页中插入图像标记<img>
图像可以美化网页，插入图像使用单标记<img>。<img>标记的属性及描述如表2-2所示。
表2-2 <img>标记的属性及描述
1．图像的源文件src
src属性用于指定图片源文件的路径，是<img>标记必不可少的属性。语法格式如下：
<img src="图片路径">
图片的路径可以是绝对路径，也可以是相对路径。下面的实例是在网页中插入图片。
【例2.9】（实例文件：ch02\2.9.html）
<!DOCTYPE html>
<html>
<head>
<title>插入图片</title>
</head>
<body>
<img src="../Images/meishi.jpg">
</body>
</html>
在IE 11.0中的预览效果如图2-13所示。
图2-13 插入图片
2．设置图像的宽度width和高度height
在HTML文档中，还可以设置插入图片的显示大小，一般是按原始尺寸显示，但也可以任意设置显示尺寸。设置图像尺寸分别用属性width（宽度）和height（高度）。
【例2.10】（实例文件：ch02\2.10.html）
在IE 11.0中预览效果，如图2-14所示。
图2-14 设置图片的宽度和高度
从中可以看到，图片的显示尺寸是由width（宽度）和height（高度）控制的。当只为图片设置一个尺寸属性时，另外一个尺寸就以图片原始的长宽比例来显示。图片的尺寸单位可以选择百分比或数值。百分比为相对尺寸，数值是绝对尺寸。
技巧提示
因为网页中插入的图像都是位图，放大尺寸，图像会出现马赛克，变得模糊。
在Windows中查看图片的尺寸，只需要找到图像文件，把鼠标指针移动到图像上，停留几秒后，就会出现一个提示框，说明图像文件的尺寸。尺寸后显示的数字代表图像的宽度和高度，如256×256。
3．设置图像的提示文字alt
在浏览网页时，图像提示文字的作用有两个：一是如果图像下载完成，将鼠标指针放在该图像上，鼠标指针旁边会出现提示文字；二是如果图像没有成功下载，在图像的位置上就会显示提示文字。
随着互联网技术的发展，网速已经不是制约因素，因此一般都能成功下载图像。现在，alt还有另外一个作用，在百度、google等大搜索引擎中，搜索图片不如文字方便，如果给图片添加适当提示，可以方便搜索引擎的检索。
下面的实例将为图片添加提示文字效果。
【例2.11】（实例文件：ch02\2.11.html）
在IE 11.0中的预览效果如图2-15所示。用户将鼠标放在图片上，即可看到提示文字。
图2-15 图片文字提示
注意：在火狐浏览器中不支持该功能。