area标签shape属性仅有rect、circle、poly、default四个严格小写合法值，拼写错误、大小写错误或使用近义词（如polygon、oval）均导致浏览器静默忽略该area，点击无响应。
area 标签的 shape 属性只有四个合法值：rect、circle、poly、default，写错一个字母、大小写不对、多加空格或用近义词（比如 polygon、oval），浏览器就直接忽略该 area —— 点击无响应，控制台也不报错，排查时极易卡住。
shape 值必须严格小写且拼写精准
浏览器对 shape 的取值完全不宽容，只认这四个字符串，逐字符匹配：
-
shape="rect"：不是rectangle，不是Rect，也不是square -
shape="circle"：不是CIRCLE、Circle、oval或round -
shape="poly"：不是polygon、Poly、polygone -
shape="default"：不能带引号外的空格，也不能写成default（末尾空格）
调试方法：在 DevTools 中选中 area 元素，看 shape 属性是否高亮显示；若灰掉或点击无效，优先检查拼写和大小写。
coords 必须与 shape 一一对应且无空格
coords 是纯数字字符串，浏览器按 shape 值硬解析，数量错一位、顺序错一格、多一个空格，热区就偏或失效：
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"（左上 + 右下，不是宽高） -
shape="circle"→coords="cx,cy,r"（圆心 x、y、半径，全为正整数，单位像素） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3"（至少三组，6个数字；首尾不必重复，浏览器自动闭合） -
shape="default"→ 严禁写coords，写了会导致整个map失效
常见错误：coords="100, 50, 25"（含空格）、coords="50%,50%,25"（百分比）、coords="100,50,25px"（带单位）——全部不生效。
usemap 和 map name 必须字面完全一致
<img usemap="#hotmap"> 中的 #hotmap 必须与 <map name="hotmap"> 的 name 属性**逐字符相同**：
- 大小写敏感：
usemap="#HotMap"≠name="hotmap" - 空格敏感：
usemap="#hotmap "（末尾空格）≠name="hotmap" - 符号敏感：
usemap="hotmap"（缺 #）不会匹配任何map
验证方式：在 DevTools 的 Elements 面板中搜索 <map，确认其 name 值存在且与 usemap 的 # 后部分完全一致。
响应式图片下 coords 不缩放，别硬扛
coords 始终以图片原始尺寸（img.naturalWidth/img.naturalHeight）为基准，CSS 缩放、width: 100%、object-fit 都不会触发坐标重算：
- 原图 1600×1200，
coords="0,0,1600,1200"才覆盖全图；若 CSS 把它压成 400×300 显示，热区只剩左上角一小块 -
transform: scale()只影响渲染，不影响坐标系统，热区照样漂移 - 手动监听
resize并重算所有coords维护成本高，易出错
真实项目里最常翻车的，不是不会写语法，而是把坐标当成了“相对位置”来估算，或者以为响应式布局下热区能自动适配——它不能。需要响应式支持时，SVG 是更稳的选择。
