<p>usemap 的值必须以 # 开头且与 map 的 name 属性完全一致（大小写、符号均敏感）；map 必须在同文档内，不能跨 iframe 或动态注入；area 坐标基于原图尺寸，缩放后需手动换算；shape="poly" 坐标数须为偶数；img 不可嵌套在 a 或 button 中，否则 usemap 被规范强制忽略。</p>
usemap 的值必须带 #，且和
浏览器只认 usemap="#xxx" 这种写法，漏掉 #（比如写成 usemap="xxx"）就彻底断连——不报错、不警告，图片热区就是点不动。这个匹配是逐字节敏感的：name="Floor1" 和 usemap="#floor1" 也不行，大小写、下划线、空格都得一模一样。
map 必须在同一个 HTML 文档里，不能跨 iframe 或 fetch 注入
<map> 标签不会跨文档生效。常见失效场景包括：
- 把
<map name="nav">放在外部 HTML 文件里，再用<iframe src="map.html">加载 - 用
fetch()获取 map HTML 片段后直接innerHTML插入，但没等<img>渲染完成就挂载 - 把
<map>插入到 Shadow DOM 里，而<img>在 light DOM 中
只要确保 <map> 是 document.body（或 img 的某个祖先容器）的子节点，位置前后无所谓。
area 的 coords 值基于原始图片尺寸，缩放后会失效
哪怕你用 CSS 把图片缩放到 50%，<area shape="rect" coords="10,20,100,80"> 依然按原图宽高计算坐标。浏览器不会自动换算。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 响应式页面中，
<map>很快就不准——建议改用 SVG 或绝对定位 + JavaScript 动态重算 - 用开发者工具检查图片实际渲染尺寸，再按比例反推 coords：比如原图 800×600，显示为 400×300，则所有 coords 除以 2
-
shape="poly"的坐标数必须是偶数，每个点是x,y成对出现，多一个少一个都会让整个区域失效
img 不能嵌套在 <a> 或 <button> 里，否则 usemap 被忽略
HTML 规范明确禁止：如果 <img> 是 <a> 或 <button> 的后代，浏览器会直接丢弃它的 usemap 属性。现象是热区完全静默，控制台也无提示。
正确写法是让 <img> 和 <map> 并列于同一层级，例如：
<figure>
<img src="plan.png" usemap="#floor1" alt="楼层图">
<map name="floor1">
<area shape="rect" coords="10,20,100,80" href="/room1" alt="房间1">
</map>
</figure>
真正容易被忽略的是：这个限制不是 bug，而是规范强制行为。哪怕你加了 pointer-events: none 或 JS 拦截 click，也无法绕过解析阶段的属性丢弃。
