2.6 图像元素
图像是美化网页最常用的元素之一。HTML的一个重要特性就是可以在文本中加入图像，既可以把图像作为文档的内在对象加入，又可以作为超链接加入，同时还可以将图像作为背景加入。
2.6.1 网页图像的常用格式
1.常用的网页图像格式
虽然计算机图像格式有很多种，但由于受网络带宽和浏览器的限制，在网页上常用的图像格式有3种：GIF、JPEG和PNG。
（1）GIF
GIF是Internet上应用最广泛的图像文件格式之一，是一种索引颜色的图像格式。它的特点是体积小、支持小型翻页型动画。GIF图像最多可以使用256种颜色，最适合用于徽标、图标、按钮和其他颜色及风格比较单一的图片。
（2）JPEG
JPEG也是Internet上应用最广泛的图像文件格式之一，适用于摄影或连续色调的图像。JPEG图像可以包含多达数百万种颜色，因此JPEG格式的文件体积较大，图片质量较佳。通常可以通过压缩JPEG文件在图像品质和文件大小之间取得良好的平衡。当对图片的质量有要求时，建议使用此格式。
（3）PNG
PNG是一种新型的无专利权限的图像格式，兼有GIF和JPEG的优点。它的显示速度很快，只须下载1/64的图像信息就可以显示出低分辨率的预览图像。它可以用来代替GIF格式，同样支持透明层，在质量和体积方面都具有优势，适合在网络中传输。
2.使用网页图像的要点
1）高质量的图像因其图像体积过大，不太适合网络传输。一般在网页设计中选择的图像不要超过8KB，如必须选用较大图像，可先将其分成若干小图像，显示时再通过表格将这些小图像拼合起来。
2）当在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在目录依次往下直到文件所在的位置。例如，文件X.Y与A文件夹在同一目录下，文件B.A在目录A下的B文件夹中，文件B.A相对于文件X.Y的相对路径则为A/B/B.A，如图2-16所示。
图2-16 相对路径
2.6.2 图像标签<img>
在HTML中，用<img>标签在网页中添加图像，图像是以嵌入的方式添加到网页中的。图像标签的格式如下。
9 图像元素img
<img>标签的常用属性见表2-3，其中src是必需的属性。
表2-3 <img>标签的常用属性
需要注意的是，对于width和height属性，如果只设置了其中一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致，那么显示的图像会相对于原图变形或失真。
1.图像的替换文本说明
由于网络过忙或者用户在图片还没有下载完全就单击了浏览器的停止键，导致用户不能在浏览器中看到图片，这时使用替换文本说明就十分有必要了。替换文本说明应该简洁而清晰，能为用户提供足够的图片说明信息，在无法看到图片的情况下也可以了解图片的内容信息。
2.调整图像大小
在HTML中，通过<img>标签的width和height属性来调整图像大小，其目的是通过指定图像的宽度和高度加快图像的下载速度。默认情况下，页面中显示的是图像的原始大小。如果不设置width和height属性，浏览器就要等到图像下载完毕才显示网页，因此延缓了其他页面元素的显示。
width和height属性的单位可以是像素，也可以是百分比。百分比表示图像显示大小占浏览器窗口大小的百分比。
例如，设置产品图像的宽度和高度的代码如下。
3.图像的边框
在网页中显示的图像如果没有边框，会显得有些单调，可以通过<img>标签的border属性为图像添加边框，添加边框后的图像显得更醒目、美观。
border属性的值用数字表示，单位为像素；默认情况下图像没有边框，即border=0；图像边框的颜色不可调整，为黑色；当图片作为超链接使用时，图像边框的颜色和文字超链接的颜色一致，默认为深蓝色。
【例2-16】图像的基本用法。本例在浏览器中正常显示的效果如图2-17所示；当显示的图像路径错误时，显示效果如图2-18所示。
图2-17 正常显示的图像效果
图2-18 图像路径错误时的显示效果
【说明】①当显示的图像不存在时，页面中图像的位置将显示出网页图片丢失的信息，但由于设置了alt属性，因此在图像占位符上显示出替代文字“产品简介”；同时，由于设置了title属性，因此在图像占位符上还显示出提示信息“爱心包装”。
②在使用<img>标签时，最好同时使用alt属性和title属性，避免图片路径错误引起的错误信息；同时，增加了鼠标提示信息也方便了浏览者使用。
2.6.3 设置网页背景图像
在网页中可以利用图像作为背景，就像在照相的时候取背景一样。但是要注意不要让背景图像影响网页内容的显示，因为背景图像只是起到渲染网页的作用。此外，背景图片最好不要设置边框，这样有利于生成无缝背景。
设置背景属性时，属性值为背景图像路径（URL）。如果图像尺寸小于浏览器窗口尺寸，那么图像将在整个浏览器窗口进行复制。格式如下。
设置网页背景图像应考虑以下要点。
1）背景图像是否增加了页面的加载时间，背景图像文件大小不应超过10KB。
2）背景图像是否与页面中的其他图像搭配良好。
3）背景图像是否与页面中的文字颜色搭配良好。
【例2-17】 设置网页背景图像。本例在浏览器中的显示效果如图2-19所示。
图2-19 设置网页背景图像示例
2.6.4 图文混排
在制作网页的时候往往要在网页中的某个位置插入一个图像，使文本环绕在图像的周围。<img>标签的align属性用来指定图像与周围元素的对齐方式，实现图文混排效果，其取值见表2-4。
表2-4 align属性常用取值及说明
与其他元素不同的是，图像的align属性既包括水平对齐方式，又包括垂直对齐方式。align属性的默认值为bottom。
2.6.5 案例——制作爱心包装经营模式图文简介页面
【例2-18】 制作爱心包装经营模式图文简介页面。本例在浏览器中的显示效果如图2-20所示。
图2-20 图文混排显示效果
【说明】①本例中为图像设置了class="right"，实现了图像居右、文字居左的图文混排效果；同时还为图像设置了hspace="20"和vspace="10"，定义了图像和文字之间的水平间距和垂直间距。
②如果不设置文本对图像的环绕，图像将在页面中占用一整片空白区域。