<p>usemap 和 map name 必须逐字节匹配，usemap 值须以 # 开头且与 map 的 name 完全一致（含大小写、连字符等）；coords 基于原始图尺寸计算，不随 CSS 缩放变化；area 必为 map 直接子元素，href 和 alt 不可省略；响应式下推荐用 JS 动态重算坐标或改用 SVG。</p>
usemap 和 map name 必须逐字节匹配
图片和热区不联动，90% 是因为 usemap 写错了。浏览器不报错，但整个 area 就像不存在一样。
关键点就一个：usemap 的值必须以 # 开头，且后面字符串要和 <map name="xxx"> 中的 name 完全一致——大小写、连字符、下划线、空格，一个都不能差。
-
usemap="#product-nav"必须对应<map name="product-nav">，写成usemap="#Product-Nav"或usemap="product-nav"都会断连 - 为防手误，建议统一用小写字母 + 连字符命名，比如
name="floor-plan" - 兼容旧标准可同时写
<map id="floor-plan" name="floor-plan"> - 调试时右键图片 → “检查”，看是否能高亮到对应
<map>；不能高亮，基本就是匹配失败
coords 坐标永远按原始图尺寸计算
你用 CSS 把一张 1200×800 的图缩成 600×400 显示，coords="0,0,100,100" 依然指原始图左上角 100×100 像素区域——现在它只占屏幕约 50×50px，点起来必然偏移。
这不是 bug，是规范行为。坐标系原点在图像左上角，单位是像素，且始终基于原始分辨率。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"：coords="x1,y1,x2,y2"，要求x1 < x2且y1 < y2，否则部分浏览器（如 Safari）会忽略该区域 -
shape="circle"：coords="cx,cy,r"，r必须为正整数，不能是小数或 0 -
shape="poly"：coords必须是偶数个数字，如"10,20,30,40,50,60"（3 个点），首尾点无需重复闭合 - 导出坐标后务必手动清理空格和换行，
coords中只允许数字和逗号
area 必须是 map 的直接子元素，且 href 和 alt 不可省略
<area> 是空元素，但不是随便放哪都行。它必须直接写在 <map> 标签内部，不能被 <div>、注释、<script> 包裹，也不能放在 <head> 里——否则所有浏览器都会忽略它。
更关键的是两个属性缺一不可：
-
href：没这个，点击不跳转；写成href="#"或href=""会触发错误请求（如加载当前页），应写成href="./page.html#section"或href="javascript:void(0)"配合 JS -
alt：没这个，屏幕阅读器跳过该热区，Chrome 控制台会报 warning，无障碍直接失效 -
shape只能是rect、circle、poly或default；写成rectangle或round会静默失效
移动端和响应式场景下的实际限制
纯 <area> 在响应式页面中几乎无法可靠工作，这是最容易被忽略的硬伤。
原因很直接：坐标不随缩放自适应，而移动端又对小热区极其敏感。
- iOS Safari 对面积小于 44×44px 的
poly热区响应迟钝甚至无反应 - 如果
<img>在<picture>、<figure>或 Shadow DOM 里，外部<map>默认不可见 - 没有媒体查询支持，
<area>无法按视口尺寸动态切换 coords - 真正可用的方案只有两个：用 JavaScript 动态重算坐标（需监听
resize和load），或直接改用 SVG
