usemap="#name"与<map name="name">的name值必须完全一致（含大小写、符号），coords按原始尺寸计算且格式严格，area须为map直接子元素并含href和alt，响应式需JS动态重算。
usemap="#name" 和 <map name="name"> 必须逐字节匹配
热区点不动，八成卡在这儿。浏览器不报错，也不提示，只让area彻底失效。
关键规则就一条：usemap值必须以#开头，且#后面字符串要和<map name="...">的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,..."：顶点成对出现，总数必须是偶数；首尾点**不需要重复闭合**（浏览器自动连线），但交叉多边形渲染不可靠
坐标里不能有空格或换行，只允许数字和逗号。用 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是强制属性，不可为空字符串。它不是摆设——屏幕阅读器靠它理解区域用途，比如alt="点击进入卫生间详情"，而不是alt="链接"。
响应式场景下热区错位，只能靠 JS 动态重算
HTML 图像映射天生不支持 CSS 缩放适配。没有纯 HTML/CSS 方案能自动重算coords。
若必须响应式，得在window.resize和img.load后动态换算：
- 记录图片原始宽高（通过
img.naturalWidth/img.naturalHeight） - 计算当前显示宽高与原始宽高的缩放比
scaleX、scaleY - 遍历所有
area，解析其coords字符串，将每个数值乘以对应方向缩放比，再赋回area.coords
移动端尤其要注意：iOS Safari 对小面积poly热点响应迟钝，建议最小热区 ≥ 44×44px（物理像素），否则可能无响应。
