就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. HTML
  3. HTML 元素参考
  4. <area>

在此页

HTML <area> element 在拥有预定义可点击区域的图像映射中定义区域。 图像映射 允许图像几何区域关联 超文本链接 .

This element is used only within a <map> 元素。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

内容类别 流内容 , 措词内容 .
准许内容 None, it is an empty element .
Tag omission Must have a start tag and must not have an end tag.
Permitted parents Any element that accepts 措词内容 。 <area> element must have an ancestor <map> , but it need not be a direct parent.
Implicit ARIA role link 当 href attribute is present, otherwise no corresponding role
Permitted ARIA roles No role permitted
DOM 接口 HTMLAreaElement

属性

This element's attributes include the 全局属性 .

alt
A text string alternative to display on browsers that do not display images. The text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. This attribute is required only if the href attribute is used.
coords
coords attribute details the coordinates of the shape attribute in size, shape, and placement of an <area> .
  • rect : the value is x1,y1,x2,y2 . Value specifies the coordinates of the top-left and bottom-right corner of the rectangle.
    例如： <area shape="rect" coords="0,0,253,27" href="#" alt="Mozilla"> The coords in the above example specify: 0,0 as the top-left corner and 253,27 as the bottom-right corner of the rectangle.
  • circle : the value is x,y,radius . Value specifies the coordinates of the circle center and the radius.
    例如： <area shape="circle" coords="130,136,60" href="#" alt="MDN">
  • poly : the value is x1,y1,x2,y2,..,xn,yn . Value specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon
  • default : defines the entire region
The values are numbers of CSS pixels.
download
This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. See <a> for a full description of the download 属性。
href
The hyperlink target for the area. Its value is a valid URL. This attribute may be omitted; if so, the <area> element does not represent a hyperlink.
hreflang
Indicates the language of the linked resource. Allowed values are determined by BCP47 . Use this attribute only if the href attribute is present.
ping
Contains a space-separated list of URLs to which, when the hyperlink is followed, POST requests with the body PING will be sent by the browser (in the background). Typically used for tracking.
referrerpolicy
A string indicating which referrer to use when fetching the resource:
  • " no-referrer " meaning that the Referer: header will not be sent.
  • " no-referrer-when-downgrade " meaning that no Referer: header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
  • " origin " meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
  • " origin-when-cross-origin " meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.
  • " unsafe-url " meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
rel
For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of link types values . The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the href attribute is present.
shape
The shape of the associated hot spot. The specifications for HTML defines the values rect , which defines a rectangular region; circle , which defines a circular region; poly , which defines a polygon; and default , which indicates the entire region beyond any defined shapes.
Many browsers, notably Internet Explorer 4 and higher, support circ , polygon ，和 rectangle as valid values for shape , but these values are non-standard.
target
A keyword or author-defined name of the 浏览上下文 to display the linked resource.
The following keywords have special meanings:
  • _self (default): Show the resource in the current browsing context.
  • _blank : Show the resource in a new, unnamed browsing context.
  • _parent : Show the resource in the parent browsing context of the current one, if the current page is inside a frame. If there is no parent, acts the same as _self .
  • _top : Show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). If there is no parent, acts the same as _self .
Use this attribute only if the href attribute is present.

注意： In newer browser versions (e.g. Firefox 79+) setting target="_blank" on <area> elements implicitly provides the same rel behavior as setting rel="noopener" .

Deprecated attributes

名称

Define a names for the clickable area so that it can be scripted by older browsers.

nohref
Indicates that no hyperlink exists for the associated area.

注意： Since HTML5, omitting the href attribute is sufficient.

tabindex

A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.

type
No effect. Browsers ignore it. (The W3C 5.3 fork of the HTML specification defines it as valid, but the canonical HTML specification doesn’t, and it has no effect in any user agents.)

范例 

<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">

结果

规范

