area标签必须嵌套在map内部且map须有name属性，usemap值需带#前缀并与name严格一致（大小写、符号敏感），coords按原始像素计算，缩放会导致错位，现代项目推荐svg替代。
area 标签必须嵌套在 map 内部，且 map 必须有 name 属性
浏览器只认 <map name="xxx"></map> + <area> 的组合，<area> 单独写在页面任意位置都无效。常见错误是把 <area> 放在 <div> 或 <code><p></p> 里，或者漏掉 name，导致点击无响应。
正确结构只有这一种：
@@##@@ <map name="floor-map"><area shape="rect" coords="10,10,100,50" href="/room-1" alt="会议室"> <area shape="poly" coords="200,30,250,10,300,30,250,50" href="/lobby" alt="大堂"></map>
-
usemap值必须以#开头，且与<map name></map>完全一致（大小写敏感） -
shape只支持rect、circle、poly和default，不支持ellipse或自定义路径 -
coords坐标单位是像素，按图片原始尺寸计算，缩放<img src="plan.png" usemap="#floor-map">会导致热区错位
coords 坐标系从左上角 (0,0) 开始，poly 至少需要 3 组点
poly 的 coords 是 x,y 交替的序列，比如 10,20,30,40,50,60 表示点 (10,20) → (30,40) → (50,60)，首尾自动闭合。少于 3 组点（即 6 个数字）时，浏览器会忽略该 <area>。
调试建议：
- 用 Chrome DevTools 临时加
border: 1px solid red到<img>，确认图片未被 CSS 拉伸 - 用画图工具量取原始图上的像素坐标，不要凭感觉估算
- 对不规则区域，先用
poly粗略圈出，再逐步微调 coords 数值
点击 area 后跳转失败？检查 href、target 和同源策略
<area href> 跳转行为和普通 <a></a> 一致，但容易被忽略三点：
- 如果
href是相对路径（如./detail.html），它基于当前 HTML 页面 URL 解析，不是基于图片路径 -
target="_blank"在部分老版本 IE 中不生效，需配合rel="noopener" - 若用
href="javascript:void(0)"绑定 JS，记得加onclick，且阻止默认行为：onclick="handleClick(); return false;" - 现代项目中更推荐用
onclick+event.preventDefault()，避免依赖 href 导航
响应式页面下 area 热区失效的根源是 img 缩放
HTML 原生 <area> 不感知 CSS 缩放，width: 100% 或 max-width 会让图片变小，但 coords 还按原图尺寸匹配——热区就“飘”了。
可行解法只有两个：
- 用
<picture></picture>+ 多套<source></source>提供不同分辨率图片，并为每套配独立<map></map>（维护成本高） - 放弃原生
<area>，改用 SVG<path></path>或 Canvas + 坐标映射（推荐，可控性强） - 若坚持用
<area>，只能固定图片尺寸（如width: 800px; height: auto），禁用弹性缩放
实际项目里，超过 3 个动态热区或需要适配移动端，基本都会切到 SVG 方案。原生 <map></map> 就是个静态快照，不是响应式组件。
