HTML原生仅支持rect、circle、poly、default四种shape值，大小写敏感且不可扩展；coords格式须严格匹配shape，href和alt为功能与无障碍刚需；响应式下coords不自动缩放，推荐改用SVG。
HTML 原生只支持四种 shape 值：rect、circle、poly、default，其他如 oval、triangle、round 或拼错的 rectangle / polygon 都会失效或退化为矩形行为。
shape 属性只能填这四个值，大小写敏感且不可扩展
浏览器对 shape 的取值不做容错处理：Shape="Rect"（首字母大写）、shape="rectangle"、shape="oval" 全部被忽略，对应 area 区域无法响应点击。常见误写是把 poly 写成 polygon——它不会报错，但热点完全不工作。
必须严格使用小写，且仅限以下四者：
-
rect：矩形，需 4 个坐标 -
circle：圆形，需 3 个坐标 -
poly：多边形，需偶数个坐标（至少 6 个，即 3 个点） -
default：覆盖整张图，不写coords，且必须放在map内最后一个area
coords 坐标格式必须和 shape 严格匹配
coords 是纯数字字符串，用英文逗号分隔，无空格；浏览器不校验合法性，错一位就偏移，少一个就截断，多一个就溢出。
-
shape="rect"→coords="10,20,100,80"（左上 x,y + 右下 x,y；不是宽高） -
shape="circle"→coords="50,60,25"（圆心 x,y + 半径） -
shape="poly"→coords="30,40,90,40,60,120"（三点构成三角形；自动闭合，无需重复首点） -
shape="default"→ 不写coords，写了也无效
常见错误：用中文逗号、漏掉某个 y 值、把 poly 的 6 个数写成 7 个（奇数），或误以为 rect 的坐标是“中心点+宽高”。
href 和 alt 不是可选项，而是可用性与功能刚需
href 决定点击跳转目标，空值或 href="#" 会导致页面跳顶，应设为有效 URL 或用 javascript:void(0) 配合 JS 处理；alt 不仅用于图片加载失败时显示文字，更是屏幕阅读器识别热区用途的唯一依据。
- 缺少
alt会让 WCAG 合规性直接失败 -
href指向相对路径时，注意当前页面上下文（非图片所在路径） - 移动端点击热区可能因尺寸过小触发困难，建议最小热区不小于 44×44px 对应原始图尺寸
响应式图片下 coords 会失效，必须动态重算
原始图宽高是 coords 的唯一参照系。如果 img 用 width="100%" 或 max-width 缩放，坐标不会自动缩放——热点区域会严重偏移。
- 不推荐手动换算像素比例，容易出错且维护成本高
- 可用
jquery-rwdimageamaps库，在 DOM 加载后自动按缩放比重设coords - 更现代的做法是改用 SVG：原生矢量、支持 CSS 媒体查询、可无障碍访问，且坐标系天然适配缩放
真正麻烦的从来不是写对那几个 coords 数字，而是当设计师把图片从 1200px 改成 600px、又加了 object-fit: cover 之后，你得重新量一遍所有点——而这个过程没有任何浏览器提示，只有用户点不中。
