原生+仅适用于静态尺寸图片，usemap与map name必须逐字节匹配（含#、大小写、符号），coords基于原始像素且不随css缩放自适应，area须嵌套于map内并强制包含href和alt属性。
原生 <map></map> + <area> 只适合静态尺寸、坐标固定、不缩放的图片；一旦用 CSS 改变 <img> 显示大小，coords 就会错位——这不是 bug，是规范设计如此。
usemap="#xxx" 和 <map name="xxx"></map> 必须严格配对
浏览器只认 usemap="#product-map" 这种写法，漏掉 #、大小写不一致、多空格、name 值不匹配，都会导致热区失效。Chrome 开发者工具里右键图片 → “检查”，如果没高亮对应 <map></map>，基本就是这里断了。
-
usemap属性值必须带#前缀，且和<map></map>的name完全一致（包括连字符、小写） - 建议统一用小写字母+连字符命名，比如
name="sales-region"，然后usemap="#sales-region" - HTML5 中可同时写
id和name（如<map id="sales-region" name="sales-region"></map>），兼容性更稳 -
<map></map>必须在内、且不能被注释或 JS 动态移除后重插，否则绑定丢失
<area> 的 coords 永远按原图像素算，不是显示尺寸
一张 1200×800 的图，用 CSS 缩成 600×400 显示，coords="0,0,100,100" 仍指向原始左上角 100×100 像素区域——现在它只占屏幕 50×50 像素，点起来必然偏移。
-
<img>的width/height属性设为原图尺寸（如width="1200" style="max-width:90%"），再用外层容器控制显示大小，可避免错位（但可能拉伸） - 真正响应式方案只能靠 JS：监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords) -
updateCoords()里读取img.naturalWidth/img.naturalHeight和当前img.offsetWidth/img.offsetHeight，算出scaleX、scaleY，再逐个更新每个<area>的coords字符串 - 纯 HTML/CSS 没有自动适配机制，别指望它“聪明”——这是常被当成 bug 去查，实则是约束
<area> 必须嵌套在 <map></map> 内，且 href 和 alt 不可省略
<area> 是空元素，不能闭合（<area> 错，<area> 也错），且必须直接放在 <map></map> 标签内部。放外面、包在 <div> 里、或者没 <code>href 和 alt，所有浏览器都会忽略。
- 没
href：点击无默认跳转，部分旧浏览器甚至不触发click事件冒泡（即使绑了 JS） - 没
alt：无障碍直接失效，屏幕阅读器跳过该区域，Chrome 控制台会报 warning -
shape和coords必须匹配：如shape="rect"要 4 个数字，shape="circle"要 3 个，shape="poly"至少 6 个（即 3 个点） -
shape="poly"的coords不自动闭合，首尾点要手动重复，比如三角形得写coords="10,20,30,40,50,60,10,20"
热区交互逻辑该用原生跳转还是 JS 绑定？
如果只是跳转 URL，直接用 href 最轻量；如果要弹窗、上报埋点、切换内容，就得禁用 href，改用 JS 监听 click 事件。
- 去掉
href，加data-region="north"或id="area-north"作标识 - 用
document.querySelectorAll('area[data-region]')获取全部热区，遍历绑定addEventListener('click', handler) - 在 handler 里读
event.target.dataset.region判断区域，执行自定义逻辑（比如alert('华北区')或fetch('/log?region=north')） - 注意：部分老浏览器对
<area>的事件支持不完整，若需兼容 IE11，建议 fallback 到onclick属性写法
真正难的不是写几行 <area>，而是处理缩放错位、键盘导航、屏幕阅读器适配、以及 JS 动态重算 coords 时浮点精度带来的微小偏移——这些细节不显眼，但用户一试就露馅。
