HTML | 目标属性

概述

在 HTML 中，<area> 元素定义图像映射中的可点击区域。它通常与 <map> 元素一起使用。当用户点击 <area> 元素中定义的区域时，将执行其 href 属性指定的链接。

<area> 元素有一个可选的 target 属性，它指定用户点击链接时在哪个窗口或框架中打开目标 URL。

语法

<area shape="shape" coords="coordinates" href="URL" target="target">

• shape：指定 <area> 元素定义的可点击区域的形状，可以是 rect（矩形）、circle（圆形）或 poly（多边形）。
• coords：指定 <area> 元素定义的可点击区域的坐标信息，格式取决于 shape 属性的值。例如，对于 rect 形状，coords 格式为 x1,y1,x2,y2，其中 (x1, y1) 和 (x2, y2) 分别是矩形左上角和右下角点的坐标值。
• href：指定用户点击链接时应导航到的 URL。
• target：可选属性，指定用户点击链接时在哪个窗口或框架中打开目标 URL。它的值可以是 _self（默认，在当前窗口中打开）、_blank（在新窗口中打开）等。

示例代码

<img src="images/worldmap.png" usemap="#worldmap">

<map name="worldmap">
  <area shape="rect" coords="0,0,50,50" href="https://www.google.com" target="_blank">
  <area shape="circle" coords="150,150,50" href="https://www.bing.com" target="_blank">
  <area shape="poly" coords="300,200,400,100,500,200,400,300" href="https://www.yahoo.com" target="_blank">
</map>

上述示例代码中，我们首先在 HTML 中插入一张包含世界地图的图片，并为该图片定义了一个 <map> 元素，以便为其定义多个 <area> 元素。

每个 <area> 元素分别定义了一个可点击区域，并将其与一个 URL 链接以及一个 target 属性绑定。在用户点击可点击区域时，将根据链接和目标属性相应地打开相应的 URL。