1. 标签介绍：

(1)map标签： 该标签是指图片的映射，也就是说一张可以点击的图片的映射；

属性介绍：

<1> id: 中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器)

<2>name:同上

说明：不同的浏览器会根据img中的usemap属性去引用ID或者name值，所以最好使用的时候这两个属性都要加上。

(2)area标签：指的是图片映射的区域，可以是矩形(rect)、圆形()；

属性介绍：

<1> alt :类似img 标签中的同名属性

<2>coords: 区域的坐标(0，0 指的是图片的左上角)，矩形为左上角和右下角两个坐标，圆形为圆心X、Y和半径，多边形为任意两个坐标之间构成的区域

<3>shape:指的区域形状；矩形、圆形、多边形

....

2.使用场景：

主要适用于多个图片组成的超链接区域，例如导航栏、底部说明栏等等；

说白了就是同一张图片点击不同的区域能够跳到不同的链接中或者实现不同的逻辑；

这样的话可以避免我们切图的时候切成多张的图片，减少了客户端的http请求，对提升页面的性能有不少的帮助。

来源：https://www.cnblogs.com/makunzheng/p/10493433.html