area标签必须嵌套在map内且img需用usemap关联，coords按原图像素计算、不随CSS缩放自适应，alt为必需可访问性字段，title无效；现代项目优先选SVG或Canvas替代。
area 标签必须嵌套在 map 内，且 map 必须通过 usemap 关联 img
单独写 <area> 不会生效，浏览器根本不会识别。常见错误是把 <area> 直接丢在页面任意位置，或者忘了给 <img> 加 usemap 属性。
正确结构只有这一种：
<img src="plan.png" alt="楼层图" usemap="#floor-map"> <map name="floor-map"> <area shape="rect" coords="10,20,100,80" href="/lounge" alt="休息区"> <area shape="circle" coords="200,150,30" href="/lab" alt="实验室"> </map>
usemap 的值必须以 # 开头，且与 <map name="..."> 的 name 值完全一致（大小写敏感）。
coords 坐标系以图片左上角为原点，单位是像素
坐标不是百分比，也不随缩放自适应。如果图片用 CSS 缩放（比如 width: 100%），coords 仍按原始尺寸计算，点击区域就会错位。
立即学习“前端免费学习笔记（深入）”；
常见应对方式：
- 用原图尺寸展示图片（不缩放），或用响应式 JS 动态重算
coords - 对简单场景，改用 SVG 替代
<map>，SVG 原生支持比例缩放和事件绑定 -
shape取值只有rect、circle、poly和default；poly的coords是一串 x,y 交替的数字，如"10,10,50,10,50,40,10,40"
area 不支持 title 提示，但 alt 是必需的可访问性字段
<area> 上设 title 在部分浏览器中无效（尤其是 Safari），悬停无提示。真正起作用的是 alt，它不仅用于屏幕阅读器，也影响 SEO 和无图环境下的语义表达。
不要留空 alt，也不要写“点击此处”这种无意义内容。应描述区域功能，例如：alt="前往三楼咖啡角"。
如果需要悬停提示，得靠 JS 模拟：
<area shape="rect" coords="10,20,100,80" href="/cafe" alt="三楼咖啡角"
onmouseenter="showTip('☕ 咖啡角，开放至22:00')" onmouseleave="hideTip()">
现代项目中 area 的兼容性没问题，但维护成本高
<area> 在所有主流浏览器中都支持（包括 IE9+），问题不在兼容性，而在协作和维护。
图像地图一旦换图，所有 coords 都得重调；设计稿改了位置，前端就得手动量像素；多人协作时没人愿意碰那一长串数字。
更实际的做法：
- 静态图 + 精确坐标 → 仅限图不变、区域极少（≤3个）的场景
- 动态图 / 多区域 / 需要高亮反馈 → 优先用 SVG +
<g>分组 +onclick - 需要拖拽、缩放、动画 → 直接上 Canvas 或 Leaflet 这类库
真要用 <area>，就老老实实导出原图尺寸、用 FireShot 或 PixelSnap 量坐标，别指望“差不多就行”。坐标差 5px，用户就可能点不到。
