在HTML中，<area> 是一个相对特殊但实用的标签，主要用于图像映射（Image Maps），允许将一个图片的特定区域定义为可点击的热区（超链接）。以下是详细说明和用法示例：
1. <area> 核心属性
| 属性 | 作用 |
|---|---|
shape |
定义热区形状：rect（矩形）、circle（圆形）、poly（多边形）、default（整个图像） |
coords |
定义热区坐标（格式随 shape 变化） |
href |
点击后跳转的URL |
alt |
替代文本（无障碍访问必需） |
target |
指定打开方式（如 _blank 新标签页） |
2. 使用示例
场景：在一张世界地图上标记可点击国家
<img src="world-map.jpg" alt="世界地图" usemap="#map-world"><map name="map-world"><!-- 矩形区域 (x1,y1,x2,y2) --><area shape="rect" coords="100,50,200,150" href="usa.html" alt="美国"><!-- 圆形区域 (圆心x,圆心y,半径) --><area shape="circle" coords="300,200,50" href="japan.html" alt="日本"><!-- 多边形区域 (x1,y1,x2,y2,...,xn,yn) --><area shape="poly" coords="400,100,450,150,420,200" href="uk.html" alt="英国"></map>
3. <area> + SVG （现代替代方案）
传统 <area> 的坐标计算较麻烦，现代开发更推荐用 SVG + <a>：
<svg viewBox=0_0_500_300><a href=usa.html><rect x=100 y=50 width=100 height=100></a><a href=japan.html><circle cx=300 cy=200 r=50></a></svg>
优势：矢量缩放不失真、坐标易调试、支持CSS动画。
4. JavaScript增强交互
通过监听事件动态修改热区行为：
document.querySelector('area').addEventListener('click', (e) => {e.preventDefault();console.log('点击了热区！');});
5. SEO与无障碍提示
- 必加
alt：确保屏幕阅读器能识别热区用途。 - 移动端适配：触屏设备可能需要放大热区或改用SVG方案。
如果需要生成复杂坐标，可用工具如 Online Image Map Editor 。
内容由零声教学AI助手提供，问题来源于学员提问
