©
本文档使用 PHP中文网手册 发布
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 roles | None |
DOM 接口 | HTMLAreaElement |
属性
钙元素包括全局属性。
accesskeyHTML 4only,已废弃 Gecko 5.0为元素指定一个获取焦点的快捷键。在与指定字符关联的情况下，按ALT或类似键选择与该键序列相关联的表单控件。页面设计人员避免使用已经绑定到浏览器的快捷键。这个属性自HTML5以来是全局性的。
alt在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择（译者注：就是字和图片表达一个意思）。在HTML4中， 这个属性时必需的, 但是可以是一个空的串("")。在HTML5中, 这个属性只有在href属性被使用的时候才是必需的。
coords给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性.。对于矩形或长方形, 这个coords 值为两个X,Y对：左上、右下。 对于圆形, 这个值是 x,y,r ，这里的 x,y是一对确定圆的中心的坐标而 r 则表示的是半径值.。对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3,等等。HTML4里, 值可能是像素数量或者百分比, 区别是不是有%出现; HTML5里, 只可能是像素的数量.downloadHTML5这个属性如果存在的话, 表明作者想把超链接用于下载一个资源。请查看<a>获得关于download属性的完整描述。
hrefarea的超链接, 值为一个URL. HTML4里, 这个值不管是不是有值都要明确指定出来. HTML5里则不需要.hreflangHTML5指明链接资源的语言类型, 值的范围参考BCP47. 这个属性只能在指明href属性之后使用.nameHTML 4only,已废弃 Gecko 5.0为可点击区域定义一个名字以使旧浏览器解析。
mediaHTML5指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在href属性存在情况下使用。nohrefHTML 4only,已废弃 Gecko 5.0指明此区域没有超链接。在<area>中必须存在nohref或者href。
Usage note: 此属性在html5中是废弃的，而忽略href属性就足够了。
referrerpolicy一个字符串，指示在获取资源时使用哪个引用者：
"no-referrer"这意味着Referer:头不会被发送。
“
no-referrer-when-downgrade”表示Referer:当导航到没有TLS（HTTPS）的原点时，不会发送标题。如果没有指定策略，这是用户代理的默认行为。
"origin"这意味着引用者将成为页面的来源，即大致的方案，主机和端口。
“起源 - 交叉起源”意味着到其他起源的导航将限制在该方案，主机和端口，同一来源的导航将包括引用者的路径。
"unsafe-url"这意味着引用者将包括来源和路径（但不包括片段，密码或用户名）。这种情况是不安全的，因为它可以将来自TLS保护的资源的起点和路径泄漏到不安全的起点。
relHTML5对于包含href属性的锚点，此属性指定目标对象与链接对象的关系。该值是链接类型值的逗号分隔列表。值和它们的语义将由某个权威机构注册，这对文档作者可能有意义。默认的关系，如果没有给出，是无效的。只有当href属性存在时才使用此属性。
shape相关热点的形状。HTML 5和HTML 4的规范定义了rect定义矩形区域的值; circle，它定义了一个圆形区域; poly，它定义了一个多边形; 和default，这表示整个区域超出任何定义的形状。许多浏览器，特别是Internet Explorer 4和更高的支持circ，polygon以及rectangle对作为有效值形状 ; 这些值是。仅限HTML 4，自从Gecko 5.0A数值指定浏览器标签顺序中已定义区域的位置以来已过时。该属性在HTML5中是全局的。此属性指定显示链接资源的位置。在HTML4中，这是框架的名称或关键字。在HTML5中，它是浏览上下文（例如，选项卡，窗口或内联框架）的名称或关键字。以下关键字具有特殊含义：tabindextarget
_self: 在当前区域加载链接指向的资源. 这个是默认值.
_blank: 在新的未命名的窗口或者tab里加载超链接资源.
_parent: 在父级加载超链接资源. HTML4里, 是当前frame的父级, HTML5里是当前的浏览器上下文, 如果当前环境没有父级, 行为和_self一样.
_top: HTML4里: 将响应加载到完整的原始窗口中，取消所有其他帧。在HTML5中:将响应加载到顶级浏览上下文(也就是说，浏览上下文是当前版本的祖先，并且没有父类)。如果没有父类，这个选项的行为方式与self相同
本属性只能在指明href属性之后使用.
type该属性指定了用于链接目标的MIME类型的媒体类型。一般来说，这是严格的咨询信息;然而，在未来，浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为音频/wav时，浏览器可能会添加一个小的扬声器图标。公认的MIME类型的完整列表,请参阅http://www.w3.org/TR/html4/references.html ref-MIMETYPES。只有当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>'的定义。 | 建议 |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
referrerpolicy | 51 | No support | 50 (50) | No support | No support | No support |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mini | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | (Yes) | ? | ? | ? | ? | ? | (Yes) |
referrerpolicy | No support | No support | No support | 50.0 (50) | No support | No support | No support | No support | No support |