usemap与map的name必须逐字节匹配，否则热区静默失效；usemap值须以#开头且#后字符串与map的name完全一致（含大小写、连字符、空格等），coords基于原始尺寸计算，area须为map直接子元素并含href和alt属性。
usemap 和 map name 必须逐字节匹配
热区点击没反应？八成卡在这儿。浏览器不会报错，area 会静默失效，连控制台都干净得像没写过代码。
关键就一条：usemap 的值必须以 # 开头，且 # 后面的字符串要和 <map name="..."> 的 name 属性**完全一致**：大小写、连字符、下划线、空格，一个都不能差。
- ✅ 正确：
<img usemap="#floor-plan">+<map name="floor-plan"> - ❌ 错误：
usemap="floor-plan"（漏#）、usemap="#Floor-Plan"（大小写错）、usemap="#floor_plan"（下划线 ≠ 连字符）
调试时直接右键图片 → “检查”，看开发者工具能否高亮到对应 <map>；如果不能，优先核对这个匹配关系。
coords 坐标永远按原始尺寸计算
你用 CSS 把一张 1200×800 的图缩成 300px 宽，coords="0,0,100,100" 依然指向原始图左上角 100×100 像素区域——现在它在屏幕上只占约 25×25px，点不准是必然的。
立即学习“前端免费学习笔记（深入）”；
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 导出坐标后，务必手动清理空格和换行——哪怕多一个空格，Safari 就可能直接忽略该 area。
area 必须是 map 的直接子元素，且 href 和 alt 不可省略
area 是个空元素，不能自闭合（<area /> 是错的），也不能放在 <div> 或 <section> 里“中转”。只要脱离 <map> 的直接子节点位置，所有浏览器都会忽略它。
href 和 alt 是强制属性：
-
href必须是有效 URL：./detail.html、javascript:void(0)、https://example.com都可以；但href="#"或href="#section"在多数浏览器中会失效或触发页面跳动 -
alt不可为空字符串，也不能缺；它是屏幕阅读器理解区域用途的唯一依据，比如alt="点击进入卫生间详情"，不是alt="链接"
移动端尤其要注意：iOS Safari 对小面积 poly 热区响应迟钝，建议最小物理尺寸 ≥ 44×44px。
响应式场景下 coords 不会自动适配，只能靠 JS 动态重算
HTML 图像映射天生不支持 CSS 缩放适配。没有纯 HTML/CSS 方案能自动重算 coords。
若必须响应式，得监听 window.resize 和 img.onload，用 img.naturalWidth / img.naturalHeight 获取原始尺寸，再按当前显示宽高比例换算坐标。
更现实的替代方案是：改用 SVG（天然矢量、可缩放、支持事件委托）或 Canvas（适合高频动态热区），而不是硬扛 <map> 的固有限制。
真正容易被忽略的，是 <map> 无法跨 Shadow DOM 生效——如果 <img> 在 Web Component 内部，外部定义的 <map> 默认不可见。
