usemap属性值必须带#号，而map的name属性值绝对不能带#号；二者名称需大小写完全一致且仅含字母、数字、下划线和短横线；匹配时浏览器会自动去除usemap中的#后进行字符串比对。
usemap 属性值必须带 # 号
浏览器解析 usemap 时，只认带 # 前缀的字符串为有效映射引用。不加 #，<img usemap="map1"> 就完全失效，热点区域不会响应点击——连控制台都不会报错，只是静默忽略。
这是因为 usemap 的设计语义就是「指向页面内某个 <map name="..."></map> 元素」，而 HTML 中所有 ID 引用（包括 <a href="#section"></a>、<label for="id"></label>）都统一要求用 # 表示内部锚点。它不是可选语法糖，是强制约定。
name 属性不能带 # 号
<map></map> 标签自身的 name 属性值**绝对不要加 #**。写成 <map name="#map1"></map> 是常见错误，会导致匹配失败。
原因在于：浏览器内部匹配逻辑是把 usemap 的值（如 "#map1"）去掉开头的 #，再跟所有 <map name="xxx"></map> 的 name 值做字符串比对。所以：
-
usemap="#map1"→ 去掉#得"map1" -
<map name="map1"></map>→ 匹配成功 -
<map name="#map1"></map>→ 匹配失败（变成"map1"vs"#map1"）
引用名称大小写敏感且必须完全一致
HTML 中 usemap 和 <map name></map> 的值是大小写敏感的，且不允许空格或特殊字符（除了字母、数字、下划线、短横线）。例如：
-
usemap="#UserMap"≠<map name="usermap"></map> -
usemap="#nav-map"必须对应<map name="nav-map"></map>，不能写成"nav_map"或"nav map"
注意：虽然部分旧浏览器可能宽松匹配，但现代标准（HTML5）明确要求严格相等，跨浏览器兼容性必须按此处理。
常见调试手段：检查 DOM 中是否真的存在匹配的 map
如果热点不工作，别急着改 JS，先确认两件事：
- 打开开发者工具，在 Elements 面板搜索
<map>，看是否存在 <code>name值与usemap去掉#后完全一致的元素 - 检查该
<map></map>是否在<img>同一文档中（不能跨 iframe，也不能放在<template></template>或未插入 DOM 的片段里） - 用 JS 快速验证：
document.querySelector('img[usemap]')和document.querySelector('map[name="map1"]')是否都返回非 null
最容易被忽略的是：map 元素写在了 img 后面但没等 DOM 加载完就操作，或者用了 Shadow DOM 却没把 map 放进同一影子树。
