- HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通（视频教学版）
- 张工厂
- 2015字
- 2025-02-25 11:36:38
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中最受欢迎的图像格式。JPEG可支持多达16M颜色，能展现十分丰富生动的图像，还能压缩，但压缩方式是以损失图像质量为代价，压缩比越高图像质量损失越大，图像文件也就越小。
当网页中需要载入一个较大的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\imags\tp.jpg，像这种完整地描述文件位置的路径就是绝对路径。如果将图片文件tp.jpg插入到网页index.html，绝对路径表示方式如下：
E:\Webs\imags\tp.jpg
如果使用了绝对路径E:\Webs\imags\tp.jpg进行图片链接，那么在本地电脑中将一切正常，因为在E:\Webs\imags下确实存在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）
<!DOCTYPE html> <html> <head> <title>插入图片</title> </head> <body> <!—原始图像、设置宽度为200和设置宽度为200、高度为300--> <img src="images/meishi.jpg"> <img src="images/meishi.jpg" width="200"> <img src="images/meishi.jpg" width="200" height="300"> </body> </html
在IE 11.0中预览效果，如图2-14所示。
图2-14 设置图片的宽度和高度
由图2-14可以看到，图片的显示尺寸是由width（宽度）和height（高度）控制的。当只为图片设置一个尺寸属性时，另外一个尺寸就以图片原始的长宽比例来显示。图片的尺寸单位可以选择百分比或数值。百分比为相对尺寸，数值是绝对尺寸。
技巧提示
因为网页中插入的图像都是位图，所以放大尺寸，图像会出现马赛克，变得模糊。在Windows中查看图片的尺寸，只需要找到图像文件，把鼠标指针移动到图像上，停留几秒后，就会出现一个提示框，说明图像文件的尺寸。尺寸后显示的数字，代表图像的宽度和高度，如256×256。
3. 设置图像的提示文字alt
在浏览网页时，图像提示文字的作用有两个：一是如果图像下载完成，将鼠标指针放在该图像上，鼠标指针旁边就会出现提示文字；二是如果图像没有成功下载，在图像的位置上就会显示提示文字。
随着互联网技术的发展，网速已经不是制约因素，因此一般都能成功下载图像。现在，alt还有另外一个作用，在百度、google等大搜索引擎中，搜索图片不如文字方便，如果给图片添加适当提示，就可以方便搜索引擎的检索。
下面实例为图片添加提示文字效果。
【例2.11】（实例文件：ch02\2.11.html）
<!DOCTYPE html> <html> <head> <title>图片文字提示</title> </head> <body> <!—添加提示文字效果--> <img src="images/meishi.jpg" alt="未加载完成时显示的替代文字" title="鼠标放上 去显示的文字"> </body> </html>
在IE 11.0中预览效果如图2-15所示。用户将鼠标放在图片上，即可看到提示文字。
图2-15 图片文字提示
注意，在火狐浏览器中不支持该功能。