area标签shape属性仅接受rect、circle、poly、default四个严格小写字符串，拼写或大小写错误（如poly、polygon、circle ）会导致area静默失效、点击无响应且控制台不报错。
shape属性拼写和大小写必须严格匹配
浏览器只认 rect、circle、poly、default 四个全小写字符串，错一个字母或大小写就静默失效——比如 shape="Poly"、shape="polygon"、shape="circle "（末尾空格）都会让整个 <area> 不响应点击，且控制台不报错。
调试时直接在 DevTools 里选中该元素，看 shape 属性是否高亮（有效）还是灰掉（无效）。别猜，先确认拼写。
-
rect不是rectangle或square -
circle不是oval、round或circ（虽部分旧浏览器兼容circ，但不保证） -
poly不是polygon、polygone或triangle -
default后不能带空格，也不能写成default或"default"
coords格式必须与shape一一对应，且无空格/单位/小数
coords 是纯数字字符串，浏览器按 shape 类型硬解析：给 rect 填 6 个数，它只取前 4；给 circle 填 4 个，第 4 个直接丢。任何空格、单位（px）、小数（100.5）、百分比（50%）都会导致截断或全失效。
-
shape="rect"→coords="x1,y1,x2,y2"，且必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"，r必须为正整数（0或负值无效） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."，总数必须为偶数，至少 6 个（3 个顶点）；首尾**不需重复**（规范说自动闭合，但 Safari 等可能静默跳过错误格式，建议仍手动验证闭合） -
shape="default"→ **严禁写coords**，写了会导致整个<map></map>失效
usemap 和 map name 必须字面完全一致（含#、大小写、空格）
<img usemap="#hotmap"> 中的 #hotmap 必须与 <map name="hotmap"></map> 的 name 属性**逐字符相同**：大小写敏感、空格敏感、符号敏感。
-
usemap="#HotMap"≠name="hotmap" -
usemap="#hotmap "（末尾空格）≠name="hotmap" -
usemap="hotmap"（缺#）不会匹配任何<map></map>
验证方式：在 DevTools Elements 面板搜索 <map>，确认其 <code>name 值存在，再检查对应 <img> 的 usemap 是否完全匹配。
响应式下 coords 必然错位，别指望 CSS 自动适配
coords 永远以图片原始尺寸（img.naturalWidth/img.naturalHeight）为基准，CSS 缩放、width: 100%、transform: scale() 全部无效。热区会漂移，尤其在移动端。
- 原图 1600×1200，
coords="0,0,1600,1200"才覆盖全图；若用 CSS 压成 400×300 显示，热区只剩左上角一小块 - JS 监听
resize并重算所有coords成本高、易出错，且需缓存原始尺寸避免 layout thrashing - 更稳方案是改用
<svg></svg>：内嵌<image></image>+<polygon></polygon>/<circle></circle>，天然支持viewBox和缩放 - 若必须用
<map></map>，可强制图片以原始尺寸渲染：<img style="max-width:90%" style="max-width:90%">（不是 CSS），再用max-width: 100%控制容器宽度
最常被忽略的是：开发者工具里看到的渲染尺寸 ≠ coords 参考系。浏览器压根不读 CSS 宽高，只认 naturalWidth/naturalHeight —— 这一点不确认清楚，调一整天都白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
