原生map+area实现图片热区需严格匹配usemap与map的name（含#号）、正确书写shape和coords格式、动态重算响应式缩放坐标、确保area嵌套在map内且含href和alt属性。
原生 map + area 能实现图片多区域点击，但只要漏一个 #、coords 格式错一位、alt 缺失，热区就静默失效——浏览器不报错，只让你反复点不动。
usemap 和 map 的 name 必须逐字节匹配
这是 90% 热区失效的根源。浏览器只认 usemap="#product-map" 这种写法，漏掉 #、大小写不一致（比如 usemap="#Product-Map" 对应 <map name="product-map"></map>）、连字符和下划线混用，都会断连。
-
usemap="#product-map"✅ 必须配<map name="product-map"></map> -
usemap="product-map"❌ 漏#，整个映射被忽略 -
<map id="product-map"></map>❌usemap不认id，只认name - 建议统一用小写字母+连字符命名，避免歧义；调试时复制粘贴比对，别靠肉眼扫
shape 和 coords 格式必须严格对应
coords 不是“随便填的像素”，而是由 shape 决定的固定结构；填错会导致热区缩成一点、偏移到画布外，甚至覆盖整张图。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 正整数半径（r > 0） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，但多数浏览器会补线——别依赖，手动重复第一个点更稳 - 别用
shape="default"做兜底：它会捕获所有未被其他area覆盖的点击，干扰调试
响应式页面里 coords 会错位，必须用 JS 动态重算
coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要图片被缩放（比如 max-width: 100% 或 width: 50%），热区立刻偏移。
- 原始图是 1200×800，
coords="0,0,100,100"是左上角 100×100 区域；缩到 375px 宽后，该区域在屏幕上仅约 31×21px，远低于触控推荐最小尺寸 44×44px - 没有纯 HTML/CSS 方案能自动适配；唯一可靠解法是 JS 动态重算：
window.addEventListener('resize', updateCoords)+img.addEventListener('load', updateCoords) -
updateCoords()中读取img.naturalWidth与当前img.offsetWidth得到缩放比，再遍历所有area，把每个coords数值乘以比例后重新赋值 - 如果项目已重度响应式，建议直接改用
svg矢量热区，天然支持缩放
area 必须嵌套在 map 内，且 href、alt 不可省略
area 是空元素，不能自闭合（<area> 是错的），且必须是 map 的直接子节点；放在 div 里、或写在 map 外，所有浏览器都会忽略它。
-
href不能是空字符串、#或纯锚点（如href="#section1"），部分浏览器不兼容；必须为有效 URL，例如：href="./detail.html#speaker"或href="javascript:void(0)" -
alt不是可选描述，而是可访问性必需项，应准确说明功能，例如：alt="进入卫生间详情页"，不能写alt="点击此处" - 移动端需额外处理：iOS Safari 对小面积
poly热点响应迟钝，建议最小宽度/高度 ≥ 44px，或用touch-action: manipulation优化 -
map标签不能嵌套，且必须与img在同一 DOM 上下文；如果img在 Shadow DOM 里，外部map默认不可见——这是最容易被忽略的兼容性断点
最常被忽略的是 map 与 img 的 DOM 上下文隔离问题，以及 coords 在高 DPR 屏幕上的像素失准——这两处不检查，桌面调通了上线照样挂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
