area标签必须嵌套在map内且通过usemap与img关联，否则无效；shape仅支持rect/circle/poly/default；coords按原图像素计算，缩放后需JS适配或改用SVG；无障碍支持差，建议语义化HTML替代。
area 标签必须嵌套在 map 内部，否则完全无效
浏览器会直接忽略孤立的 <area>，哪怕属性写得再全。必须用 <map> 包裹，并通过 usemap 属性与 <img> 关联。常见错误是把 <area> 放在 <div> 或页面任意位置，结果点击无响应。
正确结构示例：
<img src="plan.png" usemap="#floor-map"> <map name="floor-map"> <area shape="rect" coords="10,20,110,120" href="/room/a"> <area shape="circle" coords="200,80,30" href="/room/b"> </map>
-
name和usemap的值必须严格一致（注意开头的#只出现在usemap中） -
shape只支持rect、circle、poly和default，不支持ellipse或roundrect -
coords值是像素坐标，原点在图片左上角；poly需成对提供 x,y（如50,60,80,20,120,70）
href 和 onclick 同时存在时，优先触发 href 跳转
想用 JavaScript 做交互（比如弹窗、高亮、AJAX 加载），别直接在 <area> 上写 onclick 并返回 false —— 很多浏览器仍会先跳转，尤其移动端。
- 更可靠的做法：移除
href，用 JS 绑定事件，例如document.querySelector('area[data-id="room-a"]').addEventListener('click', handler) - 若保留
href，需加event.preventDefault()，且确保事件监听器在 DOM 加载完成后绑定 -
target="_blank"在<area>中有效，但部分旧版 Safari 对其支持不稳定
coords 坐标系依赖图片原始尺寸，缩放后失效
如果用 CSS 缩放 <img>（比如 width: 100%; height: auto），<area> 的 coords 依然按原图像素计算，热点区域会严重偏移。
立即学习“前端免费学习笔记（深入）”；
- 方案一：用
<picture>+srcset提供多分辨率图片，同时为每张图单独配一套<area>（复杂但精准） - 方案二：改用 SVG 替代 —— SVG 的
<area>等价物（<path>+cursor: pointer+ JS 事件）天然响应式 - 方案三：用 JS 动态计算缩放比例，重设
coords（需监听resize和图片加载完成）
无障碍和 SEO 基本不可用，替代方案要早规划
<area> 不支持 aria-label、title 效果有限，屏幕阅读器通常只读出 “link”，无法告知区域含义；搜索引擎也基本不索引这些链接。
- 必须支持无障碍时，建议放弃
<map>，改用带语义的 HTML+CSS 定位（如绝对定位的<a>叠加在图片上） - 若坚持用
<map>，至少给每个<area>加alt属性（尽管它只在图片加载失败时生效） - 移动端触控热区小（尤其
poly边缘），务必留出至少 44×44px 的有效点击范围，必要时用透明扩大层辅助
<map> 很快会卡在响应式、可访问性、维护成本这三点上。越早确认是否真需要像素级热点，越不容易返工。 
