usemap与map的name必须逐字节匹配（含#、大小写、符号），coords基于原始图片尺寸且需按shape规范填写，area必须嵌套于map内并带href和alt属性。
热区定义不难，但错一个字符就完全失效——usemap 和 map 的 name 必须逐字节一致，coords 必须按原始图片像素写死，浏览器不报错，只让你点不动。
usemap 与 map name 必须严格匹配
这是 90% 热区失效的根源。不是“差不多就行”，而是大小写、连字符、#号缺一不可。
-
usemap值必须以#开头，比如usemap="#floor-plan" -
<map name="floor-plan">的name值必须和#后面的字符串**完全相同**（不能是floor_plan、Floor-Plan或漏掉#） - 调试时直接在 Chrome DevTools 里右键图片 → “检查”，看是否能高亮到对应
<map>；如果不能，基本就是匹配失败
coords 怎么填才有效
coords 不是“随便标几个点”，它依赖 shape 类型，且永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），跟 CSS 缩放无关。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，要求x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心坐标 + 半径，r必须为正整数 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,...,x1,y1"：顶点成对出现，总数必须是偶数；首尾点**必须手动重复闭合**（否则不是封闭区域） - 别用
shape="default"做兜底——它会捕获所有未覆盖区域，干扰调试
area 必须嵌套在 map 内且带必要属性
<area> 是空元素，不渲染任何内容，也不支持 title 或 aria-label，但它绝不能脱离 <map> 存在。
立即学习“前端免费学习笔记（深入）”；
-
<area>必须作为<map>的**直接子节点**，不能包在<div>或<section>里 -
href必须是有效 URL：./page.html#id或javascript:void(0)都可以，但纯#id在多数浏览器中不跳转 -
alt属性强制要求：缺失时 Chrome 控制台会 warn，屏幕阅读器跳过该区域，无障碍直接失效；哪怕只是alt=""也比没有强 - 移动端最小热区建议 ≥ 44×44px 物理像素，iOS Safari 对小面积
poly响应迟钝
响应式页面里热区总错位怎么办
这不是 bug，是机制限制：coords 绑定的是原始像素，CSS 缩放（如 width: 100%）不会自动重算坐标。
- 临时方案：监听
img.load和window.resize，用img.naturalWidth / img.offsetWidth算缩放比，再遍历所有area，把每个coords数值乘以比例后重新赋值 - 长期方案：改用 SVG 替代 ——
<svg>内部的<path>或<polygon>天然响应式，支持完整 ARIA，且坐标可相对单位（如%）定义 - 千万别指望浏览器自动适配；只要图片用了
max-width或height: auto，原始coords就已失效
真正麻烦的从来不是怎么写标签，而是坐标准不准、怎么取、怎么验——UI 给的标注图务必确认是“按原始尺寸截图”，PS 或在线工具导出坐标后，还得用 outline 临时加红边比对位置。一旦进了 Shadow DOM 或动态插入图片，<map> 必须提前挂载，否则热区直接不可见。
