HTML <area> 元素

HTML <area> 元素定义图像上的热点区域，并且可选地将其与超文本链接相关联。该元素仅在 <map> 元素中使用。

带有可点击区域的图像映射：

<img src="/examples/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="/examples/sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="/examples/mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

尝试一下 »

特性

内容类别	流式内容，短语内容。
允许的内容	无，它是一个空元素。
标签省略	必须有开始标签，不能有结束标签。
允许的父元素	任何接受短语内容的元素。<area>元素必须有一个祖先是 <map>，但不一定是直接的父类。
允许的 ARIA 角色	无
DOM 接口	HTMLAreaElement

属性

该元素包含了全局属性。

accesskey

仅限 HTML 4，已过时 Gecko 5.0

指定元素的键盘导航快捷键。按住 ALT 或与指定字符相关联的类似键，可以选中与该键相关的表单控件。页面设计者应预先注意避免使用已经绑定到浏览器的快捷键。这个属性是 HTML5 以来的全局属性。

alt

一个文本字符串，在不显示图像的浏览器上显示。该文本应该与图片表达是同一个意思。在 HTML4 中，该属性是必需的，但可以是空字符串（""）。在 HTML5 中，仅当使用 href 属性时，该属性才是必需的。

coords

一组指定热点区域坐标的值。它的值可以是 circle，default，polygon 或 rect。coords 属性的格式取决于形状的值。

• 对于圆（circle），该值是 x,y,r，其中 x 和 y 为圆心像素坐标，r 是像素值半径。
• 对于矩形（rect），coords 属性的值应该是 x,y,w,h。其中 x,y 值定义的矩形的左上角的位置，而 w 和 h 分别定义宽度和高度。
• 对于多边形形状（polygon）的值需要 x1,y1,x2,y2,... 的值来定义coords。每对 x,y 定义多边形的一个点，连续点由直线接合和，最后一个点连接到第一个点。
• 形状的默认值是指整个封闭的区域，通常是一张图像。

在 HTML4 中，该值是像素或百分比数（如果附加了百分号％）；在 HTML5 中，值是 CSS 像素。

download

HTML5

该属性（如果存在）表示开发者打算将超链接用于下载资源。有关 download 属性的完整说明，请参阅 <a> 元素。

href

该区域的超链接目标。它的值是一个有效的 URL。在 HTML4 中，该属性或 nohref 属性必须存在于元素中。在 HTML5 中，可以省略此属性；如果省略了，则该区域元素不表示超链接。

hreflang

HTML5

指示链接资源的语言。允许的值由 BCP47确定。仅当存在 **href ** 属性时才使用此属性。

name

仅限 HTML 4，已过时 Gecko 5.0

定义可点击区域的名称，以便它可以在旧版浏览器中可以通过脚本控制。

media

HTML5

链接资源的媒体提示，例如 print and screen。如果省略，则默认为 all。仅当存在** href** 属性时才使用此属性。

nohref

仅限 HTML 4，已过时 Gecko 5.0

表示相关区域不存在超链接。在 HTML4中，该属性或 href 属性必须存在于元素中。

使用说明： 此属性在 HTML5 中已过时，直接忽略 href 属性就可以了。

referrerpolicy

实验性

一个字符串，指示在获取资源时使用哪种 Referrer 头：

• no-referrer：将不发送 Referer 头。
• no-referrer-when-downgrade：如果图片的源站不是 TLS（HTTPS）时，不会发送 Referer 头。如果没有指定任何策略，则这是用户代理的默认行为。
• origin：Referer 头会包括页面的协议、主机和端口。
• origin-when-cross-origin：导航到其他源时，将限制所包含数据只有协议，主机和端口，而导航到相同的源将包含来源者的完整路径。
  同时从相同的起点导航将包括引荐来源的完整路径。
• unsafe-url：Referer 头将包含源站和路径，但不包括片段（fragment），密码或用户名。这种情况是不安全的，因为它可能会将受 TLS 保护的资源中的源和路径，泄露到不安全的源。

rel

HTML5

对于包含 href 属性的锚点，此属性指定目标对象与链接对象的关系。该值是空格分隔的链接类型。这些类型值及其语义被某些权威机构注册，这对于文档作者来说可能是有意义的。如果没有给出关系，则默认关系为空。仅当存在 href 属性时才使用此属性。

shape

相关热点的形状。 在 HTML 5 和 HTML 4 的规范中，可选值有：

• rect，它定义了一个矩形区域；
• circle，它定义一个圆形区域；
• circle，它定义一个多边形;
• default，它表示整个区域不属于上面已定义的形状。

许多浏览器，特别是 Internet Explorer 4 及更高版本，支持circ，polygon 和 rectangle 作为 shape 的有效值；这些值是 。

tabindex

仅限 HTML 4，已过时 Gecko 5.0

该定义区域在浏览器中 tab 切换顺序的数值。这个属性在 HTML5 中是全局的。

target

此属性指定显示链接资源的位置。在 HTML4 中，可以是一个框架的名称或一个关键字。在 HTML5 中，它是 浏览上下文（例如，选项卡，窗口或内联框架）的名称或关键字。以下关键字有特殊含义：

• _self: 将 URL 加载到与当前 URL 相同的浏览上下文中。这是默认行为。
• _blank: 将 URL 加载到新的浏览上下文中。这通常是一个选项卡，但用户可以配置浏览器来使用新窗口打开。
• _parent: 将 URL 加载到当前的父级浏览上下文中。如果没有父级，那么它的行为方式与 _self 相同。
• _top: 将 URL 加载到顶级浏览上下文中（即当前流量上下文的“最上级”的浏览上下文，并且没有父级)。如果没有父级，那么它的行为方式与 _self 相同。

仅当存在 href 属性时才使用此属性。

type

已过时 Gecko 5.1

该属性表示链接目标在 MIME 类型中的媒体类型。一般来说，它仅提供建议。然而，未来浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为 audio/wav 时，浏览器可能会添加一个小扬声器图标。有关已识别 MIME 类型的完整列表，请参阅 https://www.w3.org/TR/html4/references.html#ref-MIMETYPES，仅当存在 href 属性时才使用此属性。

事件属性

<area> 元素支持 HTML 的事件属性。

注意

根据 HTML 3.2，4.0 和 5 规范，禁止使用关闭标签 </area> 。

XHTML 1.0 规范需要一个尾部斜线： <area /> 。

id，class 和 style 属性在 HTML 4 规范中定义的核心属性具有相同的含义，但只有 Netscape 和 Microsoft 定义它们。

Netscape 1 级浏览器不识别 target 属性，因为它与框架（frames）相关。

HTML 3.2 只定义了 alt，coords，href，nohref，and shape。

HTML 5.1 将该标签的 type 属性定义 为已过时。

规范

规范	状态	备注
Referrer Policy referrerpolicy attribute 的定义	编者的草案	增加了 referrerpolicy 属性。
HTML Living Standard <area> 的定义	现行的标准	-
HTML5 <area> 的定义	推荐	-
HTML 4.01 Specification <area> 的定义	推荐	-

桌面浏览器兼容性

移动浏览器兼容性