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

HTML <a> element (或 anchor 元素)，采用 its href 属性 , creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. Content within each <a> should indicate the link's destination.

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.

属性

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

download HTML5

Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:

  • Without a value, the browser will suggest a filename/extension, generated from various sources:
  • Defining a value suggests it as the filename. / and \ characters are converted to underscores ( _ ). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.
注意事项：
  • download 仅工作于 same-origin URLs ，或 blob: and data: schemes.

  • Note: if the Content-Disposition header has different information from the download attribute, resulting behaviour may differ:

    • If the header specifies a filename , it takes priority over a filename specified in the download 属性。

    • If the header specifies a disposition of inline , Chrome, and Firefox 82 and later, prioritize the attribute and treat it as a download. Firefox versions before 82 prioritize the header and will display the content inline.

href

The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

  • Sections of a page with fragment URLs
  • Pieces of media files with media fragments
  • Telephone numbers with tel: URL
  • Email addresses with mailto: URL
  • While web browsers may not support other URL schemes, web sites can with registerProtocolHandler()
hreflang
Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang 属性 .
ping
A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.
referrerpolicy
How much of the referrer to send when following the link. See Referrer-Policy for possible values and their effects.
rel
The relationship of the linked URL as space-separated link types .
target
Where to display the linked URL, as the name for a 浏览上下文 (a tab, window, or <iframe> ). The following keywords have special meanings for where to load the URL:
  • _self : the current browsing context. (Default)
  • _blank : usually a new tab, but users can configure browsers to open a new window instead.
  • _parent : the parent browsing context of the current one. If no parent, behaves as _self .
  • _top : the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as _self .

注意： 当使用 target ，添加 rel="noreferrer noopener" to avoid exploitation of the window.opener API;

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

type
Hints at the linked URL’s format with a MIME 类型 . No built-in functionality.

Obsolete attributes

charset Obsolete since HTML5
Hinted at the character encoding of the linked URL.

注意： This attribute is obsolete and should not be used by authors . Use the HTTP Content-Type header on the linked URL.

coords Obsolete since HTML5
Used with the shape 属性 . A comma-separated list of coordinates.
名称 Obsolete since HTML5
Was required to define a possible target location in a page. In HTML 4.01, id and 名称 could both be used on <a> , as long as they had identical values.

注意： Use the global attribute id 代替。

rev Obsolete since HTML5
Specified a reverse link; the opposite of the rel 属性 . Deprecated for being very confusing.
shape Obsolete since HTML5
The shape of the hyperlink’s region in an image map. 注意： 使用 <area> element for image maps instead.

特性

内容类别 流内容 , 措词内容 , interactive content ，可触及内容。
准许内容 Transparent , containing either flow content (excluding interactive content ) 或 措词内容 .
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts 措词内容 , or any element that accepts flow content , but not other <a> 元素。
Implicit ARIA role link 当 href attribute is present, otherwise no corresponding role
Permitted ARIA roles 当 href attribute is present:

当 href attribute is not present:

  • any
DOM 接口 HTMLAnchorElement

范例

Linking to an absolute URL

HTML 

<a href="https://www.mozilla.com">
  Mozilla
</a>

结果

Linking to relative URLs

HTML 

<a href="//example.com">Scheme-relative URL</a>
<a href="../../HTML.html">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>

CSS 

a { display: block; margin-bottom: 0.5em }

结果

Linking to an element on the same page 

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">
  Jump to the heading below
</a></p>
<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

注意： 可以使用 href="#top" or the empty fragment ( href="#" ) to link to the top of the current page, as defined in the HTML specification .

Linking to an email address

To create links that open in the user's email program to let them send a new message, use the mailto: scheme: 

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

For details about mailto: URLs, such as including a subject or body, see Email links or RFC 6068 .

Linking to telephone numbers 

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>

tel: link behavior varies with device capabilities:

  • Cellular devices autodial the number.
  • Most operating systems have programs that can make calls, like Skype or FaceTime.
  • Websites can make phone calls with registerProtocolHandler ，譬如 web.skype.com .
  • Other behaviors include saving the number to contacts, or sending the number to another device.

见 RFC 3966 for syntax, additional features, and other details about the tel: URL 方案。

Using the download attribute to save a <canvas> as a PNG

To save a <canvas> element’s contents as an image, you can create a link with a download attribute and the canvas data as a data: URL:

HTML 
<p>Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
</p>
<canvas width="300" height="300"></canvas>
CSS 
html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}
JavaScript 
var canvas = document.querySelector('canvas'),
    c = canvas.getContext('2d');
c.fillStyle = 'hotpink';
function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}
canvas.addEventListener('mousemove', event =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);
document.querySelector('a').addEventListener('click', event =>
  event.target.href = canvas.toDataURL()
);
结果

Security and privacy

<a> elements can have consequences for users’ security and privacy. See Referer header: privacy and security concerns for information.

使用 target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to window.opener API exploitation attacks ( vulnerability description ), although note that, in newer browser versions (e.g. Firefox 79+) setting target="_blank" implicitly provides the same protection as setting rel="noopener" .

可访问性

Strong link text

The content inside a link should indicate where the link goes , even out of context.

Inaccessible, weak link text

A sadly common mistake is to only link the words “click here” or “here”: 

