前言
本节介绍图像标签即img标签的用法以及相关应用例题。
一、图像标签的属性
（一）src属性和alt属性
img标签，即图像标签，该标签用于插入图像，动态图和静态图是一样的，它表示为<img src="图像名.图像类型" alt="文本" />，是个单独出现的标签。它一般有两个属性：src属性和alt属性。
src属性代表其文件名和类型，即其值是图像的 URL 地址。而alt属性的作用是当图片无法找到或者是出现问题无法打开等情况时，它就会替代图片显示，显示的即是alt属性内的文字，可以说是图片的替代文本。
例如，下面图片未能显示出来，代替的是文字“海边的风景图”：
（二）width属性和height属性
width属性和height属性用于设置图像的宽度和高度，其属性值默认单位为像素，但如果没有指定图片的高宽度，可能会对页面的布局有影响。
例如，下列html代码中，对图片11.jpg设置其宽度为600像素、高度为520像素：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>风景</title> </head> <body> <h2>海边：</h2> <img src="11.jpg" alt="海边的风景图" width="600" height="520"> </body> </html>
运行结果如下：
（三）borde属性
borde属性用于设置图片是否有边框，border后面的取值即边框的大小，border=0或者不使用borde属性表示无边框。
例如，下列html代码中，对图片baidu.jpg加上属性为10的边框：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my page</title> </head> <body> <p>点击下列图像或者文字: <br /> <a href="http://www.baidu.com"> <img border="10" src="images/baidu.jpg" alt="百度一下" width="32" height="32">百度一下</a></p> </body> </html>
运行结果如下：
二、绝对路径和相对路径
引用图片的两种路径，分为绝对路径和相对路径：
绝对路径是以根目录为基准，需要对文件的具体位置详细表示出来；相对路径是以该文档的所在位置为基准的。
1、当图片直接位于站点文件夹内时，且网页也位于其内时，设置src属性时只需以图像名.图像类型的形式即可，它省略当前的基准点位置。
<img src="图像名.图像类型" alt="文本" />
2、当网页位于站点文件夹内，图片位于站点文件夹内的子文件夹时，设置src属性时需要带上子文件夹的名称加上图像名.图像类型。
<img src="图片子文件夹名称/图像名.图像类型" alt="文本" />
3、当图片直接位于站点文件夹内，且网页位于子文件夹内时，设置src属性时需要用“…”来表示上一级文件夹再加上图像名.图像类型即可。
<img src="../图像名.图像类型" alt="文本" />
4、当图片和网页都位于站点文件夹内，且位于不同的子文件夹内时，设置src属性时需要用“…”来表示上一级文件夹且带上图片子文件夹的名称加上图像名.图像类型。
<img src="../图片子文件夹名称/图像名.图像类型" alt="文本" />
三、图像映射
在html中可使用图像映像，它带有可供点击区域的图像即map标签，其区域都是超链接，在<img>中的 usemap 属性可以引用 <map> 标签中的 id 或 name 属性。
在 <map> 标签中， id 属性必须定义，它表示该标签定义的名称，而name 属性即为 image-map 规定的名称。且通过定义<area>标签在<map>内，在 HTML5 中，该标签是单独的，它用于定义可供点击区域的图像区域。
例题
例、完成下列网页设计，通过图片标签，设置点击相应的图片链接进行相应的网页跳转，且在新的窗口中打开跳转网页，效果图如下:
1、创建站点文件夹，并创建image子文件夹，用于存放四个浏览器的缩略图，如下：
2、编辑主页的html代码，即主页.html文件，如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>主页</title> </head> <body> <h2>通过点击以下图案打开相应浏览器的主页：</h2> <p><a href="https://www.google-fix.com/" target="_blank"> <img src="image/1-0.png" alt="谷歌" width="40" height="40"></a>谷歌浏览器</p> <p><a href="https://home.firefoxchina.cn/" target="_blank"> <img src="image/1-1.jfif"alt="火狐" width="40" height="40"></a>火狐浏览器</p> <p><a href="https://www.sogou.com/" target="_blank"> <img src="image/1-2.png" alt="搜狗" width="40" height="40"></a>搜狗浏览器</p> <p><a href="https://cn.bing.com/" target="_blank"> <img src="image/1-3.png" alt="Edge" width="40" height="40"></a>Edge浏览器</p> </body> </html>
3、保存后，我们的站点文件夹里就有了一个主页的html文件以及之前创建的image文件夹，如下:
4、测试一下效果，打开主页.html，我们发现没有问题：
5、测试是否能通过点击图案跳转至相应的浏览器页面且在新窗口打开：
其它也是没有问题的：
达到了题设要求！
