usemap="#name" 的值必须与 map 的 name 属性完全一致（含大小写、符号），coords 按原始尺寸计算且格式严格，area 必须为 map 直接子元素、含 href 和非空 alt，响应式需 JS 动态重算坐标。
usemap="#name" 和
热区点不动，八成卡在这儿。浏览器不报错，也不提示，只让 area 彻底失效。
关键规则就一条：usemap 值必须以 # 开头，且 # 后面字符串要和 <map name=""> 的 name 属性**完全一致**——大小写、连字符、空格、下划线，一个都不能差。
- ✅ 正确：
<img usemap="#floor-plan">+<map name="floor-plan"> - ❌ 错误：
usemap="floor-plan"（漏#） - ❌ 错误：
usemap="#Floor-Plan"（大小写错） - ❌ 错误：
usemap="#floor_plan"（下划线 ≠ 连字符）
调试时直接打开 Chrome 开发者工具，右键图片 → “检查”，看是否能高亮到对应 <map>；如果不能，基本就是匹配失败。
coords 坐标永远按原始图片尺寸计算
你用 CSS 把一张 1200×800 的图缩成 600px 宽，coords="0,0,100,100" 依然指原始图左上角 100×100 像素区域——现在它只占屏幕约 50×50px，点不准是必然的。
立即学习“前端免费学习笔记（深入）”；
三种 shape 对应的 coords 格式必须严格遵守：
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心坐标 + 半径，r必须为正整数 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点成对出现，总数必须是偶数；首尾点**不需要重复闭合**（浏览器自动连线），但交叉多边形渲染不可靠
坐标里不能有空格或换行，只允许数字和逗号。用 Figma 或 Photoshop 导出坐标后，务必手动清理。
area 必须是 map 的直接子元素，且 href 和 alt 不可省略
area 是空元素，不能自闭合（<area /> 是错的），也不能放在 <div> 或 <section> 里“中转”——只要脱离 <map> 直接子节点位置，所有浏览器都会忽略它。
href 必须是有效 URL：
- ✅ 支持：
href="./detail.html"、href="javascript:void(0)"、href="https://example.com" - ❌ 不支持：
href="#"、href="#section"（纯锚点跳转在多数浏览器中会失效或触发页面跳动）
alt 是强制属性，不可为空字符串。它不是可选文案，而是屏幕阅读器识别热区用途的唯一语义依据，比如 alt="点击进入厨房详情"。
响应式页面必须用 JS 动态重算 coords
没有纯 HTML/CSS 方案能自动适配缩放。只要图片被 CSS 缩放（如 max-width: 100% 或 width: 50%），热区立刻偏移。
可靠解法是 JS 动态重算：
- 监听
window.addEventListener('resize', updateCoords)和img.addEventListener('load', updateCoords) -
updateCoords()中读取img.naturalWidth与当前img.offsetWidth得到缩放比 - 遍历所有
area，把每个coords数值乘以比例后重新赋值
移动端尤其要注意：iOS Safari 对小面积 poly 热点响应迟钝，建议最小物理尺寸 ≥ 44×44px，否则真机测试大概率点不中。
