poly形状coords必须手动闭合，否则不构成封闭区域；响应式场景下固定像素坐标会因图片缩放而错位，需JS重算或改用SVG。
poly shape 的 coords 必须手动闭合，否则不是封闭区域
用 shape="poly" 定义不规则区域时，浏览器不会自动把最后一个点连回第一个点。比如 coords="10,20,30,40,50,60" 只画出两条线段（10,20→30,40→50,60），不是三角形，点击行为不可靠，甚至部分浏览器完全不识别该热区。
正确写法是显式重复起点坐标：
-
coords="10,20,30,40,50,60,10,20"—— 三个顶点 + 首点复位，构成封闭三角形 - 四边形至少要 8 个数字：
coords="20,10,80,10,80,70,20,70,20,10" - 用图像编辑器或在线 map 工具导出坐标后，务必检查并补全首尾重合
area 标签没 href 就不会跳转，但 click 事件仍可捕获
很多人删掉 href 想“禁用跳转”，结果发现点击毫无反应——这不是 bug，是预期行为：没有 href 的 area 默认不触发任何导航，也不提供手型光标、焦点框等交互反馈。
- 必须加
style="cursor: pointer"或全局 CSS：area { cursor: pointer; } - 推荐用事件委托监听整个
map，而非给每个area单独绑onclick：document.querySelector('map').addEventListener('click', e => { if (e.target.tagName === 'AREA') { const region = e.target.dataset.region; console.log('点击了', region); } }); - 别依赖
alt做逻辑判断，它只用于无障碍；用data-region或id才可靠
响应式页面里固定 coords 会彻底错位
原始图片宽高缩放后，coords 仍按原始像素值计算，热区就漂移了。这不是“偶尔不准”，而是必然失效——尤其在移动端或 flex/grid 布局中。
立即学习“前端免费学习笔记（深入）”；
- 纯 HTML/CSS 方案无法修复，
usemap不支持百分比或视口单位 - 真要响应式，得用 JS 在 resize 时重算坐标（需保存原始尺寸与缩放比）
- 更稳妥的替代方案是 SVG：
<svg><image></image><polygon></polygon></svg>，天然支持比例缩放 - 第三方库如 imagemap-resizer 可自动适配，但引入额外依赖
area 元素必须嵌套在 map 内，且 usemap 关联不能有拼写/大小写误差
usemap="#product-map" 和 <map name="product-map"> 必须完全一致：开头的 # 不能少，name 值大小写敏感，空格、连字符位置都不能差。
- 常见错误：
usemap="#ProductMap"对应<map name="product-map">→ 失效 -
<area>放在<map>外部 → 浏览器忽略，控制台无报错，但热区不可点 - 每个
area必须有alt，否则 Chrome 控制台警告，屏幕阅读器跳过该区域 - 多边形区域尽量避免重叠，否则点击行为取决于 DOM 顺序（后出现的覆盖前面的）
