usemap="#name"与<map name="name">必须逐字节匹配，否则热区静默失效；coords基于原始尺寸计算，缩放需JS动态重算；area须为map直接子元素且href、alt不可省略。
usemap="#name" 和
热区点击没反应，八成卡在这儿。浏览器不报错，也不提示，只让 area 彻底失效。
关键规则就一条：usemap 值必须以 # 开头，且 # 后面字符串要和 <map name=""></map> 的 name 属性**完全一致**——大小写、连字符、空格、下划线，一个都不能差。
- ✅ 正确：
<img usemap="#floor-plan">+<map name="floor-plan"> - ❌ 错误：
usemap="floor-plan"（漏#） - ❌ 错误：
usemap="#Floor-Plan"（大小写错） - ❌ 错误：
usemap="#floor_plan"（下划线 ≠ 连字符）
调试时直接打开 Chrome 开发者工具，右键图片 → “检查”，看是否能高亮到对应 <map>；如果不能，基本就是匹配失败。
coords 坐标永远按原始图片尺寸计算
你用 CSS 把一张 1200×800 的图缩成 600px 宽，coords="0,0,100,100" 依然指原始图左上角 100×100 像素区域——现在它只占屏幕约 50×50px，点不准是必然的。
立即学习“前端免费学习笔记（深入）”；
三种 shape 对应的 coords 格式必须严格遵守：
-
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,..."：顶点成对出现，总数必须是偶数；首尾点**不需要重复闭合**（浏览器自动连线），但交叉多边形渲染不可靠
coords 里不能有空格或换行，只允许数字和逗号。用 Figma 或 Photoshop 导出坐标后，务必手动清理。
area 必须是 map 的直接子元素，且 href 和 alt 不可省略
area 是空元素，不能自闭合（<area /> 是错的），也不能放在 <div> 或 <section> 里“中转”——只要脱离 <map> 直接子节点位置，所有浏览器都会忽略它。
href 必须是有效 URL：
- ✅ 支持：
href="./detail.html"、href="javascript:void(0)"、href="https://example.com" - ❌ 不支持：
href="#"、href="#section"（纯锚点跳转在多数浏览器中会失效或触发页面跳动）
alt 是强制属性，不可为空字符串。它不只是为了无障碍——缺失时 Chrome 控制台会报 warning，部分旧浏览器甚至不触发 click 事件冒泡。
响应式页面里必须用 JS 动态重算 coords
没有纯 HTML/CSS 方案能自动适配缩放。coords 永远绑定图片文件的 naturalWidth/naturalHeight，不是 CSS 渲染后的宽高。
唯一可靠解法是 JS 动态重算：
- 监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords) -
updateCoords()中读取img.naturalWidth与当前img.offsetWidth得到缩放比 - 遍历所有
area，把每个coords数值乘以比例后重新赋值
移动端尤其明显：原始图 1200×800 缩到 375px 宽后，coords="0,0,100,100" 实际只占屏幕约 31×21px，远低于触控推荐最小尺寸 44×44px。测试务必在目标设备视口宽度下进行，别只在桌面调好就上线。
