usemap属性值必须以#开头且严格匹配map的name值，coords基于图片原始尺寸，area须含href和alt，响应式场景应优先用SVG等替代方案。
usemap 属性漏掉 # 就完全失效
浏览器不会报错，但整个图像映射不响应点击——这是最常被忽略的硬性规则。usemap 的值必须以 # 开头，且严格匹配 <map name="xxx"></map> 中的 name 值（不含 #）。大小写、空格、拼写任意一处不一致，关联即中断。
调试时右键图片 → “检查”，看是否能高亮到对应 <map></map>；如果没反应，先查这个。
-
<img usemap="#product-map" alt="HTML中map标签和area标签创建图像映射的方法" >必须配<map name="product-map"></map> - 不能写成
usemap="product-map"（缺#）或<map name="Product-Map"></map>（大小写不一致） -
<map></map>必须在文档流中，不能被display: none、remove()或放在里
coords 坐标始终基于原始图片尺寸
coords 不是相对于 <img alt="HTML中map标签和area标签创建图像映射的方法" > 的 CSS 宽高，也不是视口尺寸，而是图片文件本身的自然宽高（naturalWidth / naturalHeight）。一旦你用 CSS 缩放图片，或设置 width/height 属性拉伸/压缩，热区就会偏移。
例如原图 800×600，coords="0,0,100,100" 指左上角 100×100 区域；若 CSS 把它缩成 400×300 显示，该区域在视觉上只剩四分之一大小，点起来必然不准。
立即学习“前端免费学习笔记（深入）”；
- 矩形：
shape="rect"→coords="x1,y1,x2,y2"（左上 + 右下） - 圆形：
shape="circle"→coords="cx,cy,r"（圆心 x/y + 半径） - 多边形：
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（顶点顺序连接，首尾不自动闭合）
area 标签必须有 href 和 alt 才算有效
缺少 href，点击无跳转行为；缺少 alt，不仅影响无障碍访问（屏幕阅读器无法读出功能），部分浏览器（如旧版 Safari）会直接忽略该 <area>。这不是可选建议，是语义和兼容性底线。
即使你后续用 JS 拦截点击、不走跳转逻辑，也应保留 href="#" 或 href="javascript:void(0)"，并确保 alt 描述清晰，比如 alt="点击放大耳机细节"。
- 不要写
<area shape="rect" coords="...">（缺href和alt） -
target="_blank"可选，但需配合rel="noopener"防安全风险 - 若用 JS 绑定事件，建议加
data-region="speaker"代替依赖href做判断
响应式场景下原生 map/area 几乎不可靠
没有内置缩放适配机制。所有坐标都是像素绝对值，窗口 resize、图片加载延迟、DPR 变化都会导致错位。强行用 JS 动态重算 coords 成本高、易出错，且难以覆盖所有缩放路径（CSS transform、object-fit、picture srcset 切换等）。
现代项目中，真正需要响应式热区的，优先考虑替代方案：
- 用 SVG 替代：天然矢量、坐标相对、支持事件委托、可直接嵌入 DOM
- 用绝对定位 +
<div> 热区层：通过 JS 获取图片自然尺寸与容器比例，动态计算 top/left/width/height<li>用 <code><canvas></canvas>+ 坐标映射：适合复杂交互，但开发成本更高
原生 <map></map>/<area> 只适合静态尺寸、无需缩放、内容极少变动的后台页面或遗留系统。
