area

<area>

HTML<area> 元素 在图片上定义一个热点区域,可以关联一个超链接。<area>元素仅在<map>元素内部使用。

内容分类流内容, 短语内容.
允许的内容None, it is an empty element.
标签省略Must have a start tag and must not have an end tag.
允许的父元素Any element that accepts phrasing content. The <area> element must have an ancestor <map>, but it need not be a direct parent.
Permitted ARIA rolesNone
DOM 接口HTMLAreaElement

属性

钙元素包括全局属性。

accesskeyHTML 4only,已废弃 Gecko 5.0为元素指定一个获取焦点的快捷键。在与指定字符关联的情况下,按ALT或类似键选择与该键序列相关联的表单控件。页面设计人员避免使用已经绑定到浏览器的快捷键。这个属性自HTML5以来是全局性的。

Usage note: 此属性在html5中是废弃的,而忽略href属性就足够了。

referrerpolicy一个字符串,指示在获取资源时使用哪个引用者:

  • "no-referrer"这意味着Referer:头不会被发送。

  • no-referrer-when-downgrade”表示Referer:当导航到没有TLS(HTTPS)的原点时,不会发送标题。如果没有指定策略,这是用户代理的默认行为。

  • "origin" 这意味着引用者将成为页面的来源,即大致的方案,主机和端口。

  • “起源 - 交叉起源”意味着到其他起源的导航将限制在该方案,主机和端口,同一来源的导航将包括引用者的路径。

  • "unsafe-url"这意味着引用者将包括来源和路径(但不包括片段,密码或用户名)。这种情况是不安全的,因为它可以将来自TLS保护的资源的起点和路径泄漏到不安全的起点。

relHTML5对于包含href属性的锚点,此属性指定目标对象与链接对象的关系。该值是链接类型值的逗号分隔列表。值和它们的语义将由某个权威机构注册,这对文档作者可能有意义。默认的关系,如果没有给出,是无效的。只有当href属性存在时才使用此属性。

  • _self: 在当前区域加载链接指向的资源. 这个是默认值.

  • _blank: 在新的未命名的窗口或者tab里加载超链接资源.

  • _parent: 在父级加载超链接资源. HTML4里, 是当前frame的父级, HTML5里是当前的浏览器上下文, 如果当前环境没有父级, 行为和_self一样.

  • _top: HTML4里: 将响应加载到完整的原始窗口中,取消所有其他帧。在HTML5中:将响应加载到顶级浏览上下文(也就是说,浏览上下文是当前版本的祖先,并且没有父类)。如果没有父类,这个选项的行为方式与self相同

本属性只能在指明href属性之后使用.

示例

<map name="primary"> <area shape="circle" coords="75,75,75" href="left.html" alt="Click to go Left"> <area shape="circle" coords="275,75,75" href="right.html" alt="Click to go Right"> </map> <img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">

Live Example

注意事项

HTML 3.2, 4.0, 和HTML 5 规范中, 不允许有 </area> 单闭合标签.

XHTML 1.0 规范要求有尾部的斜线:<area />.

id,class, 和style属性和其他的HTML4属性一样, 但是只有Netscape和Microsoft定义了这些属性.

Netscape 1–level 浏览器不能解析target 链接到frames的属性.

HTML 3.2 只定义了alt,coords,href,nohref, 和shape.

HTML 5.1 定义了这个标签上的属性类型

规范

规范状态评论
引用者策略该规范中“引用策略属性”的定义。编辑草稿增加了referrerpolicy属性。
WHATWG HTML生活标准该规范中'<area>'的定义。生活水平
HTML5该规范中'<area>'的定义。建议
HTML 4.01规范该规范中'<area>'的定义。建议

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)
referrerpolicy51No support50 (50)No supportNo supportNo support

FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari MobileChrome for Android
Basic support?(Yes)(Yes)?????(Yes)
referrerpolicyNo supportNo supportNo support50.0 (50)No supportNo supportNo supportNo supportNo support