在购物网站 Landing page 页，往往会存在商品宣传信息，为提升首页加载速度，往往会使用一张图片来包含所有要展示商品（① 减少http请求个数；② 减少页面DOM数）。如何在一张商品海报上，实现点击某商品，跳转到该商品详情页面？
<img usemap="#commodities" src="./images/map&area_1.png" alt="大宗商品图" />
<map name="commodities">
<area shape="rect" coords="0,0,128,106" hrefe=pickledcabbage" target="_blank" alt="酸菜" />
</map>
以上，也可以使用 shape="poly" 指定不规则的热点（可点击）区域。
HTML <map> 与 <area> 一起使用来定义一个图像映射 (一个可点击的链接区域)。
<map>
<map name=""></map>
必须存在 name 属性，其用于指定名字，以便被引用。
属性值不能含空格字符，且当前 Document 中不能存在同名。
如果同时指定了 id 属性，二者只必须一致。
<area>
<area shape="" coords=""></area>
定义一个可点击区域。
- shape：热点形状。
rect/circle/poly/default，default定义整个区域。 - coords：详细说明 shape 坐标。
shape | coords 示例 | 说明 |
rect | | 左上角、右下角坐标 |
circle | | 圆心坐标，半径 |
poly | | 多边形每个点的坐标 如果第一个和最后一个坐标对不相同，自动闭合 |
- href：该区域的超链接目标
- target：显示资源方式
_self/_blank/_parent/_top - referrerpolicy：指定来源网址
参考地址
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area
