HTML area标签

本文概述

描述

<area>标记定义图像映射中与超链接关联的可单击区域或活动区域。如果单击这些区域, 它将执行一些操作, 例如打开新图像, 新URL等。此标记始终与<map>元素一起使用。

在图像地图内部, 可以使用单个<map>元素中的多个<area>元素将不同区域超链接到各个位置。

<area>元素由(必需)属性shape和coords定义。 shape属性指定区域的形状, 例如矩形, 圆形, 正方形和多边形。 coords属性定义图像内部区域的坐标。

什么是影像图

图像地图被定义为具有活动区域的图形图像, 因此, 当用户单击这些区域时, 它可以链接到不同的目的地。要定义图像地图, 我们需要满足以下条件:

  • 具有usemap属性的HTML <img>元素, 用于定义有效的地图名称。
  • 具有名称属性的HTML <map>元素, 其值必须与usemap相同
  • <map>元素内的一个或多个<area>元素可在图像映射中创建可点击区域。

句法

<area shape="" coords="" href="">

以下是有关HTML <area>标记的一些规范

Display Block
开始日期/结束日期 Only start tag(End tag forbidden)
Usage 影像图

<!DOCTYPE html>
<html>
 <head>
<title>HTML Area tag</title>
<style>
  body{
  margin-left: 250px;}
</style>
  </head>
 <body>
 <h2>Example of HTML Area tag</h2>
<img src="image1.png" usemap="#web">
<map name="web">
<area shape="rect" coords="66, 117, 131, 168" href="https://www.srcmini02.com/html-tutorial">
<area shape="rect" coords="199, 36, 277, 85" href="https://www.srcmini02.com/css-tutorial">
<area shape="rect" coords="330, 107, 406, 159" href="https://www.srcmini02.com/bootstrap-tutorial">
<area shape="rect" coords="199, 185, 267, 236" href="https://www.srcmini02.com/javascript-tutorial">
 </map>
 </body>
</html>

立即测试

HTML area标签

属性

特定于标签的属性:

属性 描述
alt text 如果不显示图像, 则在浏览器上显示的替代文本String。
coords x1, y1, x2, y2(矩形) 定义矩形左上角和右下角的坐标。
x, y, 半径(圆) 定义圆的坐标。
x1, y1, x2, y2, x3, y3, ..(多边形) 定义多边形顶点。
href href URL它确定活动区域的超链接目标。
target _blank 在新窗口中打开链接
_parent 在父框架中打开链接
_self 在当前窗口中打开链接
_top 在同一窗口中以全宽打开链接
frame_name 在框架中。 (HTML5不支持)
shape default 它定义了默认区域(矩形)。
rect 它定义了矩形区域。
circle 定义圆形区域。
poly 定义多边形。
download filename 定义用于下载资源的超链接。
rel 备用作者书签帮助许可证下一个nofollow noreferrer预取prev搜索标签 它定义了当前文档和链接文档之间的关系。
hreflang language_code 它指定链接资源的语言。
type media_type 它指定链接源的MIME类型。(HTML5不支持)

全局属性:

<area>标记支持HTML中的全局属性

事件属性:

<area>标记支持HTML中的事件属性。

支持的浏览器

Element Chrome IE Firefox Opera Safari
<area> Yes Yes Yes Yes Yes
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?