area标签必须嵌套在map内且img需通过usemap="#name"关联，coords按原图像素定义，响应式需JS动态缩放，无障碍需alt和tabindex。
area 标签必须配合 map 使用才能生效
单独写 <area> 不会响应点击，浏览器直接忽略。它必须嵌套在 <map> 元素内，且 <img> 必须通过 usemap 属性关联到该 <map> 的 name。
常见错误是只写了 <area> 却忘了 <map> 包裹，或 usemap 值漏了开头的 #（如写成 usemap="mymap" 而不是 usemap="#mymap"）。
正确结构示例：
<img src="plan.png" usemap="#floorplan"> <map name="floorplan"> <area shape="rect" coords="10,20,110,120" href="/kitchen"> <area shape="circle" coords="200,80,30" href="/bedroom"> </map>
coords 坐标系以图片左上角为原点，单位是像素
coords 的数值含义取决于 shape 属性：
立即学习“前端免费学习笔记（深入）”；
-
rect：四个值，x1,y1,x2,y2（左上角 + 右下角） -
circle：三个值，cx,cy,r（圆心 x、y + 半径） -
poly：偶数个值，依次为x1,y1,x2,y2,x3,y3,...（多边形顶点）
注意：这些坐标是相对于原始图片尺寸的，不是 CSS 缩放后的显示尺寸。如果用 width/height 或 CSS 缩放了图片，coords 仍要按原图像素写，否则热区会错位。
调试建议：先用原图尺寸开发，再用开发者工具临时覆盖 img 的 width/height 查看效果；若需响应式，得用 JS 动态重算 coords（见下节）。
响应式页面中 area 热区会失效的真正原因
根本问题不是 <area> 本身不支持响应式，而是 coords 是固定像素值，而图片在不同屏幕下缩放比例不同，导致热区偏移。
纯 HTML/CSS 无法自动适配 —— <map> 没有媒体查询支持，coords 也不能写百分比。
可行方案只有两个：
- 放弃
<map>，改用绝对定位的透明<a>+pointer-events（适合简单矩形区域） - 保留
<map>，但用 JS 监听resize，根据当前图片显示宽高与原始宽高比，动态重写所有<area>的coords
后者示例逻辑（假设原始图宽 800，当前显示宽 img.offsetWidth）：
const scale = img.offsetWidth / 800;
areas.forEach(area => {
const coords = area.coords.split(',').map(n => Math.round(n * scale));
area.coords = coords.join(',');
});area 不支持 title、aria-label 等无障碍属性？其实支持但有限
<area> 可以加 alt（必须！屏幕阅读器靠它读出区域用途），也能加 title（悬停提示），但部分旧浏览器对 title 渲染不一致。
更关键的是：href 为 # 或空时，<area> 默认不可聚焦、键盘无法触发。若需键盘操作，必须加 tabindex="0"，并用 JS 绑定 Enter/Space 事件模拟跳转。
无障碍最佳实践：
- 每个
<area>都要有语义明确的alt（如alt="进入主卧"，不要alt="链接1"） - 避免
shape="default"（全图热区），它无法被键盘访问，且干扰其他区域 - 如果区域功能复杂（如展开菜单），优先考虑 SVG 或 Canvas 方案，
<area>本质只适合简单导航跳转
实际项目里最容易被忽略的，是图片加载完成前就执行 coords 重算，或者用 naturalWidth 读取尺寸时没等图片 load 完 —— 这会导致缩放比例算错，热区集体漂移。
