HTML area标签 HTMLarea标签|HTML5

本文概述

描述
什么是影像图
属性
支持的浏览器

描述 < area> 标记定义图像映射中与超链接关联的可单击区域或活动区域。如果单击这些区域, 它将执行一些操作, 例如打开新图像, 新URL等。此标记始终与< map> 元素一起使用。
在图像地图内部, 可以使用单个< map> 元素中的多个< area> 元素将不同区域超链接到各个位置。
< area> 元素由（必需）属性shape和coords定义。 shape属性指定区域的形状, 例如矩形, 圆形, 正方形和多边形。 coords属性定义图像内部区域的坐标。
什么是影像图图像地图被定义为具有活动区域的图形图像, 因此, 当用户单击这些区域时, 它可以链接到不同的目的地。要定义图像地图, 我们需要满足以下条件：

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

句法

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

【HTML area标签】以下是有关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="http://www.srcmini.com/image1.png" usemap="#web"> < map name="web"> < area shape="rect" coords="66, 117, 131, 168" href="https://www.srcmini.com/html-tutorial"> < area shape="rect" coords="199, 36, 277, 85" href="https://www.srcmini.com/css-tutorial"> < area shape="rect" coords="330, 107, 406, 159" href="https://www.srcmini.com/bootstrap-tutorial"> < area shape="rect" coords="199, 185, 267, 236" href="https://www.srcmini.com/javascript-tutorial"> < /map> < /body> < /html>

立即测试

文章图片
属性特定于标签的属性：

属性	值	描述
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不支持）