跳到主要内容

<area>


HTML <area> 标签

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

<p>点击太阳或其他行星,注意变化:</p>
<img src="/images/planets.gif" width="145" height="126" alt="Planets" usemap="#planet_map">
<map name="planet_map">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="/demo_source/sun.html" hreflang="zh" media="screen and (min-color-index:256)" target="_blank">
<area shape="circle" coords="90,58,3" alt="Mercury" href="/demo_source/mercury.html" hreflang="zh" target="_blank">
<area shape="circle" coords="124,58,8" alt="Venus" href="/demo_source/venus.html" hreflang="zh" target="_blank">
</map>

标签定义及使用说明

<area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。

<area> 元素始终嵌套在 <map> 标签内部。

备注

<img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联,以创建图像与映射之间的关系。


HTML 4.01 与 HTML5之间的差异

HTML5 提供了一些新属性,同时不再支持 HTML 4.01 中的某些属性。


HTML 与 XHTML 之间的差异

在 HTML 中,<area> 标签没有结束标签。

在 XHTML 中,<area> 标签必须正确地关闭。


属性

🆕 :HTML5 中的新属性。

属性描述
alttext规定区域的替代文本。如果使用 href 属性,则该属性是必需的。
coordscoordinates规定区域的坐标。
hrefURL规定区域的目标 URL。
hreflang🆕language_code规定目标 URL 的语言。
media🆕media query规定目标 URL 是为何种媒介/设备优化的。默认:all。
nohrefvalueHTML5 不支持。 规定没有相关链接的区域。
rel🆕alternate author bookmark help license next nofollow noreferrer prefetch prev search tag规定当前文档与目标 URL 之间的关系。
shapedefault rect circle poly规定区域的形状。
target_blank _parent _self _top framename规定在何处打开目标 URL。
type🆕MIME_type规定目标 URL 的 MIME 类型。 注:MIME = Multipurpose Internet Mail Extensions。

全局属性

<area> 标签支持全局属性,查看完整属性表 HTML全局属性


事件属性

<area> 标签支持所有 HTML事件属性


浏览器兼容性

Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
area
accesskey
Deprecated
alt
coords
download
href
hreflang
Deprecated
target="_blank" implies rel="noopener" behavior
media
name
Deprecated
nohref
Deprecated
ping
referrerpolicy
rel
rel.noopener
rel.noreferrer
shape
tabindex
Deprecated
target
type
Deprecated