usemap与map name必须逐字节严格匹配：usemap值须带#前缀，name值须全小写、仅含字母数字和短横线，二者大小写、符号、空格均不可差；coords基于原图像素，响应式需JS动态缩放。
usemap 和 map name 怎么配才不报错
浏览器对 usemap 和 <map name></map> 的匹配极其严格，错一个字符就静默失效——不是报错，而是整个热区完全不可点。最常见的是漏掉 #、大小写不一致、name 值含空格或中文。
-
usemap="#floor-plan"✅ 必须对应<map name="floor-plan"></map>（注意：name里没有#） -
usemap="floor-plan"❌ 漏#，<map></map>被忽略 -
usemap="#Floor-Plan"❌ 大小写不一致，Safari/Edge 直接断连 - name 值禁用中文、空格、下划线；只用小写字母、数字、短横线
调试时别靠眼睛扫，直接右键检查元素 → 复制 usemap 值，再复制 <map name></map> 值，用编辑器做字符串比对。
coords 坐标为什么总点不准
因为 coords 是基于图片原始尺寸（naturalWidth/naturalHeight）的像素值，而响应式页面中 <img alt="HTML响应式图片区域映射实现教程" > 往往被 CSS 缩放了。你填的是 1200×800 图上的 "100,200,300,400"，但实际渲染可能只有 375px 宽，坐标就严重偏移。
- 用 PS/Figma/在线工具取坐标时，必须打开「原始图」，不能在缩放后的预览图上量
- 临时加
border: 1px solid red到<img alt="HTML响应式图片区域映射实现教程" >，再用开发者工具「截图选区」框出热区，看是否和coords对齐 - 矩形
shape="rect"要求x1 且 <code>y1 ；填反了热区会消失 - 多边形
shape="poly"的coords必须成对出现（总数为偶数），且顶点顺序影响填充区域
响应式下怎么让 coords 动态适配
原生 <map></map> 没有响应式能力，必须用 JS 在图片加载完成和窗口缩放时重算所有 <area> 的 coords。
立即学习“前端免费学习笔记（深入）”；
- 先记录原始尺寸：
const w = img.naturalWidth; const h = img.naturalHeight; - 算缩放比：
const sx = img.offsetWidth / w; const sy = img.offsetHeight / h; - 遍历每个
<area>，按shape类型分别处理：-
rect：四个值都乘对应缩放比 -
circle：圆心cx, cy分别 ×sx, sy，半径 ×sx（或取Math.max(sx, sy)） -
poly：逐对处理x,y，每对都 ×sx, sy
-
- 监听事件：
img.addEventListener('load', updateCoords)+window.addEventListener('resize', updateCoords)
别跳过 load 事件监听——图片未加载完成时 naturalWidth 是 0，缩放比算出来就是 NaN。
area 标签 href 和 alt 为什么不能省略
href 缺失，点击区域无跳转行为；alt 缺失，不仅屏幕阅读器读不出功能，旧版 Safari 会直接忽略该 <area>，导致热区“消失”。
-
href必须是有效 URL，#room1这种 fragment 若目标不存在，点击后页面会跳到顶部，体验极差；建议用./plan.html#room1或加 JS 拦截 -
alt不是可选项，它是语义化与可访问性的强制要求；每个热区应描述其作用，如alt="会议室A入口"，而非泛泛的"点击进入" - 所有
<area>必须嵌套在<map></map>内，且<map></map>必须在<img alt="HTML响应式图片区域映射实现教程" >后面（或同级 DOM 中已存在），否则部分浏览器无法关联
真正难的不是写代码，而是每次换图、改布局、切设备时，都要重新校验坐标是否还对得上——这步没法自动化，只能靠 JS 更新逻辑兜底，再加一次手动比对。
