usemap="#xxx" 必须严格匹配 <map name="xxx"> 的 name 值（区分大小写、无空格/符号差异），且 map 必须同文档、area 的 shape 和 coords 须符合规则，否则热区静默失效。
usemap 和 name 的关联不是“名字匹配”，而是 ID 引用——usemap="#xxx" 中的 #xxx 是对 <map name="xxx"> 的引用，且大小写、符号、空格必须逐字一致。
usemap 值必须带 #，否则静默失效
浏览器只认 usemap="#floor1" 这种写法。usemap="floor1"、usemap="floor1.jpg" 或 usemap="#floor1 "（末尾空格）都会断连，且控制台不报错，热区完全没反应。
-
usemap是 ID 类型引用，语法强制要求以#开头 -
#后面的部分，必须和<map name="...">的值**完全相同**（区分大小写） - 常见错误：复制粘贴时多出不可见空格、中英文引号混用、用了下划线但
name里是短横线
map 的 name 属性本身不带 #
<map name="floor1"> 写的是纯字符串 floor1，不是 #floor1。如果写成 name="#floor1"，就永远匹配不上 usemap="#floor1" —— 因为浏览器会去找叫 "#floor1" 的 map，而你实际定义的是 "floor1"。
-
name值是标识符，不是 CSS 选择器，不支持#或. - 可以同时写
id="floor1"和name="floor1"，但只有name被usemap使用（部分旧浏览器曾尝试兼容id，但不可靠） - 别指望
name可以用正则或通配符——它就是严格字符串匹配
map 和 img 必须同文档或同域 iframe
<map> 不能跨文档引用。把 <map> 放在外部 HTML 文件里，再通过 <iframe> 加载；或者用 JS 动态 fetch 插入后没等 <img> 渲染完成就挂载，都会导致热区不可点。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
<map>必须出现在同一 HTML 文档内（位置前后不限） - 若用 JS 创建
<map>，需确保它已插入到document.body（或至少是<img>的祖先节点），且name拼写无误 -
<map>本身不渲染，display: none或visibility: hidden对功能无影响，也无需考虑样式
area 的 shape 和 coords 必须严格按规则写
即使 usemap 和 name 都对了，<area> 的 shape 和 coords 错一个数，热区也会偏移或彻底失效，而且浏览器通常不报错。
-
shape="rect"→ 必须 4 个值：left,top,right,bottom -
shape="circle"→ 必须 3 个值：center_x,center_y,radius -
shape="poly"→ 必须偶数个值，x1,y1,x2,y2,... - 所有坐标基于图片原始尺寸，CSS 缩放后需手动重算，否则热点错位
最麻烦的不是写错，而是错得毫无提示——usemap 少个 #、name 多个空格、coords 少一位数字，页面都照常显示，只是点不动。调试时优先检查这三处，比翻控制台更有效。
