map标签的应用通过area标签的href和alt属性可以看到，这两个标签几乎有相同的功能，但是在特定需求下，我们需要将

1.map标签

带有可点击区域的图像映射，一张图片可以有多个不同可点击区域，，每个区域点击后跳转页面不同

2.示例

 <img src="./images/345.jpg" alt="" srcset="" usemap="#mp">
    <map name="mp" id="mp">
        <area shape="rect" coords="20,20,80,80" href="#d1" alt="1">
        <area shape="circle" coords="300,20,50" href="#d2" alt="">
        <area shape="poly" coords="0,20,80,80,60,120" href="#d3" alt=""> 
    </map>

3.shape参数说明

rect：矩形区域，4个数字两两组合形成坐标；

circle：圆形区域，前两个确定圆心，第三个参数确定半径；

poly：多边形区域，两个数值确定一个坐标，6个数值确定3个坐标，就可以组成一个三角形区域

4.为什么不用`<a>`标签？他的用法不止应用于图片

通过area标签的href和alt属性可以看到，这两个标签几乎有相同的功能，但是在特定需求下，我们需要将某个div元素上，中间上半部分跳转到a地址，其余地方跳转到b地址（脑补刘海屏），传统做法是将html通过css浮动定位等方式来排布，比较麻烦。而a标签不能嵌套使用，在浏览器解析过程中，会将两个嵌套的a标签解析为同级的a标签；在这种情况下，我们可以使用area标签，给div添加热区映射到不同的跳转（添加一个矩形，添加一个多边形）。

5.局限

<area>标签实际上可以脱离<map>正常使用，就像普通的<a>标签一样，他同样不支持嵌套
Firefox浏览器不支持（Firefox的<area>元素默认display:none，且无法重置）
无法使用键盘Tab索引访问

6.局限的解决办法

在图片上使用，没毛病的老铁，只要别出图片范围

7.总结

有价值，图片上映射不同的点击区域，很方便，但是在div元素上直接取巧使用，会有兼容问题

map标签的应用