shape属性仅接受rect、circle、poly、default四个严格小写值；coords须与shape严格匹配且无空格；default必须为最后一个area且不可带coords；area坐标不响应缩放，推荐改用svg实现响应式热点。
shape 属性只认这四个小写值：rect、circle、poly、default
浏览器对 shape 的取值完全不宽容——写成 Shape="Rect"、shape="rectangle"、shape="oval" 或 shape="polygon"，都会被静默忽略，对应 <area> 区域彻底失效，点击无响应。它只接受且仅接受以下四个严格小写的字符串：
-
rect：矩形，需 4 个坐标 -
circle：圆形，需 3 个坐标 -
poly：多边形，需偶数个坐标（至少 6 个） -
default：整图覆盖，不写coords，且必须是<map></map>中最后一个<area>
常见误写是把 poly 拼成 polygon，页面不会报错，但热点区域就是点不动——这不是兼容性问题，是直接被丢弃了。
coords 格式必须和 shape 一一对应，错一位就偏移
coords 是纯数字字符串，英文逗号分隔、**不能有空格**，浏览器不校验逻辑合法性，只按固定规则解析。一旦数量或顺序错位，行为不可预测：
-
shape="rect"→coords="10,20,100,80"（左上 x,y + 右下 x,y；不是宽高） -
shape="circle"→coords="50,60,25"（圆心 x,y + 半径 r） -
shape="poly"→coords="30,40,90,40,60,120"（三点三角形；自动闭合，首点不用重复）
少一个数字，比如 rect 只给了 3 个值，浏览器会截断或错位解释；多一个，后面那个会被丢弃。调试时建议先用固定尺寸图+像素级坐标验证，再迁移逻辑。
响应式图像下 coords 不缩放，别硬扛
<area> 的坐标是绝对像素值，绑定在原始图片尺寸上。当图片通过 CSS 缩放、或设置 width/height 属性拉伸时，coords 不会自动适配——热点区域会严重偏移，尤其在移动端。
- 不要试图用 JS 监听 resize 后手动重算所有
coords，维护成本高、易出错 - 更可靠的做法是改用 SVG：用
<svg></svg>包裹图片，用<circle></circle>、<rect></rect>、<polygon></polygon>定义可点击区域，天然支持缩放与响应式 - 如果必须用
<area>，确保图片始终以原始尺寸渲染（max-width: 100%+height: auto），并限制容器宽度
default 区域要放在 map 最后，且不能带 coords
shape="default" 的语义是“其余未覆盖区域”，它必须是 <map></map> 内最后一个 <area>，否则会遮盖后续定义的热点。而且它**严禁写 coords** ——写了不仅无效，部分浏览器会直接跳过整个 <map></map>。
另外注意：default 不代表“兜底 fallback”，它真会响应点击。如果只是想加个无障碍说明或埋点，不如用透明 <div> 覆盖 + <code>pointer-events: none，避免干扰真实热点逻辑。
