shape="circle"必须小写且coords为三个正整数像素值，顺序为cx,cy,r；usemap与map name需逐字符匹配；响应式图片下area坐标不缩放，推荐SVG替代。
shape="circle" 必须小写，coords 必须是三个正整数，顺序为 "x,y,r" —— 写错任何一个字符或数值格式，热区就完全失效，且浏览器不报错、不提示。
shape 属性只认小写的 circle
浏览器对 shape 值完全严格：写成 Shape="Circle"、shape="oval"、shape="round" 或 shape="polygon" 都会被静默忽略。实际生效的只有 shape="circle"（全小写，无空格）。常见踩坑是复制别人代码时带了首字母大写，或误用 poly 拼成 polygon，结果点击无响应，但 HTML 结构看起来“完全合法”，排查时容易卡在错误方向。
coords 必须是三个正整数，不能带单位或空格
coords 的值必须形如 "120,90,25"，含义依次是：圆心横坐标（距左）、圆心纵坐标（距上）、半径（像素），全部为正整数，单位固定为像素，原点在图片左上角 (0,0)。
- 错误写法：
coords="50%,50%,25%"（百分比不支持） - 错误写法：
coords="center,center,25"（字符串非数字） - 错误写法：
coords="120, 90, 25"（含空格） - 错误写法：
coords="120.5,90,25"（小数不允许）
建议直接用浏览器开发者工具的「截图测量」功能取值，或 Photoshop 信息面板读像素 —— 手动估算误差常达 5–10px，导致点击偏移甚至失灵。
立即学习“前端免费学习笔记（深入）”；
usemap 与 map name 必须逐字符匹配
<img usemap="#my-map"> 中的 #my-map 必须和 <map name="my-map"> 的 name 值完全一致（包括大小写、连字符、下划线），少一个字符或大小写不匹配，整个热区就断联。注意：usemap 值带 #，而 <map> 的 name 不带 # —— 这是唯一一处命名规则不统一的地方，极易手滑写反。
响应式图片下 area 坐标不会自动缩放
如果图片设置了 width: 100% 或 max-width，原始 coords 像素值仍按原图尺寸计算，热区会严重偏移。原生 <area> 没有响应式能力。临时解法可用 JavaScript 库如 rwd-image-maps 动态重算坐标；长期建议改用 SVG —— 它天然矢量、可缩放、支持事件委托，复杂热区维护成本更低。
