usemap 与 map name 必须逐字节一致（含 #、大小写、符号），coords 格式需严格匹配 shape 类型，响应式需 js 动态缩放坐标，area 必须同时含 href 和 alt 才具备功能与可访问性。
usemap 和 map name 不匹配，热点根本不会响应
浏览器对 usemap 和 <map name=""></map> 的匹配极其严格：必须逐字节一致，包括大小写、连字符、下划线，且 usemap 值**必须带 # 前缀**。漏掉 #、大小写错一位、name 里多一个空格，整个 <map></map> 就被静默忽略——控制台不报错，点击也毫无反应。
常见错误示例：
-
usemap="floor-map"❌ 缺 #，<map></map>完全失效 -
usemap="#Floor-Map"❌ 大小写不一致，断连 -
<map name="floor_map"></map>❌ 下划线 vs 连字符，不匹配
调试时别靠肉眼扫，直接复制 usemap 的值（含 #），在开发者工具中搜索 <map name="..."></map>，确认是否真的一模一样。
coords 填错格式，热点位置完全偏移
coords 不是“随便填的数字”，它由 shape 类型决定解析逻辑。填错一位，热点可能缩成一个点、跑到画布外，甚至覆盖整张图。
必须按规则填写：
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"：圆心坐标 + 半径，r必须为正整数（不能是 0 或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，手动重复第一个点更稳
设计稿给的是“居中坐标”或“缩放后坐标”？不能直接填。所有坐标必须以图片原始尺寸左上角为 (0, 0)，向右为 x 正方向，向下为 y 正方向。
响应式下图片缩放，coords 全部失效
原生 <map></map> 没有响应式能力。max-width: 100%、vw、CSS 缩放都会让固定像素坐标错位——移动端几乎必出问题。
必须用 JS 动态重算：
- 记录原始尺寸：
const naturalW = img.naturalWidth; const naturalH = img.naturalHeight; - 计算缩放比：
const scaleX = img.offsetWidth / naturalW; const scaleY = img.offsetHeight / naturalH; - 遍历每个
<area>，按shape类型分别处理坐标：矩形缩放全部 4 个值，圆形缩放圆心 + 半径，多边形逐对缩放x/y - 监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords)
临时验证技巧：给 <img> 加 border: 1px solid red，再用开发者工具「截图选区」比对坐标是否对齐。
area 缺 href 或 alt，热点功能与可访问性双崩
<area> 标签必须同时含 href 和 alt，否则既无法跳转，也不被屏幕阅读器识别。
- 缺
href：点击无跳转行为，链接无效（即使只做 JS 交互，也建议设href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488"或拦截默认行为） - 缺
alt：屏幕阅读器无法读出功能，旧版 Safari 会直接忽略该区域 -
href=""或href="#"：点击后刷新当前页，相当于跳转到自身，极易误判为“没反应”
多区域重叠时，DOM 顺序靠后的 <area> 会覆盖前面的（z-index 无效），导致前一个点不中——调整 HTML 中 <area> 的书写顺序是最直接的解决方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
