coords必须严格按shape类型填写：rect需x1
coords 坐标必须按 shape 类型严格填写
填错一位，热区就可能缩成一个点、偏移到画布外，甚至覆盖整张图——这不是浏览器 bug，是规范强制行为。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且 <code>y1 ；写反顺序（如 <code>"100,80,20,50"）会导致区域不可见 -
shape="circle"→coords="cx,cy,r"：圆心坐标 + 半径，r必须为正整数（0或小数如12.5会被静默忽略） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点成对出现，总数必须是偶数；首尾不自动闭合，但多数浏览器会补线——别依赖，手动重复第一个点更稳（例如"10,20,30,40,50,60,10,20"）
坐标永远基于原始图像尺寸，不是 CSS 渲染后尺寸
原始图是 1200×800，你用 img { width: 375px; height: auto; } 显示，那 coords="0,0,100,100" 实际只占屏幕约 31×21px，远低于触控推荐最小尺寸 44×44px。
- 所有
coords值都是相对于<img>左上角(0,0)的像素值，单位是原始图的像素，不是百分比，也不随 CSS 缩放变化 - 导出坐标时若用了设计稿标注或截图工具，务必确认该工具读取的是原始图尺寸（右键图片链接 → “在新标签页中打开”，看 URL 对应的真实宽高）
- 用
<img style="max-width:90%" style="max-width:90%">显式声明尺寸，可避免渲染差异导致的坐标漂移
area 点击没反应？先检查这三处硬性绑定条件
90% 的失效问题出在基础绑定环节，而不是 coords 写错。
-
<img>没写usemap，或usemap值漏了#前缀（正确：usemap="#mymap"；错误：usemap="mymap"） -
<map></map>的name属性和usemap的值不一致（注意：<map></map>不要加#） - 多个
<area>区域重叠时，DOM 中靠后的元素会覆盖前面的（z-index无效），导致前面的点不中；调整顺序或拆分区域可解
响应式页面里热区必然错位，唯一可靠解法是 JS 动态重算
没有纯 HTML/CSS 方案能自动适配；CSS 缩放、max-width: 100%、高 DPR 屏幕都会让 coords 失准。
- 监听
window.addEventListener('resize', updateCoords)和img.addEventListener('load', updateCoords) -
updateCoords()中读取img.naturalWidth和当前img.offsetWidth得到缩放比，再遍历所有<area>，把每个coords数值乘以比例后重新赋值 - 移动端尤其明显：测试务必在目标设备视口宽度下进行，别只在桌面调好就上线
coords 填，或者导出 poly 坐标时带了空格/换行——Safari 会静默跳过该区域，连控制台都不报错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
