<area>: 图像区域标签
最后更新：2026-10-13
<area>图像区域标签
在 <map> 内部定义图像映射中的一个可点击区域（矩形、圆形或多边形），每个 area 指定形状、坐标与跳转链接。
| 分类 | 链接与媒体 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 自闭合 — 无需闭合标签 |
| 状态 | 标准 |
📝 语法
<area shape="rect" coords="0,0,82,126" href="sun.html" alt="太阳">⚙️ 属性
该元素支持全局属性及以下专有属性：
| 属性 | 值 | 描述 |
|---|---|---|
shape | 区域形状：default、rect（矩形）、circle（圆形）、poly（多边形）。 | |
coords | 与 shape 对应的坐标，像素值，多个用逗号分隔。 | |
href | 点击区域后跳转的地址。 | |
alt | 区域的替代文字（无障碍必填）。 | |
target | 链接打开方式，如 _blank。 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <area> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： area 是空元素（无闭合标签）；必须放在 <map> 内，并由 <img> 的 usemap 关联。
❓ 常见问题
Qarea 标签是做什么用的？
A
<area> 在 <map> 内定义图片的「可点击热区」：通过 shape（rect/circle/poly）和 coords 坐标圈出区域，点击跳转到 href 链接。经典场景：地图分区导航、仪器面板图交互。Qarea 的 coords 坐标怎么计算？
A坐标基于图片左上角 (0,0) 的像素值：
rect 给左上角和右下角两组 x,y；circle 给圆心 x,y 加半径；poly 给一系列顶点坐标。设计稿量出来直接填，图片缩放时热区不会自动跟随（需 JS 或 srcset 方案配合）。Qarea 必须写 alt 吗？
A必须（有 href 时）。
<area> 是链接，alt 就是它的「链接文字」，屏幕阅读器靠它朗读热区用途。缺失 alt 的图片热区对视障用户是完全不可用的死区。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
