<map> 标签定义图像映射的可点击区域，本身不渲染内容，需配合 <img> 的 usemap 属性生效；区别在于普通图片无交互热区，而 <map> 通过 <area> 指定 shape 和 coords 实现像素级精准点击区域。
什么是 <map> 标签，它和普通图片有什么区别？
<map> 本身不显示任何内容，它只是定义一组可点击的区域（<area>），必须配合 <img> 的 usemap 属性才能生效。关键点在于：不是所有图片都能用 —— 只有设置了 usemap="#xxx" 且对应 <map name="xxx"> 的图片才激活热区。
-
<map>必须有name属性，值要和usemap的#后部分完全一致（大小写敏感） -
<img>的src路径必须有效，否则热区不可见也不响应 - 浏览器默认不给
<area>加视觉反馈，点击无样式变化，容易误判是否生效
<area> 的 shape 和 coords 怎么填才不出错？
shape 决定区域形状，只有 rect、circle、poly 是广泛支持的；coords 坐标单位是像素，原点在图片左上角（0,0）。
-
rect：格式为"x1,y1,x2,y2"，即左上 + 右下坐标，比如"10,20,100,80" -
circle：格式为"cx,cy,r"，圆心 + 半径，比如"150,60,30" -
poly：格式为"x1,y1,x2,y2,x3,y3,..."，至少三组点，首尾不自动闭合，但浏览器会自动连线闭合
常见错误：坐标超出图片尺寸、poly 点数少于 3、逗号后多空格（部分旧浏览器会解析失败）
怎么让点击区域真正触发动作，而不是跳转到新页面？
<area> 默认行为是导航（类似 <a>），靠 href 控制。如果不想跳转，有三种可靠做法：
立即学习“前端免费学习笔记（深入）”；
- 设
href="#"并用onclick="return false;"阻止默认行为 - 设
href="javascript:void(0)"，更明确地表示无跳转意图 - 用 JavaScript 绑定事件，推荐方式：
<area shape="rect" coords="10,20,100,80" data-id="zone-a">
然后通过document.querySelector('map area[data-id="zone-a"]').addEventListener('click', ...)处理逻辑
注意：href 为空字符串 "" 在某些浏览器中仍会刷新当前页，不推荐
响应式图片下 <map> 坐标还能用吗？
不能直接用。因为 <map> 坐标绑定的是原始图片像素尺寸，而响应式图片（如设置 width: 100%; height: auto）会缩放，导致热区错位。
- 最简单解法：固定图片尺寸（
width和height设为原始像素值），再用 CSS 容器控制缩放（但可能失真） - 更稳妥方案：用 JavaScript 动态计算缩放比，重设
<area>的coords（需监听window.resize和图片加载完成） - 现代替代方案：改用 SVG
<image>+<path>或 Canvas，坐标天然适配缩放
实际项目里，只要图片宽度固定或仅在少数断点变化，手动维护几套 coords 比写缩放适配代码更快。
