<img src="./img/pgy.jpg" alt="图片" usemap="#pgy">
<map id="pgy" name="pgy">
<area shape="rect" coords="20,20,80,80" href="#rect" alt="矩形">
<area shape="circle" coords="200,50,50" href="#circle" alt="圆形">
<area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" alt="多边形">
</map>
/*上图展示了图片的映射，可通过tab键查看映射区域*/
<area>标签一般情况下用的都比较少，他主要是在图像上面划分某块区域，然后不同区域有不同的操作。多数情况下相当于半个<a>标签。
<img>中的usemap属性是和 <map>中的id 或者 name 关联的，不同浏览器关联的属性不同，所以通常都把两个都写上。
<area>标签是嵌套在<map>标签下的。
<area>中的shape属性，表示映射区域的形状:
rect ：矩形；
circle：圆形；
poly：多边形；
<area>中的 coords 代表 位置与坐标
<area shape="rect" coords="20,20,80,80" href="#rect" alt="矩形">
矩形的coords有四个值，分别代表 "左上角距离左边的位置,右上角距离顶部的位置，宽度,高度"；
<area shape="circle" coords="200,50,50" href="#circle" alt="圆形">
矩形的coords有三个值，分别代表 "圆心点距离左边的位置,圆心点距离顶部的位置，半径"；
<area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" alt="多边形">
多边形的coords有多个值，每两个值就确定一个坐标点，然后依次连接成多边形，每个坐标都是 "左边距离，上边距离"，以此确定坐标点。最后会自动闭合连接，形成一个多边形。