HTML插入图片（img元素）

img属性表及其功能描述：

使用figure元素和figcaption元素为图片声明标题

<figure>
  <img src="images/icon.png"  alt="这是一张图片"/>
  <figcaption>
     <p>这是一张图片
  </figcaption>
</figure>

创建图像映射

了解热点和图像映射

• 热点：图形上具有某种形状的一块区域或者是一个文本，也是一种超链接。当访问者单击该区域或文本时，超链接指向的文本会显示在浏览器中。热点的形状可以是长方形、圆形或多边形。
• 服务端图像映射：在图像上单击鼠标后，光标的相对位置坐标将被发送到服务器，然后服务器会通过一个专用程序来确定要执行的下一步。
• 客户端图像映射：鼠标移到图片上时，指针可以指示读者是否可以点击此区域。图片映射存储在图片的下一层，含有引用区域的相关信息。

创建图像映射（map元素、area元素）

img元素使用usemap属性与map元素的name属性建立关联关系，map元素包含了area元素，每个元素定义一个热点，从而使每个热点都指向图像的某个部位。
定义如下：

<img src="images/icon.png" usemap="#mymap" width="100" height="100" alt="这是一张图片"/>
<map name="mymap">
  <area shape="circle" coords="10,20,30" href="xx.html">
  <area shape="rect"coords="35,35,25,25" href="xx2.html">
  <area shape="poly" coords="12,73,45,57,79" href="xx3.html">
</map>

shape属性的属性值及其功能描述

coords属性的属性值及其功能

创建服务端图像映射

• 使用img元素创建服务端图像映射
  使用img元素创建服务端图像映射，img元素必须位于a元素内容内，并且必须设置img元素的ismap属性。ismap意为is map，表示将图像指定为图像映射。坐标数据发送的方法是在a元素的href属性定义的URI地址后加一个问号（？），问号后面是坐标数据，横坐标和纵坐标用逗号隔开，示例如下：

<a href="xxx.html?123,31">
  <img src="images/icon.png" ismap width="100" height="100" alt="这是一张图片"/>
</a>

• 使用input元素创建服务端图像映射
  使用input元素创建服务端图像映射，input元素的type属性必须为image。然后src属性定义图片文件位置，实际是一个表单提交按钮。坐标数据发送的方法是在form元素的action属性定义的URI地址后加一个问号（？），问号后面是坐标数据，横坐标和纵坐标用and号(&)隔开,示例如下：

<form name="myform" method="GET" action="xxx.action?mymap.x=123&mymap.y=31"> 
  <input type="image" name="mymap" src="images/icon.png">
</form>

• 客户端图像映射和服务端图像映射混合
  定义如下：

<a href="xxx.html?123,31">
  <img src="images/icon.png" ismap width="100" height="100" usemap="#mymap" alt="这是一张图片"/>
  <map name="mymap">
    <area shape="circle" coords="10,20,30" href="xx.html">
    <area shape="rect"coords="35,35,25,25" href="xx2.html">
    <area shape="poly" coords="12,73,45,57,79" href="xx3.html">
  </map>
</a>