3.2 图像元素img

图像也称图片，是网页中不可缺少的元素，它可以美化网页，使网页看起来更加美观大方。虽然有很多种计算机图像格式，但由于受网络带宽和浏览器的限制，在Web上常用的图像格式有3种：GIF、JPEG和PNG。

img元素向网页中嵌入一幅图像。从技术上讲，﹤img﹥标签并不会在网页中插入图像，而是从网页上链接图像。﹤img﹥标签创建的是被引用图像的占位空间。img元素的格式为：

﹤img src="图片的URL"alt="替代文字"width="图像宽度"height="图像高度"/﹥

img元素中的属性说明如下。

1）src：指出要加入图片的位置，即“图像文件的URL/图像文件名”，其中URL可以是相对路径，也可以是绝对路径。本属性是必需的属性。

2）alt：在浏览器尚未完全读入图像或显示的图像不存在时，在图像位置显示的文字。本属性是必需的属性。

3）width：设置图像的宽度（像素数或百分数）。如果不设置图像的大小，图像将按照其本身的大小显示。属性值可取像素数，也可取百分数。百分数是指相对于当前浏览器窗口的百分比。

4）height：设置图像的高度（像素数或百分数）。

5）title：为浏览者提供额外的提示或帮助信息。

【例3-3】 图像元素示例。本例文件3-3.html在浏览器中正常显示的效果如图3-3所示。当显示的图像路径错误时，显示效果如图3-4所示。

15 图像元素img

图3-3 正常显示的图像效果

图3-4 图像路径错误时的显示效果

当显示的图像不存在时，页面中图像的位置将显示网页图片丢失的信息，但由于设置了alt属性，因此在或的右边显示替代文字；同时，由于设置了title属性，因此在替代文字附近还显示提示信息。因此，在使用﹤img﹥标签时，最好同时使用alt属性和title属性，避免图片路径错误带来的错误信息，同时，增加了提示信息也方便浏览者阅读。