<map>+<area>是唯一原生、语义正确且无障碍友好的图片热区方案；usemap与map的name必须严格匹配（#仅在usemap中，大小写敏感），map需在img之后，coords基于原始像素，响应式需JS动态重算，area必须含href和alt才符合可访问性要求。
用 <map> + <area> 是唯一原生、语义正确、无障碍友好的方案；CSS 伪元素或绝对定位只能模拟，无法真正绑定点击逻辑到图片坐标系。
usemap 和 map 的 name 必须严格匹配（含 # 和大小写）
这是最常失效的环节：浏览器不报错，但整个热区完全无响应。
-
<img usemap="#nav-map">中的#nav-map必须和<map name="nav-map">的name值**完全一致**，包括开头的#不写在name里，只出现在usemap中 - 大小写敏感——
name="NavMap"和usemap="#navmap"就会断开绑定 - 确保
<map>在 DOM 中位于<img>**之后**（或同级且顺序正确），部分旧版 Safari 对顺序敏感
coords 坐标基于原始像素，不是 CSS 渲染尺寸
图片缩放（width/height 设置、transform: scale()、object-fit）不会改变 <area> 的生效位置——它永远按图片原始分辨率计算。
- 一张 800×600 的图，设
<img width="400" height="300">，coords="100,100,200,200"仍对应原始图中 (100,100) 到 (200,200) 的矩形 - 若需响应式适配，必须用 JavaScript 动态重算 coords（监听
resize+ 获取img.naturalWidth和渲染宽高比） - 在线工具如 Image Map Resizer 可导出多套 coords，但不能替代 JS 运行时校准
area 必须带 href 和 alt 才具备功能与可访问性
缺失 href 会导致区域不可点击；缺失 alt 会让屏幕阅读器跳过该热区，也违反 WCAG。
立即学习“前端免费学习笔记（深入）”；
-
<area shape="rect" coords="0,0,100,50" href="/home" alt="首页入口">✅ -
<area shape="rect" coords="0,0,100,50" onclick="doSomething()">>❌ 不推荐：绕过语义链接，键盘用户无法聚焦/回车触发 -
shape取值仅限rect（4值）、circle（3值：cx,cy,r）、poly（偶数个顶点坐标），多一个少一个都会使该区域失效
真正难的不是写对标签，而是当图片被 object-fit: cover 或 flex 容器裁剪时，coords 和视觉区域不再对齐——这时候必须放弃纯 HTML 方案，改用 Canvas + 事件坐标换算，或者把图片拆成多个独立 <img> 分别包裹链接。
