area标签需配合map和usemap使用，单独无效；coords以像素为单位且不随缩放自适应；必须设alt属性保障可访问性；现代项目优先用SVG替代。

area 标签必须配合 map 和 usemap 才能生效

单独写 不会触发任何点击行为——它只是地图坐标定义，不自带渲染或交互。必须用 map 元素包裹所有 area，再通过 关联，浏览器才识别这些区域为可点击热区。

常见错误是只写了 area 却忘了 map 的 name 和 img 的 usemap 值一致（注意 usemap 值要带 #，而 map name 不带）：

@@##@@
<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

示例：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

<area shape="rect" coords="50,30,120,90" href="/kitchen" alt="进入厨房">

现代项目中更推荐用 SVG 替代 area + map

SVG 内联后可直接用 包裹 /，支持 CSS 伪类、过渡动画、响应式 viewBox、无障碍 role="link" + aria-label，且坐标自动适配缩放。

area 的主要存活场景只剩两个：极简静态页（不想引入额外标签）、或需要兼容 IE9 及更早版本（SVG 链接在 IE9- 中不可点击）。

真要用 area，务必验证三件事：关联是否正确、坐标是否对齐原始尺寸、alt 是否写实——漏掉任意一个，用户就可能点不中，或者根本不知道那里能点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！