HTML <area> 标签-代码号

HTML <area> 标签详解教程

HTML <area> 标签是图像映射技术中的核心元素，用于定义图像上的可点击区域。这些区域可以与超链接关联，用户点击后会执行相应操作，如跳转到指定页面或显示详细信息。<area> 标签必须嵌套在 <map> 容器标签内使用，是创建交互式图像的重要工具。

基本语法

<map name="映射名称">
  <area shape="形状类型" coords="坐标值" href="链接地址" alt="替代文本">
  <!-- 可添加多个area元素 -->
</map>
<img src="图像源" usemap="#映射名称" alt="图像描述">

形状类型与坐标系统

矩形区域 (rect)

使用左上角和右下角坐标定义矩形区域：

<area shape="rect" coords="x1,y1,x2,y2" href="URL" alt="描述">

x1,y1：矩形左上角坐标
x2,y2：矩形右下角坐标

圆形区域 (circle)

使用圆心坐标和半径定义圆形区域：

<area shape="circle" coords="x,y,半径" href="URL" alt="描述">

x,y：圆心坐标
半径：圆形区域的半径值

多边形区域 (poly)

使用多个顶点坐标定义多边形区域：

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="URL" alt="描述">

每个x,y对代表多边形的一个顶点

完整示例

示例1：学习平台导航图

<!DOCTYPE html>
<html>
<head>
    <title>代码号学习平台导航</title>
</head>
<body>
    <h2>代码号学习平台功能区域</h2>
    <p>点击不同区域了解详情：</p>
    
    <img src="https://www.ebingou.cn/biancheng/images/2.jpg" alt="学习平台功能图" usemap="#learningMap" width="500" height="300">
    
    <map name="learningMap">
        <area shape="rect" coords="50,50,150,120" href="https://www.ebingou.cn/jiaocheng/" alt="教程中心">
        <area shape="rect" coords="180,50,280,120" href="https://www.ebingou.cn/biancheng/" alt="编程实践">
        <area shape="rect" coords="310,50,410,120" href="https://www.ebingou.cn/yuanma/" alt="源码下载">
        <area shape="circle" coords="250,200,40" href="https://www.ebingou.cn/" alt="首页">
    </map>
</body>
</html>

示例2：计算机知识学习图

<!DOCTYPE html>
<html>
<head>
    <title>计算机组成学习</title>
</head>
<body>
    <h2>计算机硬件组成交互图</h2>
    <p>点击各个组件学习相关知识：</p>
    
    <img src="https://www.ebingou.cn/biancheng/images/4.jpg" alt="计算机硬件组成" usemap="#computerMap" width="600" height="400">
    
    <map name="computerMap">
        <area shape="rect" coords="50,80,150,150" href="/cpu-tutorial" alt="中央处理器教程">
        <area shape="rect" coords="180,80,280,150" href="/ram-tutorial" alt="内存教程">
        <area shape="rect" coords="310,80,410,150" href="/hdd-tutorial" alt="硬盘教程">
        <area shape="circle" coords="230,250,50" href="/motherboard-tutorial" alt="主板教程">
        <area shape="poly" coords="400,200,450,250,400,300,350,250" href="/gpu-tutorial" alt="显卡教程">
    </map>
</body>
</html>

属性详解

必需属性

alt：为可点击区域提供替代文本，提高可访问性
coords：定义可点击区域的坐标，格式取决于shape属性
shape：定义区域形状，可选值：rect、circle、poly、default

常用可选属性

href：指定区域点击后跳转的URL
target：指定链接打开方式（_blank、_self、_parent、_top）
download：指定下载文件名（当href指向可下载资源时）
rel：定义当前文档与链接文档的关系

HTML5新增属性

media：指定目标URL为何种媒体/设备优化
hreflang：指定目标URL的语言
type：指定目标URL的MIME类型

本节课程知识要点

<area> 标签必须嵌套在 <map> 标签内使用
坐标系统以图像左上角为原点(0,0)
多种形状支持：矩形(rect)、圆形(circle)和多边形(poly)
区域可以重叠，HTML代码中先定义的区域优先级更高
必须提供alt属性确保可访问性

实际应用技巧

坐标获取方法

使用图像编辑软件（如Photoshop）查看坐标
使用在线图像映射坐标生成工具
编写JavaScript代码动态获取点击位置

响应式考虑

<script>
// 基本响应式处理示例
window.addEventListener('resize', function() {
  // 根据容器大小调整坐标值
  // 需要预先存储原始坐标和原始图像尺寸
});
</script>

浏览器兼容性

<area> 标签被所有主流浏览器支持，包括：

Chrome
Firefox
Safari
Edge
Opera

注意事项

确保坐标值准确，避免区域错位
为每个可点击区域提供有意义的alt文本
在移动设备上测试交互体验
考虑为无法显示图像的用户提供替代内容
定期检查链接有效性，避免出现死链

<area> 标签是创建图像映射的关键元素，能够将普通图像转换为交互式导航工具。通过本教程的学习，您应该已经掌握了使用 <area> 标签创建各种形状可点击区域的方法，以及相关属性的正确用法。在实际项目中合理运用图像映射技术，可以显著提升用户体验和页面交互性。

本文标签：

HTML <area> 标签