HTML area 标签

htmlweb developmentfront end technology更新于 2025/3/20 9:48:17

HTML 中的 area 标签用于在图像映射中设置区域。

以下是属性 −

属性	值	描述
alt	text	指定该区域的替代文本。
coords	if shape = "rect" then coords = "left, top, right, bottom" if shape = "circ" then coords = "centerx, centery, radius" if shape = "poly" then coords = "x1, y1, x2, y2,..,xn, yn"	指定适合形状属性的坐标来定义图像映射的图像区域。
download	filename	指定当用户点击超链接时下载目标。
href	URL	指定页面的 URL 或链接指向的锚点的名称。
hreflang	language_code	指定目标 URL 的语言。
media	media query	指定目标 URL 经过优化的媒体/设备for.
nohref	true/false	从图像映射中排除某个区域
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	指定当前文档与目标 URL 之间的关系
shape	rect rectangle circ circle poly polygon	指定图像映射的形状
target	_blank _parent _self _top	在哪里打开目标 URL。 _blank − 目标 URL 将在新窗口中打开 _self − 目标 URL 将在与点击时相同的框架中打开 _parent − 目标 URL 将在父框架集中打开 _top −目标 URL 将在窗口的完整主体中打开
type	mime_type	指定目标 URL 的 MIME(多用途互联网邮件扩展)类型。

Let us now see an example to implement the <area> tag −

示例

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
      href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
      href = "/html/index.htm" target = "_blank" />
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
      href = "/php/index.htm" target = "_blank" />
</map>
</body>
</html>