合法shape值仅有rect、circle、poly、default四个严格小写字符串；coords须与shape严格匹配且以原图尺寸为基准，usemap关联需带#号并大小写完全一致。
shape只能填这四个值，拼错或大小写不对就失效
浏览器对 shape 的取值完全不宽容——Shape="Rect"、shape="rectangle"、shape="oval"、shape="polygon" 全部被静默忽略，对应 <area> 区域点击无响应，控制台也不报错。真正合法的只有且仅限以下四个严格小写的字符串：
-
rect：矩形，需 4 个坐标 -
circle：圆形，需 3 个坐标 -
poly：多边形，需偶数个坐标（至少 6 个） -
default：整图覆盖，不写coords，且必须是<map></map>中最后一个<area>
常见误写如把 poly 拼成 polygon，页面不会报错，但热点区域彻底不工作；default 写在中间或带了 coords，也会被丢弃。
coords 必须和 shape 一一对应，少一位或多一位都偏移
coords 是纯数字字符串，英文逗号分隔、**不能有空格**，浏览器只按固定规则拆分，不校验逻辑合法性。错一位，行为就不可预测：
-
shape="rect"→coords="10,20,100,80"（左上 x,y + 右下 x,y；不是宽高） -
shape="circle"→coords="50,60,25"（圆心 x,y + 半径 r；r 必须为正整数，0或负数会被静默丢弃） -
shape="poly"→coords="30,40,90,40,60,120"（三点三角形；自动闭合，首点不用重复）
常见错误包括：shape="rect" 却给了 6 个数字；shape="poly" 坐标个数为奇数（如 5 个）；坐标里混入空格："100, 200" 中的空格会让第二值截断为 "200" 后面全丢。
原图尺寸才是 coords 基准，CSS 缩放不生效
无论你用 CSS 把 <img> 缩放到多小，coords 都以图片原始尺寸（img.naturalWidth/img.naturalHeight）为基准。比如原图 1600×1200，coords="0,0,1600,1200" 才覆盖全图；若只设 coords="0,0,200,150" 并用 CSS 缩放，热点会严重偏移甚至消失。
- 调试时别看开发者工具里渲染尺寸，要看
img.naturalWidth和img.naturalHeight - 懒办法：给
<img>加width和height属性（不是 CSS），强制渲染尺寸与原始一致 - 稳办法：用 JS 读取
naturalWidth/naturalHeight，再按缩放比重算coords - 更推荐：响应式场景直接改用 SVG，
<area>天然不支持缩放适配
usemap 关联必须严格匹配，#号和大小写一个都不能错
<img> 的 usemap 值必须以 # 开头，且与 <map></map> 的 name 完全一致（区分大小写）：
- ✅ 正确：
<img usemap="#main-map">+<map name="main-map"></map> - ❌ 错误：
usemap="main-map"（缺#）、usemap="#Main-Map"（大小写不一致）、<map name="main_map"></map>（下划线 vs 连字符）
关联失败时，整个 <map></map> 不生效，所有 <area> 点击无反应——这不是 shape 或 coords 的问题，而是根本没挂载上。
最常被忽略的是坐标系基准和 usemap 关联细节：写对 shape 和 coords 只是第一步，原图尺寸、缩放行为、DOM 关联三者任一出错，热点就“看起来写了却点不动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
