---
title: <area>
slug: Web/HTML/Element/area
tags:
  - HTML
  - Web
  - 元素
  - 参考
  - 多媒体
translation_of: Web/HTML/Element/area
---
<h2 id="简要">简要</h2>

<p class="seoSummary"><em>HTML <code>&lt;area&gt;</code> 元素 在图片上定义一个热点区域，可以关联一个超链接。&lt;area&gt;元素仅在&lt;map&gt;元素内部使用。</em></p>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流内容</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">短语内容</a>.</li>
 <li><dfn>允许的内容</dfn>它是一个空的元素不允许嵌套任何子元素或者文本。</li>
 <li><dfn>标签省略</dfn>只能允许有开始标签不允许有结束标签。</li>
 <li><dfn>允许的父元素</dfn> &lt;area&gt;元素必须拥有一个&lt;map&gt;元素祖先元素，但不一定是直接的父元素。</li>
 <li><dfn>DOM 接口</dfn> {{domxref("HTMLAreaElement")}}</li>
</ul>

<h2 id="属性">属性</h2>

<p>该元素包括全局属性。</p>

<dl>
 <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
 <dd>为元素指定一个获取焦点的快捷键。在与指定字符关联的情况下，按ALT或类似键选择与该键序列相关联的表单控件。页面设计人员避免使用已经绑定到浏览器的快捷键。这个属性自HTML5以来是全局性的。</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("alt")}}</dt>
 <dd>在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择（译者注：就是字和图片表达一个意思）。在HTML4中， 这个属性时必需的, 但是可以是一个空的串("")。在HTML5中, 这个属性只有在<strong>href</strong> 属性被使用的时候才是必需的。</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("coords")}}</dt>
 <dd>给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的<strong>形状</strong>属性.。对于矩形或长方形, 这个<strong>coords </strong>值为两个X,Y对：左上、右下。 对于圆形, 这个值是 <code>x,y,r</code> ，这里的 <code>x,y</code> 是一对确定圆的中心的坐标而 <code>r</code> 则表示的是半径值.。对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：<code>x1,y1,x2,y2,x3,y3,</code>等等。HTML4里, 值可能是像素数量或者百分比, 区别是不是有%出现; HTML5里, 只可能是像素的数量.</dd>
 <dt>{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}</dt>
 <dd>这个属性如果存在的话, 表明作者想把超链接用于下载一个资源。请查看{{HTMLElement("a")}} 获得关于 {{htmlattrxref("download", "a")}}属性的完整描述。</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("href")}}</dt>
 <dd>area的超链接, 值为一个URL. HTML4里, 这个值不管是不是有值都要明确指定出来. HTML5里则不需要.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt>
 <dd>指明链接资源的语言类型, 值的范围参考<a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. 这个属性只能在指明href属性之后使用.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
 <dd>为可点击区域定义一个名字以使旧浏览器解析。</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}</dt>
 <dd>指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在href属性存在情况下使用。</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
 <dd>指明此区域没有超链接。在&lt;area&gt;中必须存在nohref或者href。
 <div class="note">
 <p><strong>用法提示: </strong>此属性在html5中是废弃的，而忽略href属性就足够了。</p>
 </div>
 </dd>
</dl>

<p> </p>

<dl>
 <dt> </dt>
</dl>

<dl>
 <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt>
 <dd>对于包含href属性的锚，该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系，默认的关系是无效的。只有当href属性是presen时才使用该属性</dd>
 <dt>{{htmlattrdef("shape")}}</dt>
 <dd>相关联的热点的形状。HTML 5和HTML 4的规范定义了值rect，它定义了一个矩形区域;圆圈，它定义了一个圆形区域;多边形，它定义了一个多边形;默认情况下，这表示整个区域超出了任何定义的形状。许多浏览器，特别是Internet Explorer 4和更高版本，支持弧形、多边形和矩形作为形状的有效值;这些值{ { Non-standard_inline } }。</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
 <dd>用于指定浏览器tab键获取焦点的顺序。在html5中是全局属性。</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("target")}}</dt>
 <dd>本属性指明了在什么地方显示链接的资源. HTML4里, 这个值是一个frame的链接或者关键字. HTML5里, 它是一个浏览器上下文(比如: 标签, 窗口或者内嵌的frame)的链接或者关键字. 值的含义:
 <ul>
  <li><code>_self</code>: 在当前区域加载链接指向的资源. 这个是默认值.</li>
  <li><code>_blank</code>: 在新的未命名的窗口或者tab里加载超链接资源.</li>
  <li><code>_parent</code>: 在父级加载超链接资源. HTML4里, 是当前frame的父级, HTML5里是当前的浏览器上下文, 如果当前环境没有父级, 行为和<code>_self</code>一样.</li>
  <li><code>_top</code>: HTML4里: 将响应加载到完整的原始窗口中，取消所有其他帧。在HTML5中:将响应加载到顶级浏览上下文(也就是说，浏览上下文是当前版本的祖先，并且没有父类)。如果没有父类，这个选项的行为方式与self相同</li>
 </ul>
 本属性只能在指明href属性之后使用.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>该属性指定了用于链接目标的MIME类型的媒体类型。一般来说，这是严格的咨询信息;然而，在未来，浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为音频/wav时，浏览器可能会添加一个小的扬声器图标。公认的MIME类型的完整列表,请参阅http://www.w3.org/TR/html4/references.html ref-MIMETYPES。只有当href属性存在时才使用该属性。</dd>
</dl>

<h2 id="例子">例子</h2>

<pre class="brush: html">&lt;map name="primary"&gt;
  &lt;area shape="circle" coords="200,250,25" href="another.htm" /&gt;
  &lt;area shape="default" nohref /&gt;
&lt;/map&gt;
</pre>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mini</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="注意">注意</h2>

<p>HTML 3.2, 4.0, 和HTML 5 规范中, 不允许有 <code>&lt;/area&gt;</code> 单闭合标签.</p>

<p>XHTML 1.0 规范要求有尾部的斜线: <code>&lt;area /&gt;</code>.</p>

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

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

<p>HTML 3.2 只定义了<strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong>, 和<strong>shape</strong>.</p>

<p>{{HTMLRef}}</p>