HTML 中的 <area>属性

首页 / HTML入门教程 / HTML 中的 <area>属性

HTML<area>标签用于定义图像映射中的区域。

area 示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML area Tag</title>
   </head>

   <body>
      <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>

这将产生以下结果-

全局属性

此标签支持 HTML 的全局属性。

特定属性

HTML<area>标签还支持以下附加属性-

Attribute Value 描述
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"

指定适合shape属性的坐标,以定义图像映射的图像区域。
downloadhtml-5 filename 指定当用户单击超链接时下载目标。
href URL 指定页面的URL或链接指向的锚点的名称。
hreflang html-5 language_code 指定目标URL的语言。
media html-5 media query 指定目标URL针对其优化的媒体/设备。
nohref true/false 从图像地图中排除区域
rel html-5 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 -  新窗口打开

_parent - 父窗口打开

无涯教程网

_self - 当前窗口打开

_top - 整个窗口打开

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-area-tag.html

来源:LearnFk无涯教程网

type html-5 mime_type 指定目标URL的MIME类型。

事件属性

此标签支持 HTML 的事件属性。

浏览器支持

Chrome Firefox IE Opera Safari Android
Yes Yes Yes Yes Yes Yes

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

技术与商业案例解读 -〔徐飞〕

小马哥讲Spring核心编程思想 -〔小马哥〕

软件设计之美 -〔郑晔〕

Spark性能调优实战 -〔吴磊〕

React Hooks 核心原理与实战 -〔王沛〕

超级访谈:对话张雪峰 -〔张雪峰〕

郭东白的架构课 -〔郭东白〕

中间件核心技术与实战 -〔丁威〕

超级访谈:对话毕玄 -〔毕玄〕

好记忆不如烂笔头。留下您的足迹吧 :)