area标签不生效主因是usemap与map name未逐字节匹配，且area须嵌套于map内、带href或nohref、正确设置coords；响应式下需JS重算坐标或改用SVG。
area 标签不生效，90% 是因为 usemap 和 map 的名称没对上——浏览器不报错，只静默忽略，连控制台都干净得像没写过这行代码。
usemap="#name" 和 map name 必须逐字节一致
这是最常被跳过的硬性匹配规则：usemap 值必须带 #，且后面字符串要和 <map name="xxx"> 的 name 属性完全相同，包括大小写、连字符、空格、下划线，一个都不能差。
-
usemap="#product-map"✅ 对应<map name="product-map"> -
usemap="product-map"❌ 漏掉#，整个映射失效 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
<map name="product_map">❌ 下划线 vs 连字符，不匹配
调试时别靠眼睛扫，直接在 DevTools 里复制 usemap 的值，再粘贴去比对 map 的 name 属性。
area 必须嵌套在 map 内，且带 href 或 nohref
area 不是独立可交互元素，它只有在正确嵌套、有明确语义标识时，才能被浏览器识别为热区。
立即学习“前端免费学习笔记（深入）”；
- 必须写在
<map>...</map>内部，不能放在div、section或其他容器里“中转” - 必须有
href（跳转用）或nohref（装饰性/占位用），否则屏幕阅读器和部分浏览器会直接跳过 -
alt属性不可省，它是屏幕阅读器唯一播报的文案，不能写“点击此处”，要写“进入产品详情页”这类具体功能描述
漏掉 href 或 nohref，area 就等于不存在——键盘 Tab 焦点进不去，VoiceOver 读不到，鼠标悬停也无响应。
coords 坐标填错一个数，热区就偏到画布外
所有 coords 都是基于图片原始尺寸的像素值，原点在左上角（0,0），X 向右、Y 向下递增。但不同 shape 的格式要求严格，混用必错。
-
shape="rect"→coords="x1,y1,x2,y2"：必须满足x1 < x2且y1 < y2，顺序是左上 + 右下，不是宽高 -
shape="circle"→coords="cx,cy,r"：半径r必须是正整数，不能是0或小数 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点成对出现，总数必须是偶数；首尾不自动闭合，手动重复第一个点更稳
常见错误：把设计稿里“居中坐标”直接当 coords 填；或导出 poly 坐标时带了空格/换行，Safari 会静默跳过该区域。
响应式页面里 coords 必然错位，没有纯 CSS 解法
只要图片用了 width: 100%、max-width: 100% 或任何 CSS 缩放，coords 就立刻失准——这不是 bug，是原生机制限制。原始图是 1200×800，缩放到 375px 宽，coords="0,0,100,100" 实际只占约 31×21px，远低于触控最小推荐尺寸 44×44px。
- 原生
map不支持百分比，coords只认绝对像素 - 纯 HTML/CSS 方案无法自动适配，JS 动态重算是唯一可靠解法：监听
img.onload和window.resize，用img.naturalWidth / img.offsetWidth算缩放比，再遍历所有area重写coords - 更推荐用 SVG 替代：
<svg>内嵌<image>+<polygon>，天然响应式，且每个形状可独立设role="link"和aria-label
移动端测试务必在目标设备视口宽度下进行，别只在桌面调好就上线——错位问题在真机上才暴露得最彻底。
