- 您好！欢迎来到鲲鹏知舟
HTML <area> 标签
描述：
<area> 标签定义了图像映射中与超链接相关联的可点击区域或活动区域。如果您单击这些区域，它将执行一些操作，例如打开新图像、新 URL 等。此标记始终与 <map> 元素一起使用。
在图像地图中，可以使用单个 <map> 元素中的多个 <area> 元素将不同区域超链接到不同位置。
<area> 元素使用（必需的）属性shape和coords 定义。shape 属性指定区域的形状，例如矩形、圆形、正方形和多边形。coords 属性定义图像内区域的坐标。
什么是图像映射
图像地图被定义为具有活动区域的图形图像，以便当用户单击这些区域时，它可以链接到不同的目的地。要定义图像映射，我们需要以下内容：
一个带有usemap属性的 HTML <img> 元素，它定义了一个有效的地图名称。
具有name属性的HTML <map> 元素，其值必须与usemap相同
<map> 元素中的一个或多个 <area> 元素，用于在图像映射中创建可点击区域。
句法
<area shape="" coords="" href="">
以下是关于 HTML <area> 标签的一些规范
| 展示 | 堵塞 |
| 开始标签/结束标签 | 仅开始标签（禁止结束标签） |
| 用法 | 图像映射 |
例子
<!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.rocschool.com/tutorial/html-tutorial";>
<area shape="rect" coords="199,36,277,85" href="https://www.rocschool.com/tutorial/css-tutorial";>
<area shape="rect" coords="330,107,406,159" href="https://www.rocschool.com/tutorial/bootstrap-tutorial";>
<area shape="rect" coords="199,185,267,236" href="https://www.rocschool.com/tutorial/javascript-tutorial";>
</map>
</body>
</html>
属性：
特定于标签的属性：
| 属性 | 价值 | 描述 |
|---|---|---|
| alt | text | 如果浏览器不显示图像，则显示在浏览器上的替代文本字符串。 |
| coords | x1,y1,x2,y2(rect) | 定义矩形左上角和右下角的坐标。 |
| x,y, radius（圆） | 定义圆的坐标。 | |
| 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 | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | 它定义了当前文档和链接文档之间的关系。 |
| hreflang | language_code | 它指定链接资源的语言。 |
| type | media_type | 它指定链接源的 MIME 类型。（HTML5 不支持） |
全局属性：
<area> 标签支持 HTML 中的全局属性
事件属性：
<area> 标签支持 HTML 中的事件属性。
支持浏览器
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <area> | Yes | Yes | Yes | Yes | Yes |
-
使用社交账号登录,本站支持
全部评论(0)