html 的 shape 和 coords 必须严格匹配：shape 仅支持 rect/circle/poly/default 全小写；coords 数量、顺序、数值类型及无空格格式均需精确对应，否则热点失效且无报错。
HTML 的 shape 和 coords 配合使用时，不是“写对就能用”，而是“格式错一位就失效”——浏览器不报错，但热点完全点不动。
shape 只认四个小写字符串，拼错或大小写错就静默失效
浏览器对 shape 值极度严格：只接受 rect、circle、poly、default 四个全小写字符串。写成 Rect、circle（首字母大写）、oval、polygon、rounded，都会被直接忽略，对应 <area> 区域彻底不可点击。
常见误写包括：shape="polygon"（应为 poly）、shape="circ"（应为 circle）、shape="square"（不存在）。这些错误不会触发控制台警告，调试时容易卡在“为什么点不了”。
coords 必须与 shape 严格数量匹配，顺序和数值类型都不能错
coords 不是自由格式的数字列表，它是一串按固定规则解析的整数序列，浏览器只做逗号分割+转整数，不校验逻辑合法性。
-
shape="rect"→ 必须且仅能有 4 个整数：coords="x1,y1,x2,y2"，左上角 + 右下角；要求x1 且 <code>y1 ，否则区域不可交互 -
shape="circle"→ 必须且仅能有 3 个整数：coords="cx,cy,r"；r必须为正整数（0或负数会被丢弃，小数如10.5截断为10） -
shape="poly"→ 必须为偶数个整数，至少 6 个：coords="x1,y1,x2,y2,x3,y3"；每两个为一组顶点，浏览器自动闭合，但少一对或多一对会导致形状歪斜或漏边 -
shape="default"→ 严禁写coords，写了不仅无效，部分浏览器会跳过整个<map></map>
所有坐标值都基于图片原始尺寸（img.naturalWidth/img.naturalHeight），和 CSS 缩放、width/height 属性完全无关。
coords 字符串里不能有空格，逗号必须英文半角
coords 是纯字符串，浏览器只按英文逗号（,）切分，遇到空格会截断后续内容。比如 coords="100, 200,300,400" 中的空格会让第二项变成 "200" 后面全丢，实际只读到 100 和 200，剩下两个值丢失。
调试建议：
- 先用固定尺寸图（不缩放）+ 像素级截图工具标出坐标，再填入
- 避免手输：用 JS 读取
img.naturalWidth和img.naturalHeight，按比例换算后再生成coords - 不要依赖开发者工具显示的渲染尺寸——它和
coords参考系不一致
响应式场景下 coords 不缩放，硬扛坐标换算是最危险的做法
当你用 CSS 把一张 1200×800 的图缩放到 300×200 显示时，coords 仍要按 1200×800 写。试图监听 resize 事件手动重算所有 coords，极易因边界条件（如图片未加载完成、缩放比浮点误差、移动端 DPR 变化）导致偏移或失效。
更可靠的选择是放弃 <map></map>，改用 SVG：
-
<svg></svg>天然支持缩放、响应式和矢量精度 - 用
<circle></circle>、<rect></rect>、<polygon></polygon>定义可点击区域，绑定click事件即可 - 不需要维护两套坐标系统，也不依赖图片原始尺寸
如果非要用 <map></map>，唯一稳妥方式是强制图片以原始尺寸渲染：<img style="max-width:90%" style="max-width:90%">，并配合 max-width: 100% 和 height: auto 控制容器宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
