<a>
HTML <a>
元素(意為 Anchor)建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。
內容類型 (en-US) | 流型內容 (en-US)、phrasing content (en-US), interactive content, palpable content. |
---|---|
內容省略 | Transparent (en-US), containing either flow content (en-US) (excluding interactive content) or phrasing content (en-US). |
標籤省略 | None, both the starting and ending tag are mandatory. |
允許的父元素 | 任何允許 phrasing content (en-US) 或 flow content (en-US) 的內容,但 永遠例外(according to the logical principle of symmetry, if tag, as a parent, can not have interactive content, then the same content can not have tag as its parent) |
Permitted ARIA roles | button (en-US), checkbox (en-US), menuitem (en-US), menuitemcheckbox (en-US), menuitemradio (en-US), option (en-US), radio (en-US), switch (en-US), tab (en-US), treeitem (en-US) |
DOM 介面 | HTMLAnchorElement (en-US) |
屬性
本元素包含全域屬性 (en-US)。
download
-
Causes the browser to treat the linked URL as a download. Can be used with or without a value:
- Without a value, the browser will suggest a filename/extension, generated from various sources:
- The
Content-Disposition
(en-US) HTTP header - The final segment in the URL path (en-US)
- The media type (from the
Content-Type
header, the start of adata:
URL, orBlob.type
for ablob:
URL)
- The
- 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.
Note:
download
only works for same-origin URLs, or theblob:
anddata:
schemes.- How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.
- If the
Content-Disposition
header has different information from thedownload
attribute, resulting behavior may differ:- If the header specifies a
filename
, it takes priority over a filename specified in thedownload
attribute. - If the header specifies a disposition of
inline
, Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline.
- If the header specifies a
- Without a value, the browser will suggest a filename/extension, generated from various sources:
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:
URLs - Email addresses with
mailto:
URLs - 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
attribute (en-US). ping
-
A space-separated list of URLs. When the link is followed, the browser will send
POST
requests with the bodyPING
to the URLs. Typically for tracking. referrerpolicy
-
How much of the referrer (en-US) to send when following the link.
no-referrer
: TheReferer
(en-US) header will not be sent.no-referrer-when-downgrade
: TheReferer
(en-US) header will not be sent to origin (en-US)s without TLS (en-US) (HTTPS (en-US)).origin
: The sent referrer will be limited to the origin of the referring page: its scheme (en-US), host, and port.origin-when-cross-origin
: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.same-origin
: A referrer will be sent for same origin (en-US), but cross-origin requests will contain no referrer information.strict-origin
: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).strict-origin-when-cross-origin
(default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).unsafe-url
: The referrer will include the origin and the path (but not the fragment (en-US), password (en-US), or username (en-US)). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.
rel
-
The relationship of the linked URL as space-separated link types (en-US).
target
-
Where to display the linked URL, as the name for a browsing context (a tab, window, or
<iframe>
(en-US)). 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
.
Note: Setting
target="_blank"
on<a>
elements implicitly provides the samerel
behavior as settingrel="noopener"
(en-US) which does not setwindow.opener
. See browser compatibility for support status. type
-
Hints at the linked URL's format with a MIME type. No built-in functionality.
Obsolete
charset
已棄用-
This attribute defined the character encoding of the linked URL. The value should be a space- and/or comma-delimited list of character sets defined in RFC 2045. The default value is
ISO-8859-1
.備註: This attribute is obsolete in HTML5 and should not be used by authors. To achieve its effect, use the HTTP
Content-Type:
header on the linked URL. coords
已棄用-
For use with the below
shape
attribute, this attribute used a comma-separated list of numbers to define the coordinates of the link on the page. name
已棄用-
This attribute was required for anchors defining a possible target location within a page. In HTML 4.01,
id
andname
could be used simultaneously on a<a>
element as long as they have identical values.備註: This attribute is obsolete in HTML5, use the global attribute
id
(en-US) instead. rev
已棄用-
This attribute specified a reverse link, the inverse relationship of the rel attribute. It was deprecated for being very confusing.
shape
已棄用-
This attribute was used to define a region for hyperlinks to create an image map. The values are
circle
,default
,polygon
, andrect
. The format of the coords attribute depends on the value of shape. Forcircle
, the value isx,y,r
wherex
andy
are the pixel coordinates for the center of the circle andr
is the radius value in pixels. Forrect
, the coords attribute should bex,y,w,h
. Thex,y
values define the upper-left-hand corner of the rectangle, whilew
andh
define the width and height respectively. A value ofpolygon
for shape requiresx1,y1,x2,y2,...
values for coords. Each of thex,y
pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The valuedefault
for shape requires that the entire enclosed area, typically an image, be used.備註: Use the
usemap
attribute (en-US) for the<img>
(en-US) element and the associated<map>
(en-US) element to define hotspots instead of theshape
attribute.
Examples
Linking to an external location
<!-- anchor linking to external file -->
<a href="https://www.mozilla.com/"> External Link </a>
Result
Linking to another section on the same page
<!-- links to element on this page with id="attr-href" -->
<a href="#attr-href"> Description of Same-Page Links </a>
Result
Creating a clickable image
This example uses an image to link to the MDN home page. The home page will open in a new browsing context, that is, a new page or a new tab.
<a href="https://developer.mozilla.org/en-US/" target="_blank">
<img src="mdn_logo.png" alt="MDN logo" />
</a>
Result
Creating an email link
It's common to create links that open in the user's email program to allow them to send a new message. This is done with a mailto:
link. Here's a simple example:
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
Result
For additional details about the mailto
URL scheme, such as including the subject, body, or other predetermined content, see Email links (en-US) or RFC 6068.
Creating a phone link
Offering phone links is helpful for users viewing web documents and laptops connected to phones.
<a href="tel:+491570156">+49 157 0156</a>
For additional details about the tel
URL scheme, see RFC 3966.
Using the download
attribute to save a <canvas>
as a PNG
If you want to let users download an HTML <canvas>
element as an image, you can create a link with a download
attribute and the canvas data as a file URL:
var link = document.createElement("a");
link.textContent = "download image";
link.addEventListener(
"click",
function (ev) {
link.href = canvas.toDataURL();
link.download = "mypainting.png";
},
false
);
document.body.appendChild(link);
You can see this in action at jsfiddle.net/codepo8/V6ufG/2/.
Notes
HTML 3.2 defines only the name
, href
, rel
, rev
, and title
attributes.
Accessibility recommendations
Anchor tags are often abused with the onclick
event to create pseudo-buttons by setting href to "#"
or "javascript:void(0)"
to prevent the page from refreshing. These values cause unexpected behavior when copying/dragging links, opening links in a new tabs/windows, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a <button>
instead. In general you should only use an anchor for navigation using a proper URL.
Clicking and focus
Whether clicking on an <a>
causes it to become focused varies by browser and OS.
Desktop Browsers | Windows 8.1 | OS X 10.9 |
---|---|---|
Firefox 30.0 | Yes | Yes |
Chrome ≥39 (Chromium bug 388666) | Yes | Yes |
Safari 7.0.5 | N/A | Only when it has a tabindex |
Internet Explorer 11 | Yes | N/A |
Presto (Opera 12) | Yes | Yes |
Mobile Browsers | iOS 7.1.2 | Android 4.4.4 |
---|---|---|
Safari Mobile | Only when it has a tabindex |
N/A |
Chrome 35 | ??? | Only when it has a tabindex |
Specifications
Specification |
---|
HTML Standard # the-a-element |
Browser compatibility
BCD tables only load in the browser
See also
- Other elements conveying text-level semantics:
<abbr>
(en-US),<em>
(en-US),<strong>
(en-US),<small>
(en-US),<cite>
(en-US),<q>
,<dfn>
(en-US),<time>
,<code>
,<var>
(en-US),<samp>
(en-US),<kbd>
(en-US),<sub>
(en-US),<sup>
(en-US),<b>
(en-US),<i>
(en-US),<mark>
(en-US),<ruby>
,<rp>
(en-US),<rt>
(en-US),<bdo>
(en-US),<span>
(en-US),<br>
,<wbr>
(en-US).