area标签需配合map和usemap使用，单独无效；coords以像素为单位且不随缩放自适应；必须设alt属性保障可访问性；现代项目优先用SVG替代。
area 标签必须配合 map 和 usemap 才能生效
单独写 <area> 不会触发任何点击行为——它只是地图坐标定义，不自带渲染或交互。必须用 map 元素包裹所有 area，再通过 <img usemap="#xxx" alt="HTML area标签实现图片不同区域链接跳转" > 关联，浏览器才识别这些区域为可点击热区。
常见错误是只写了 area 却忘了 map 的 name 和 img 的 usemap 值一致（注意 usemap 值要带 #，而 map name 不带）：
<img src="plan.png" usemap="#floor-map" alt="HTML area标签实现图片不同区域链接跳转" > <map name="floor-map"> <area shape="rect" coords="10,20,100,80" href="/room/a"> <area shape="circle" coords="200,50,30" href="/room/b"> </map>
coords 坐标系以图片左上角为原点，单位是像素
coords 数值不是百分比，也不随图片缩放自动适配。如果用 CSS 缩放了 img（比如 width: 100%），但没重算 coords，点击位置就会偏移甚至完全错位。
- 最稳妥做法：图片用原始尺寸加载，靠容器控制显示大小（如
max-width: 100%+height: auto） - 若必须响应式缩放，需用 JS 动态计算缩放比例，重写
area.coords——但要注意 IE 不支持修改coords属性 -
shape取值只有rect、circle、poly三种：rect要 4 个值（左、上、右、下），circle是圆心 x,y + 半径，poly是连续的 x,y 点对（至少 3 对）
area 不支持 title 或 aria-label 直接透出可访问性信息
虽然可以写 title 属性，但部分屏幕阅读器不会朗读；aria-label 在 area 上兼容性差（尤其旧版 Safari）。真正有效的做法是：
立即学习“前端免费学习笔记（深入）”；
- 给每个
area加alt属性（不是img的那个alt！area自己有alt）——这是 W3C 明确要求的可访问性必备项 - 如果跳转目标语义强（如“进入厨房”），
alt就写这个动作描述，别写“厨房区域” - 避免
alt=""或缺失alt，否则会被屏幕阅读器跳过，也违反 WCAG
示例：
<area shape="rect" coords="50,30,120,90" href="/kitchen" alt="进入厨房">
现代项目中更推荐用 SVG 替代 area + map
SVG 内联后可直接用 <a></a> 包裹 <rect></rect>/<circle></circle>，支持 CSS 伪类、过渡动画、响应式 viewBox、无障碍 role="link" + aria-label，且坐标自动适配缩放。
area 的主要存活场景只剩两个：极简静态页（不想引入额外标签）、或需要兼容 IE9 及更早版本（SVG 链接在 IE9- 中不可点击）。
真要用 area，务必验证三件事：关联是否正确、坐标是否对齐原始尺寸、alt 是否写实——漏掉任意一个，用户就可能点不中，或者根本不知道那里能点。
