HTML文档中插入图像是web前端开发中常见，也是必要的应用方式。通过在页面中插入相应的图像，可以给浏览者带来良好的体验，也能够使页面内容更直观，更具有说服力。

本节主要讲述如何在HTML文档中使用img标签，并结合各种属性设置图片在HTML文档中的展现形式，以确保图像能够更好的服务于HTML页面。

HTML中使用图像的方法

HTML中需要插入图像的话，需要通过<img>标签进行定义。在<img>标签中通过设置src属性来指定该img标签需要加载图像的url地址。图像的url地址可以是绝对地址，也可以是相对地址。

注意img标签只能够添加属性，没有闭合标签。例如常见的img标签为：<img src=”xxx.jpg”/>

图像还可以通过css样式，以背景的形式加载到页面中。本节暂时不讲述如何通过css的背景调用显示图片，该内容将会在以后的css课程中进行讲解。

<img>标签的属性

alt属性 | alt属性可以在浏览器显示或无法载入图像时，显示一段预先设置好的文本来告诉浏览者，该图像原本显示的大致内容。这样可以在某些无法加载图片的情况下帮助用户了解原本这个图片的大致内容。例如现在常见的手机浏览器在3G模式下都会屏蔽网页图片，因此书写alt文本是非常必要的。alt标签内容还会影响seo搜索引擎对图片的识别，所以在书写alt时请填入与图片更相关的文字描述。

例子：<img alt=”这是一个对atl无法显示图像时的预留文本” />

显示结果：

height属性、width属性 | 可以强制定义图像的高度与宽度，并且图像会失去自身原有的高度与宽度，而通过拉伸的形式按照设定的高度与宽度进行显示。默认情况下，浏览器会自动获取图像文件原有的高宽。但是某些情况下，不指定图像的高度与宽度会影响浏览器的显示效率，因此最好为图像设定正确的高度值。

例子：<img alt=”1539455109-0″ src=”/wp-content/uploads/2013/09/1539455109-0.jpg” width=”100″ height=”100″ />
显示：

 为图像设置链接

通过为图像设定链接，可以使整个图像成为锚点。在前端开发中，可以让用户更容易关注，并点击超链接。常见的应用为某些图形按钮，可以直接通过点击图像区域来进行页面跳转。

为图像设置连接的方法为，在<img>标签的外面套用一层<a>标签，a标签的锚点会被设置到图像上。

例子：<a title=”《前端开发从零学起》从基础到深入实战教程” href=”/front_tutorial”><img src=”/uploads/allimg/170719/tz42aeuqgex.jpg” width=”100″ height=”100″ /></a>

显示：

图像热区

HTML中可以为单个图像设定不同的热区，每个热区都可以指向不同的url地址。单独的热区可以通过坐标的或属性的形式设定热区的形状，用户在热区的范围内通过鼠标点击可以触发对应的跳转事件。

例如下面引用一个实例，热区设定到了对应的星球部分，通过点击不同的星球，会跳转到相应的星球大图页面中：

为图像设定热区的步骤为：

1.通过在<img>标签中设置usemap属性，并设定一个值，该值是用于热区编码识别是哪一个图片应用热区。例如：usemap=”#planetmap”

2.在页面中使用<map>标签定义热区编码，标签以<map>开始</map>结束。需要为map标签指定<img>的图片名称，例如：<map name=”planetmap” id=”planetmap”> 这样就与上面图片的id关联起来了。

3.使用<area>标签设定热区的形状shape、位置坐标coords、超链接href、超链接的打开方式target。由于定义热区的坐标比较复杂，而且在浏览器中反复测试坐标比较麻烦，建议使用dreameweaver的设计视图中的图像热区功能。

例：在dreameweave的设计视图中，点击页面中的图像，属性面板就会激活热区功能。

如图：

结语：HTML中使用图像是贯彻整个前端开发的核心应用。通过在HTML中设置不同的图像，来控制页面的UI显示，优化用户体验。通过对图像添加锚点，也可以更方便的引导用户来关注你站点的主要内容。