HTML 中的 <map> 标签是一种用于制作交互式图片地图的元素。图片地图是一种将图片分割成多个区域，并在每个区域内添加超链接或 JavaScript 事件来实现交互功能的技术。
<map> 标签通常和 <area> 标签一同使用，其中 <area> 标签定义了图片所分割成的可交互区域的形状和位置以及该区域被点击时所触发的事件。通过使用 <map> 和 <area> 标签，我们可以在图片上设置不同的交互区域，实现多种交互效果，例如：点击跳转到其他页面、展示信息提示框、播放视频音乐等等。
下面是一个例子，演示如何使用 <map> 和 <area> 标签创建一个简单的图片地图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<img src="world-map.jpg" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="circle" coords="300,150,30" href="https://en.wikipedia.org/wiki/Paris" target="_blank">
<area shape="rect" coords="100,200,200,300" href="https://en.wikipedia.org/wiki/New_York_City" target="_blank">
<area shape="poly" coords="400,350,450,300,500,400" href="https://en.wikipedia.org/wiki/Tokyo" target="_blank">
</map>
</body>
</html>
在这个例子中，我们使用 <img> 标签来展示一张地图图片，并通过 usemap 属性指定了使用哪个 <map> 标签来定义图片地图。 <map> 标签内部包含三个 <area> 标签，分别定义了巴黎、纽约和东京三个城市的位置，并设置了不同的形状和坐标信息。
其中，第一个 <area> 标签设置了圆形形状 (shape="circle") 和坐标信息 (coords="300,150,30")，表示巴黎城市所在的位置，点击该区域将跳转到维基百科页面。第二个和第三个 <area> 标签分别设置了矩形和多边形形状，并设置了相应的坐标信息和链接地址，用于展示纽约和东京两个城市的位置和相关信息。
需要注意的是，每个 <area> 标签的 href 属性必须设置为一个有效的 URL 地址，以便用户点击时能够跳转到指定的页面或资源。此外，target 属性可以设置链接的打开方式，例如 _blank 表示在新窗口中打开链接。
总之，<map> 和 <area> 标签是制作交互式图片地图的重要元素，在网页设计和开发中具有广泛的应用价值。通过熟练掌握这些标签的使用方法，我们可以为用户提供更加丰富、直观和友好的界面交互体验。
