HTML 的＜area＞元素

原创已于 2026-06-17 14:03:22 修改 · 385 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#html #前端

于 2026-06-17 14:02:53 首次发布

1. 什么是元素？

<area> 是 HTML 中一个相对特殊但功能强大的元素，它用于定义图像映射（image map）中的可点击区域。简单来说，当你想在一张图片上创建多个不同形状、不同功能的超链接时，就需要用到 <area> 元素。

它本身不会在页面上显示任何内容，而是与 <map> 元素和带有 usemap 属性的 <img> 元素协同工作，共同实现“一张图片，多个链接”的效果。

2. 核心属性详解

<area> 元素拥有多个关键属性，用于定义区域的行为和外观：

2.1 形状与坐标 (`shape`, `coords`)

这两个属性共同决定了可点击区域的形状和大小。

shape: 指定区域形状。
- rect (矩形): 需要四个坐标值。
- circle (圆形): 需要三个坐标值。
- poly (多边形): 需要至少六个坐标值（三组点）。
- default (默认): 定义图片上未被其他区域覆盖的部分。
coords: 提供坐标值，单位是像素。坐标原点 (0,0) 位于图片的左上角。
- shape="rect": coords="x1,y1,x2,y2"。(x1,y1) 是矩形左上角，(x2,y2) 是右下角。
- shape="circle": coords="x,y,radius"。(x,y) 是圆心，radius 是半径。
- shape="poly": coords="x1,y1,x2,y2,x3,y3,..."。按顺序连接各点形成多边形。

2.2 链接与目标 (`href`, `target`, `rel`)

这些属性与 <a> 标签类似，定义了点击区域后的导航行为。

href: 指定区域链接的目标 URL。这是最核心的属性之一。
target: 指定在何处打开链接，常用值有 _blank (新窗口)、_self (当前窗口) 等。
rel: 定义当前文档与目标 URL 的关系，如 nofollow, noopener 等，常用于 SEO 和安全。

2.3 替代文本与提示 (`alt`, `title`)

为了可访问性（Accessibility）和用户体验，必须提供。

alt: 必需属性。为图像区域提供替代文本，当图片无法显示或用户使用屏幕阅读器时，会朗读此文本。这对于视障用户至关重要。
title: 可选属性。提供额外的提示信息，鼠标悬停在区域上时会显示。

3. 基本语法与示例

一个完整的图像映射通常由三部分组成：

一个带有 usemap 属性的 <img> 元素。
一个 <map> 元素，其 name 属性值与 usemap 的值（去掉 #）对应。
一个或多个 <area> 元素作为 <map> 的子元素。

<!DOCTYPE html>
<html>
<head>
    <title>图像映射示例</title>
</head>
<body>
    <!-- 1. 图片关联地图 -->
    <img src="world-map.png" alt="世界地图" usemap="#worldmap">

    <!-- 2. 定义地图 -->
    <map name="worldmap">
        <!-- 3. 定义可点击区域 -->
        <area shape="rect" coords="100,50,200,150" href="europe.html" alt="欧洲地区" title="点击查看欧洲详情">
        <area shape="circle" coords="350,200,50" href="asia.html" alt="亚洲地区" title="点击查看亚洲详情">
        <area shape="poly" coords="500,100,550,150,520,200,480,180" href="africa.html" alt="非洲地区">
        <!-- default 区域 -->
        <area shape="default" href="other-regions.html" alt="其他地区">
    </map>
</body>
</html>

4. 实际应用场景

<area> 元素在现代 Web 开发中依然有其独特的用武之地：

交互式信息图与图表: 在商业报告、数据可视化中，点击图表的不同部分可以跳转到详细分析页面。
产品展示与电商: 展示一件复杂产品（如汽车、电脑）的图片，点击不同部件（发动机、轮胎、屏幕）可以查看该部件的详细介绍或购买链接。
游戏与教育: 用于创建简单的点击式冒险游戏或交互式学习材料，例如点击地图上的国家学习其历史。
旧版网站维护: 许多遗留系统仍然依赖图像映射来实现导航。

5. 注意事项与最佳实践

可访问性优先: 务必为每个 <area> 提供有意义的 alt 文本。考虑为无法使用鼠标的用户提供替代的文本链接。
坐标获取: 手动计算坐标非常繁琐。可以使用在线工具（如 Image Map Generator）或 Photoshop、GIMP 等图像编辑软件来可视化地生成坐标。
响应式设计的挑战: <area> 的坐标是固定像素值，当图片随屏幕缩放时，点击区域会错位。解决方案包括：
- 使用 JavaScript 库（如 rwdImageMaps）动态计算坐标。
- 考虑用 SVG 结合 <a> 标签替代，SVG 天生是矢量且更易于实现复杂的交互区域。
SEO 考量: 虽然搜索引擎可以抓取 <area> 中的链接，但其权重可能不如普通的文本链接。重要的导航链接不建议完全依赖图像映射。
替代方案评估: 对于复杂的交互需求，评估使用 CSS 定位的 <a> 标签、SVG 或 Canvas 是否更合适。