以下是 <area> 标签的基本语法：
<map name="mapname">
<area shape="shape" coords="coordinates" href="URL">
</map>
<img src="image.jpg" usemap="#mapname" alt="Description">
其中：
- <map> 标签定义图像映射，使用 name 属性指定一个唯一的名称。
- <area> 标签定义图像映射区域，使用以下属性：
- shape：定义区域的形状，可以是 "rect"（矩形）、"circle"（圆形）、"poly"（多边形）。
- coords：定义区域的坐标，具体格式取决于形状。对于矩形，格式为 "x1,y1,x2,y2"；对于圆形，格式为 "x,y,r"；对于多边形，格式为 "x1,y1,x2,y2,x3,y3,..."。
- href：定义区域被点击时的目标链接。
- <img> 标签用于显示图像，使用 usemap 属性指定与之关联的图像映射。
以下是一个具体的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Map Example</title>
</head>
<body>
<img src="worldmap.jpg" usemap="#worldmap" alt="World Map">
<map name="worldmap">
<area shape="rect" coords="0,0,200,100" href="north.html" alt="North America">
<area shape="rect" coords="200,0,400,100" href="europe.html" alt="Europe">
<!-- Additional areas... -->
</map>
</body>
</html>
在这个例子中，图像被分为两个矩形区域，每个区域定义了不同的链接目标。当用户点击图像的特定区域时，浏览器会将用户导航到相应的链接目标。
转载请注明出处：http://www.pingtaimeng.com/article/detail/3690/HTML5