规范 状态 注释
Referrer Policy
The definition of 'referrerpolicy attribute' in that specification. 		候选推荐 添加 referrerpolicy 属性。
HTML 实时标准
The definition of '<area>' in that specification. 		实时标准
HTML5
The definition of '<area>' in that specification. 		推荐
HTML 4.01 Specification
The definition of '<area>' in that specification. 		推荐

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
area Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
accesskey 弃用 Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
alt Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
coords Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
download Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 Yes IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 Yes Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
href Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
hreflang 弃用 Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 Yes IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 Yes Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
target="_blank" 隐含 rel="noopener" behavior 弃用 Chrome 不支持 No Edge 不支持 No Firefox 完整支持 79 IE 不支持 No Opera 不支持 No Safari 完整支持 12.1 WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 完整支持 79 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 不支持 No
media Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 Yes IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 Yes Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
名称 弃用 Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
nohref 弃用 Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
referrerpolicy Chrome 完整支持 51 Edge 完整支持 79 Firefox 完整支持 50 IE 不支持 No Opera 完整支持 38 Safari 完整支持 11.1 WebView Android 完整支持 51 Chrome Android 完整支持 51 Firefox Android 完整支持 50 Opera Android 完整支持 41 Safari iOS 不支持 No Samsung Internet Android 完整支持 7.2
rel Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 Yes IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 Yes Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
shape Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
tabindex 弃用 Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
target Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
type 弃用 Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 4 Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes

图例

完整支持

完整支持

不支持

不支持

弃用。不要用于新网站。

弃用。不要用于新网站。

元数据

  • 最后修改：
  1. HTML 元素
    1. A
      1. <a>
      2. <abbr>
      3. <acronym>
      4. <address>
      5. <applet>
      6. <area>
      7. <article>
      8. <aside>
      9. <audio>
    2. B
      1. <b>
      2. <base>
      3. <basefont>
      4. <bdi>
      5. <bdo>
      6. <bgsound>
      7. <big>
      8. <blink>
      9. <blockquote>
      10. <body>
      11. <br>
      12. <button>
    3. C
      1. <canvas>
      2. <caption>
      3. <center>
      4. <cite>
      5. <code>
      6. <col>
      7. <colgroup>
      8. <content>
    4. D
      1. <data>
      2. <datalist>
      3. <dd>
      4. <del>
      5. <details>
      6. <dfn>
      7. <dialog>
      8. <dir>
      9. <div>
      10. <dl>
      11. <dt>
    5. E
      1. <em>
      2. <embed>
    6. F
      1. <fieldset>
      2. <figcaption>
      3. <figure>
      4. <font>
      5. <footer>
      6. <form>
      7. <frame>
      8. <frameset>
    7. G H
      1. <h1>
      2. <h2>
      3. <h3>
      4. <h4>
      5. <h5>
      6. <h6>
      7. <head>
      8. <header>
      9. <hgroup>
      10. <hr>
      11. <html>
    8. I
      1. <i>
      2. <iframe>
      3. <img>
      4. <input>
      5. <ins>
      6. <isindex>
    9. J K
      1. <kbd>
      2. <keygen>
    10. L
      1. <label>
      2. <legend>
      3. <li>
      4. <link>
      5. <listing>
    11. M
      1. <main>
      2. <map>
      3. <mark>
      4. <marquee>
      5. <menu>
      6. <menuitem>
      7. <meta>
      8. <meter>
    12. N
      1. <nav>
      2. <nobr>
      3. <noframes>
      4. <noscript>
    13. O
      1. <object>
      2. <ol>
      3. <optgroup>
      4. <option>
      5. <output>
    14. P
      1. <p>
      2. <param>
      3. <picture>
      4. <plaintext>
      5. <pre>
      6. <progress>
    15. Q
      1. <q>
    16. R
      1. <rp>
      2. <rt>
      3. <rtc>
      4. <ruby>
    17. S
      1. <s>
      2. <samp>
      3. <script>
      4. <section>
      5. <select>
      6. <shadow>
      7. <slot>
      8. <small>
      9. <source>
      10. <spacer>
      11. <span>
      12. <strike>
      13. <strong>
      14. <style>
      15. <sub>
      16. <summary>
      17. <sup>
    18. T
      1. <table>
      2. <tbody>
      3. <td>
      4. <template>
      5. <textarea>
      6. <tfoot>
      7. <th>
      8. <thead>
      9. <time>
      10. <title>
      11. <tr>
      12. <track>
      13. <tt>
    19. U
      1. <u>
      2. <ul>
    20. V
      1. <var>
      2. <video>
    21. W
      1. <wbr>
    22. X Y Z
      1. <xmp>