4.8 img元素及其应用
在HTML文档中，使用img元素可以在网页中嵌入图像（Image）。存储图像的文件格式一般是.gif和.jpeg，.gif和.jpeg文件占用很小的存储空间。因此，在网络中传输.gif和.jpeg文件所需的时间开销很小，可以使网站访问者体会到较快的网页浏览速度。但从本质上讲，img元素并不是直接在网页中插入图像，而是定义指向图像文件的超链接。此外，img元素为所链接的图像创建占位空间。img元素的属性及其用法见表4-3。
表4-3 img元素的属性及其用法
【例4-8】 使用img元素在网页中嵌入图像，并观察img元素及其属性的作用。具体步骤如下：
（1）在Notepad软件中输入以下HTML代码。
在以上HTML代码中，第1个img元素的src属性值“../ch02/2-4.gif”表示，所嵌入图像的文件2-4.gif保存在当前HTML文档所在文件夹的上一级文件夹的下一级文件夹ch02中。
在HTML文档中创建超链接或嵌入图像时，经常需要引用同一计算机上不同文件夹中的文件。此时，可以使用相对路径（Relative Path）或绝对路径（Absolute Path）指定被引用文件在同一计算机中的存储位置。
相对路径及其表示方法与文件夹的层次结构密切相关。图4-9表示E盘上的文件夹及其层次结构，当前HTML文档是“E:/WebPage/exercise/ch04/4-8.htm”。在HTML文档4-8.htm中，相对路径“../”表示当前HTML文档所在文件夹的上一级文件夹，即文件夹exercise；相对路径“../ ../”表示当前HTML文档所在文件夹的上上级文件夹，即文件夹WebPage；“../ch02/2-4.gif”则表示文件夹ch02中的文件2-4.gif。
图4-9 相对路径与文件夹的层次结构
被引用文件在计算机中的存储位置也可以用绝对路径表示。例如，绝对路径“E:/Web Page/exercise/ch02/2-4.gif”即表示图像文件2-4.gif保存在E盘的WebPage/exercise/ch02文件夹中。其中，“E:/WebPage/exercise/ch02/”即是绝对路径。
在创建超链接或嵌入图像时，如果被引用文件的路径不正确，就无法打开被引用文件，或无法在Web浏览器中显示图像。
注意：由于文件夹的层次结构是相对稳定的，所以通常使用相对路径指定文件在同一计算机中的存储位置。
（2）在Notepad软件中保存HTML文档，并将其命名为4-8.htm。
（3）使用IE浏览器打开HTML文档4-8.htm，网页的浏览效果如图4-10所示。
如图4-10所示，在该网页中嵌入了两个图像，它们均引用同一文档2-4.gif，该文档是一个400像素（宽）×100像素（高）的GIF动画图片。但由于img元素的属性及属性值不同，两个图像的显示效果是不一样的。
图4-10 使用img元素在网页中嵌入图像
在第1个img元素的开始标签<img src="../ch02/2-4.gif" width=200 height=50>中，由于设置了200像素（宽）×50像素（高）的固定区域大小。所以，图片2-4.gif只能在200像素（宽）×50像素（高）区域内显示。
在第2个img元素的开始标签<img src="../ch02/2-4.gif" alt="GIF动画图片">中，由于省略了width和height属性，所以图片2-4.gif将按照原有尺寸（400像素×100像素）显示。又由于将alt属性值设置为“GIF动画图片”，所以当鼠标落在该图片上时，会显示替代性文字“GIF动画图片”。
注意：
① 如果在img元素后面不使用br元素强制换行，则两幅动画图片会显示在同一行中。因此，img元素属于行内元素。
② img元素只有开始标签，而没有结束标签，所以img元素是空元素。