area元素的shape属性合法值仅有rect、circle、poly、default四个严格小写字符串；其他如ellipse、oval、rectangle等均非法，浏览器会静默忽略该area。
area 元素的 shape 属性到底有哪些合法值？
只有 rect、circle、poly 和 default 四种，没有 ellipse、roundrect 或其他自定义形状。浏览器遇到非法 shape 值会直接忽略该 <area>，不报错也不渲染热点——这是最常被误以为“代码没生效”的原因。
实际使用中：
- rect 对应 4 个坐标：x1,y1,x2,y2（左上 + 右下）
- circle 对应 3 个坐标：cx,cy,r（圆心 x、y + 半径）
- poly 对应至少 6 个坐标（即 ≥3 个点），按顺时针或逆时针顺序列出所有顶点：x1,y1,x2,y2,x3,y3,...
coords 坐标值是相对于哪张图的？
始终相对于 <img> 的原始尺寸（naturalWidth / naturalHeight），不是 CSS 缩放后的显示尺寸。如果用 width="800" 把一张 1600×1200 的图压到一半显示，coords 仍要按 1600×1200 写，不能按 800×600 算。
容易踩的坑：
- 图片用 object-fit: cover 或背景图方式加载，<map></map> 完全失效（<area> 只支持 <img> 的 usemap）
- 响应式页面里图片宽度随屏幕变化，但 coords 是固定数值 → 必须配合 JS 动态重算，或改用 SVG 方案
- 坐标漏写逗号、多加空格（如 "100, 200, 300,400"）会导致整个 coords 被解析失败，该区域不可点击
为什么点了 area 没跳转？常见断点检查清单
<area> 不是独立元素，依赖三个前提同时成立才能工作：
-
<img>标签必须有usemap属性，且值形如"#mymap"（注意开头的#） -
<map></map>的name属性必须与usemap的值完全一致（大小写敏感） -
<area>必须在<map></map>内部，且不能嵌套在其他标签里（比如不能包在<div> 中）<li> <code>href值需合法：空字符串、#top、https://...都行；但href="javascript:void(0)"在部分旧浏览器可能被拦截 - 用 SVG
<image></image>+<path></path>或<polygon></polygon>，坐标天然基于 viewBox，自动适配缩放 - CSS
position: absolute叠加透明<a></a>或<button></button>，用transform: scale()同步缩放热点（需 JS 监听图片加载后计算比例） - 放弃客户端热点，改用服务端图像映射（如用户点击坐标上报，后端判断落在哪个区域）
调试建议：右键图片 → “检查元素”，确认 <img> 是否真绑定了 usemap，再点开 <map></map> 看 <area> 是否被正确解析（Chrome DevTools 里 hover <area> 会高亮对应区域）。
替代方案比硬啃 coords 更靠谱的场景
当图片需要响应式、缩放、或热点形状复杂（比如不规则文字区域、带弧度的按钮），<area> 几乎必然失效。此时更务实的选择是：
真正难的不是写对 coords，而是意识到：只要图片尺寸不固定，<area> 就是个一次性方案。上线前务必在 iOS Safari、Android Chrome、Windows Edge 上实机点一点——模拟器里的坐标往往不准。