<p>
  Learn more about our products <a href="/products">here</a>.
</p>

Strong link text

Luckily, this is an easy fix, and it’s actually shorter than the inaccessible version! 

<p>
  Learn more <a href="/products">about our products</a>.
</p>

Assistive software have shortcuts to list all links on a page. However, strong link text benefits all users — the “list all links” shortcut emulates how sighted users quickly scan pages.

onclick events

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click 事件。

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL .

Links that open in a new tab/window via target="_blank" , or links that point to a download file should indicate what will happen when the link is followed.

People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior. 

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>
	
<a href="2017-annual-report.ppt">
  2017 Annual Report (PowerPoint)
</a>

If an icon is used to signify link behavior, make sure it has alt text : 

<a  target="_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(opens in new tab)" src="newtab.svg">
</a>
<a href="2017-annual-report.ppt">
  2017 Annual Report
  <img alt="(PowerPoint file)" src="ppt-icon.svg">
</a>

A skip link is a link placed as early as possible in <body> content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused. 

<body>
  <a href="#content">Skip to main content</a>
  <header>
    …
  </header>
  <main id="content"> <!-- The skip link jumps to here -->
	
.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}

Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.

Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.

Size and proximity

Size

Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended.

Text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated.

Proximity

Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.

Spacing may be created using CSS properties like margin .

规范

规范 状态 注释
Referrer Policy
The definition of 'referrer attribute' in that specification. 		候选推荐 添加 referrerpolicy 属性。
HTML 实时标准
The definition of '<a>' in that specification. 		实时标准
HTML5
The definition of '<a>' in that specification. 		推荐
HTML 4.01 Specification
The definition of '<a>' 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
a Chrome 完整支持 Yes Edge 完整支持 12 Firefox 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content ( bug 1167816 ).
IE 完整支持 Yes Opera 完整支持 Yes Safari 完整支持 Yes WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content ( bug 1167816 ).
Opera Android 完整支持 Yes Safari iOS 完整支持 Yes Samsung Internet Android 完整支持 Yes
charset 弃用 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
coords 弃用 Chrome 不支持 No Edge 不支持 No Firefox 不支持 ? — 58 注意事项
不支持 ? — 58 注意事项
注意事项 You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 ? — 58 注意事项
不支持 ? — 58 注意事项
注意事项 You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
download Chrome 完整支持 14 注意事项
完整支持 14 注意事项
注意事项 Starting in Chrome 65, cross-origin downloads are not supported on the <a> 元素。
Edge 完整支持 18
完整支持 18
部分支持 13 注意事项
注意事项 Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash ( bug 7160092 ).
注意事项 Edge 17 or older didn't follow the attributes' value to determine filename ( bug 7260192 ).
Firefox 完整支持 20 IE 不支持 No Opera 完整支持 15 Safari 完整支持 10.1 WebView Android 完整支持 Yes 注意事项
完整支持 Yes 注意事项
注意事项 Starting in WebView 65, cross-origin downloads are not supported on the <a> 元素。
Chrome Android 完整支持 18 注意事项
完整支持 18 注意事项
注意事项 Starting in Chrome 65, cross-origin downloads are not supported on the <a> 元素。
Firefox Android 完整支持 20 Opera Android ? Safari iOS 不支持 No Samsung Internet Android 完整支持 1.0 注意事项
完整支持 1.0 注意事项
注意事项 Starting in Samsung Internet 9.0, cross-origin downloads are not supported on the <a> 元素。
href 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
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
名称 弃用 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
ping 实验性 Chrome 完整支持 Yes Edge 完整支持 79 Firefox 完整支持 Yes Disabled
完整支持 Yes Disabled
Disabled ). To change preferences in Firefox, visit
IE 不支持 No Opera 完整支持 Yes Safari 不支持 No WebView Android 完整支持 Yes Chrome Android 完整支持 Yes Firefox Android 完整支持 Yes Disabled
完整支持 Yes Disabled
Disabled ). To change preferences in Firefox, visit
Opera Android ? Safari iOS 不支持 No 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
rev 弃用 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 不支持 No Edge 不支持 No Firefox 不支持 ? — 58 注意事项
不支持 ? — 58 注意事项
注意事项 You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 ? — 58 注意事项
不支持 ? — 58 注意事项
注意事项 You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
target 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
type 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

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

弃用。不要用于新网站。

弃用。不要用于新网站。

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

  • <link> 类似于 <a> , but for metadata hyperlinks that are invisible to users.
  • :link is a CSS pseudo-class that will match <a> elements with valid href 属性。

元数据

  • 最后修改：
  1. <a>
  2. <abbr>
  3. <b>
  4. <bdi>
  5. <bdo>
  6. <br>
  7. <cite>
  8. <code>
  9. <data>
  10. <dfn>
  11. <em>
  12. <i>
  13. <kbd>
  14. <mark>
  15. <q>
  16. <rb>
  17. <rp>
  18. <rt>
  19. <rtc>
  20. <ruby>
  21. <s>
  22. <samp>
  23. <small>
  24. <span>
  25. <strong>
  26. <sub>
  27. <sup>
  28. <time>
  29. <u>
  30. <var>
  31. <wbr>
  32. 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>

版权所有  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1