HTML <area> 标签

实例

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

<img src="/image/workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="/static_html/computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="/static_html/phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="/static_html/coffee.htm">
</map>
运行 »

定义和用法

<area>标签定义图像映射内的区域(图像映射是具有可点击区域的图像).

<area>元素始终嵌套在<map>标记内.

注意: <img> 标记中的usemap属性与 <map> 元素的name属性相关联,并在图像和地图之间创建关系.


浏览器支持

Element
<area> Yes Yes Yes Yes Yes

HTML 4.01和HTML5之间的差异

HTML5具有一些新属性,并且不再支持某些HTML 4.01属性.


HTML和XHTML之间的差异

在HTML中 <area> 标签没有结束标记.

在XHTML中必须正确关闭 <area> 标记.



属性

= HTML5中的新功能.

Attribute Value Description
alt text 规定区域的替代文本。如果使用 href 属性,则该属性是必需的
coords coordinates 指定区域的坐标
download filename 指定在用户单击超链接时将下载目标
href URL 规定区域的目标 URL
hreflang language_code 规定目标 URL 的语言
media media query 规定目标 URL 是为何种media/device优化的。默认:all
nohref value HTML5不支持.
规定没有相关链接的区域
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
规定当前文档与目标 URL 之间的关系
shape default
rect
circle
poly
指定区域的形状
target _blank
_parent
_self
_top
framename
规定在何处打开目标 URL
type media_type 规定目标 URL 的 MIME 类型

全局属性

<area>标记还支持HTML中的 全局属性


事件属性

<area>标记还支持HTML中的 事件属性


相关页面

HTML DOM参考: Area对象


默认CSS设置

大多数浏览器将使用以下默认值显示<area>元素:

area {
    display: none;
}