map 的 name 属性必须与 img 的 usemap 属性值（含 #）严格匹配，区分大小写且不可含空格或特殊字符；area 必须设置 href 和 alt 才生效；coords 基于原图尺寸，响应式缩放需 JS 动态适配。
map 的 name 属性必须和 img 的 usemap 属性值严格匹配
HTML 中 <map> 的 name 不是随便起的，它本质是一个“引用标识符”，只有当 <img> 的 usemap 值（带或不带 #）与之完全一致时，热区才生效。常见错误是漏掉 # 或大小写/空格不一致。
-
<map name="nav-map">→ 对应<img usemap="#nav-map">（推荐写法，W3C 标准要求带#） -
<map name="nav-map">→ 不能配<img usemap="nav-map">（旧浏览器可能容忍，但现代浏览器（如 Chrome 90+）会静默失效） - name 值区分大小写：
"Nav-Map"≠"nav-map" - name 不能含空格或特殊字符，只建议用字母、数字、短横线、下划线
area 的 href 和 alt 必须显式设置才能被识别为可点击热区
即使 <map> 绑对了，<area> 元素若没设 href（或 onclick），多数浏览器不会触发点击行为，也不会显示手型光标。这不是 bug，是规范行为。
- 要跳转：必须写
<area shape="rect" coords="10,10,100,50" href="/home" alt="首页"> - 要执行 JS：推荐
href="javascript:void(0)"+onclick，避免空href导致页面跳到顶部 -
alt不是可选的——它影响可访问性，且部分屏幕阅读器依赖它识别热区用途 -
shape值只能是rect、circle、poly或default，拼错（比如写成rectangle）会导致整个 area 失效
动态插入 map 时，usemap 的 # 不能丢，且需确保 DOM 插入顺序
用 JavaScript 动态生成 <map> 后，如果 <img> 已存在，必须保证 <map> 在 DOM 中位于 <img> 所在 <body> 或同级容器内（不要放在 <div> 深层嵌套里再用 CSS 定位去“覆盖”），且 usemap 的 # 仍要保留。
- 错误做法：
document.body.appendChild(mapEl)但img在某个<section>内 —— 多数浏览器仍能关联，但 Safari 有偶发失败案例 - 稳妥做法：把
<map>和<img>放在同一父容器中，例如一起 append 到某个<div id="banner"> - 检查是否绑定成功：打开 DevTools，选中
<img>元素，在 Properties 面板看是否有useMap字段指向对应<map>节点；没有则说明 name 不匹配或 map 尚未挂载
响应式图像热区会失效？coords 是像素值，不随缩放自适应
<area coords> 的坐标永远基于原始图片的自然尺寸（naturalWidth/naturalHeight），不是渲染后尺寸。所以当图片用 width="100%" 或 CSS 缩放时，热区就错位了。
立即学习“前端免费学习笔记（深入）”；
- 最简解法：用
<picture>+ 多个<source>配不同<map>，按断点切换整套 coords - 工程解法：用 JS 监听
resize，按比例重算coords（需缓存原图尺寸，再根据img.clientWidth / img.naturalWidth缩放所有坐标） - 注意：CSS
transform: scale()不影响coords计算逻辑，但会让视觉错位更难调试 - 别用
vw/vh单位写 coords —— HTML 规范不支持，会被忽略
实际项目里，热区错位比绑定失败更难排查，因为浏览器不报错，只是点不中。建议第一次写完立刻用不同屏幕宽度手动点一遍所有区域，而不是等测试提 bug。
