?
This document uses PHP Chinese website manual Release
HTML <a> 元素 (或錨元素) 可以創(chuàng)建一個(gè)到其他網(wǎng)頁、文件、同一頁面內(nèi)的位置、電子郵件地址或任何其他URL的超鏈接。
內(nèi)容分類 | 流內(nèi)容，表述內(nèi)容，互動(dòng)的內(nèi)容，可觸的內(nèi)容。 |
|---|---|
允許的內(nèi)容 | Transparent, containing either flow content (excluding interactive content) or phrasing content. |
標(biāo)簽省略 | 不允許，開始標(biāo)簽和結(jié)束標(biāo)簽都不能省略。 |
允許的父元素 | Any element that accepts phrasing content, or any element that accepts flow content, but always excluding <a> elements (according to the logical principle of symmetry, if <a> tag, as a parent, can not have interactive content, then the same <a> content can not have <a> tag as its parent). |
Permitted ARIA roles | button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab, treeitem |
DOM接口 | HTMLAnchorElement |
屬性
該元素支持全局屬性。
downloadHTML5此屬性指示瀏覽器下載URL而不是導(dǎo)航到URL，因此將提示用戶將其保存為本地文件。如果屬性有一個(gè)值，它將在保存提示中用作預(yù)先填寫的文件名 (用戶仍然可以根據(jù)需要更改文件名)。對(duì)允許的值沒有限制，但是/和\被轉(zhuǎn)換為下劃線。大多數(shù)文件系統(tǒng)限制文件名中的一些標(biāo)點(diǎn)符號(hào)，瀏覽器會(huì)相應(yīng)地調(diào)整建議的名稱。
注意:
此屬性僅適用于同源 URLs。
可以使用
blob:URLs 和 data: URLs 以方便用戶下載 JavaScript 方式生成的內(nèi)容（例如使用在線繪圖的Web應(yīng)用創(chuàng)建的照片）。
如果HTTP頭
的Content-Disposition：存在，并且賦予了一個(gè)和這個(gè)屬性不同的文件名，HTTP頭優(yōu)先于此屬性。
如果這個(gè)屬性存在
Content-Disposition被設(shè)置為inline，火狐優(yōu)先 Content-Disposition，像之前文件名的情況下，而Chrome則優(yōu)先download屬性。
href這是一個(gè)必需屬性為錨定義一個(gè)超文本鏈接來源。這表示鏈接目標(biāo)的URL或URL片段。URL片段是由一個(gè)hash符號(hào)（＃），它指定一個(gè)內(nèi)部目標(biāo)在當(dāng)前文檔中的位置（ID）開頭的名字。URL不限于網(wǎng)頁（HTTP）的文件。URL可能使用瀏覽器所支持的任何協(xié)議。例如，文件，F(xiàn)TP，大多數(shù)用戶代理mailto工作。
注意:可以使用href="#top"或者href="#"鏈接返回到頁面頂部。這種行為在HTML5上被指定。
hreflang該屬性用于指定鏈接文檔的人類語言。其僅提供建議，并沒有內(nèi)置的功能。hreflang 允許的值由HTML5 BCP47 所決定。
referrer一個(gè)指示在獲取資源時(shí)應(yīng)該使用哪個(gè)提交者 (referer) 的字符串：
"no-referrer"表示Referer:頭將不會(huì)被發(fā)送。
"
no-referrer-when-downgrade" 表示當(dāng)從使用HTTPS的頁面導(dǎo)航到不使用 TLS(HTTPS)的來源 時(shí)不會(huì)發(fā)送Referer:頭。如果沒有指定策略，這將是用戶代理的默認(rèn)行為。
"origin"表示 referrer將會(huì)是頁面的來源，大致為這樣的組合：主機(jī)和端口（不包含具體的路徑和參數(shù)的信息）。
"origin-when-cross-origin" 表示導(dǎo)航到其它來源將會(huì)限制為這種組合：主機(jī) + 端口，而導(dǎo)航到相同的來源將會(huì)包含 referrer的路徑。
"unsafe-url"表示 referrer將會(huì)包含來源和路徑（但是不會(huì)是包含密碼或用戶名的片段）。這種情況是不安全的，因?yàn)樗赡軙?huì)將TLS保護(hù)的資源的來源和路徑泄露給不安全的來源。
rel該屬性指定了目標(biāo)對(duì)象到鏈接對(duì)象的關(guān)系。該值是空格分隔的列表類型值。
target該屬性指定在何處顯示鏈接的資源。 取值為標(biāo)簽（tab），窗口（window），或框架（iframe）等瀏覽上下文的名稱或其他關(guān)鍵詞。以下關(guān)鍵字具有特殊的意義:
_self: 當(dāng)前頁面加載，即當(dāng)前的響應(yīng)到同一HTML 4 frame（或HTML5瀏覽上下文）。此值是默認(rèn)的，如果沒有指定屬性的話。
_blank: 新窗口打開，即到一個(gè)新的未命名的HTML4窗口或HTML5瀏覽器上下文
_parent: 加載響應(yīng)到當(dāng)前框架的HTML4父框架或當(dāng)前的HTML5瀏覽上下文的父瀏覽上下文。如果沒有parent框架或者瀏覽上下文，此選項(xiàng)的行為方式相同_self。
_top: IHTML4中：加載的響應(yīng)成完整的，原來的窗口，取消所有其它frame。 HTML5中：加載響應(yīng)進(jìn)入頂層瀏覽上下文（即，瀏覽上下文，它是當(dāng)前的一個(gè)的祖先，并且沒有parent）。如果沒有parent框架或者瀏覽上下文，此選項(xiàng)的行為方式相同_self
注意：使用target時(shí)，考慮添加 rel="noopener norefferrer" 以防止針對(duì) window.opener API 的惡意行為。
type該屬性指定在一個(gè)MIME type鏈接目標(biāo)的形式的媒體類型。其僅提供建議，并沒有內(nèi)置的功能。
過時(shí)的
charset已廢棄HTML5此屬性定義鏈接資源的字符編碼。該值是一個(gè)空格- 和/或逗號(hào)分隔的RFC 2045中定義的字符集列表。默認(rèn)值是ISO-8859-1。
Usage note: 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.
coordsHTML 4only,已廢棄HTML5對(duì)于使用對(duì)象的形狀，這個(gè)屬性使用逗號(hào)分隔的數(shù)字列表來定義對(duì)象在頁面上的坐標(biāo)。nameHTML 4only,已廢棄HTML5該屬性在頁面中定義錨點(diǎn)的目標(biāo)位置時(shí)是必須的。
name的值類似于ID核心屬性值，該屬性值在文檔中是唯一的且由數(shù)字字母標(biāo)示符所組成的。在 HTML 4.01 規(guī)范中,id和name都可以使用 <a> 元素，只要他們有相同的值。
使用說明:該屬性在 HTML5中是過時(shí)的, 使用全局屬性id來代替。
revHTML 4only,已廢棄HTML5該屬性用于指定當(dāng)前文檔與被鏈接文檔的關(guān)系。用于 <a> 標(biāo)簽的可選屬性 rel 和 rev 分別表示源文檔與目標(biāo)文檔之間正式的關(guān)系和方向。rel 屬性指定從源文檔到目標(biāo)文檔的關(guān)系，而 rev 屬性則指定從目標(biāo)文檔到源文檔的關(guān)系。這兩種屬性可以在 <a> 標(biāo)簽中同時(shí)使用。對(duì)于網(wǎng)頁編者來說，這個(gè)屬性很有用，可以通過它來查看外鏈的來源。
shapeHTML 4only,已廢棄HTML5此屬性用于定義一個(gè)可選的超鏈接相關(guān)的一個(gè)數(shù)字來創(chuàng)建圖像映射區(qū)域，該屬性的值是圓，默認(rèn)情況下，多邊形，矩形。 所述的coords 屬性的格式取決于形狀的值。對(duì)于圓，該值的x，y，r其中x和y為圓心像素坐標(biāo)，r是像素值半徑。對(duì)于矩形，該coords 屬性應(yīng)該是x，y，w，h。x，y值定義的矩形的左上角的位置，而w和h分別定義寬度和高度。多邊形形狀的值需要x1，y1，x2，y2，......值來定義coords。每對(duì)x，y定義多邊形的一個(gè)點(diǎn)，連續(xù)點(diǎn)由直線接合和，最后一個(gè)點(diǎn)連接到第一個(gè)點(diǎn)。默認(rèn)為形狀的值需要將整個(gè)封閉區(qū)域，典型的圖像，可以使用。
說明：建議使用usemap 屬性在<img>元素和相關(guān)的<map>元素中來定義熱點(diǎn)而不是用形狀屬性。
示例
鏈接到外部地址
<!-- anchor linking to external file --><a href="https://www.mozilla.com/">External Link</a>
鏈接到本頁的某個(gè)部分
<!-- links to element on this page with id="attr-href" --><a href="#attr-href">Description of Same-Page Links</a>
創(chuàng)建一個(gè)可點(diǎn)擊的圖片
這個(gè)小例子使用圖像鏈接到MDN主頁。主頁將在新的瀏覽環(huán)境，這是一個(gè)新的頁面或新標(biāo)簽中打開研究。
<a href="https://developer.mozilla.org/en-US/" target="_blank"> <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" /></a>
結(jié)果
創(chuàng)建一個(gè)email鏈接
這是常見的創(chuàng)建按鈕或鏈接，將用戶的電子郵件程序打開，讓他們發(fā)送新郵件。這是通過使用一個(gè)mailto鏈接完成的。這里有一個(gè)簡單的例子：
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
生成這樣的鏈接:
有關(guān)mailto URL方案的更多細(xì)節(jié)，比如如何包含主題，正文，或其他預(yù)定內(nèi)容，參考 Email links orRFC 6068.
創(chuàng)建電話鏈接
提供電話鏈接有助于用戶查看連接到手機(jī)的網(wǎng)絡(luò)文檔和筆記本電腦。
<a href="tel:+491570156">+49 157 0156</a>
更詳細(xì)的語法請(qǐng)查看RFC 2806andRFC 2396。
使用 download 屬性保存畫布為PNG格式
如果你想允許用戶下載一個(gè)HTML畫布，你可以創(chuàng)建一個(gè)下載屬性和畫布數(shù)據(jù)作為文件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);可以查看這個(gè)例子 http://jsfiddle.net/codepo8/V6ufG/2/
備注
html 3.2 只定義 name, href, rel, rev, 和 title 屬性。
無障礙建議
錨點(diǎn)標(biāo)簽常常通過將 href 屬性設(shè)置為 "#" 或 "javascript:void(0)" 來創(chuàng)造一個(gè)能阻止頁面刷新的偽按鈕的方式被濫用。 這些屬性值會(huì)在拖動(dòng) / 復(fù)制鏈接時(shí)導(dǎo)致意外行為，在新窗口 / 新標(biāo)簽打開鏈接，加入書簽以及 JavaScript 仍在下載時(shí)會(huì)出現(xiàn)錯(cuò)誤或被禁用。這也會(huì)向輔助技術(shù)（如屏幕閱讀器）傳達(dá)不正確的語義。在這些情況下，推薦使用 <button> 來代替。通常情況下，您應(yīng)該只將錨點(diǎn)用于正常的 URL 導(dǎo)航。
Clicking 及 focus
點(diǎn)擊一個(gè) <a> 標(biāo)簽是否會(huì)出現(xiàn) focus 取決于瀏覽器和操作系統(tǒng)。
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 |
規(guī)范
規(guī)范 | 狀態(tài) | 評(píng)論 |
|---|---|---|
引用者策略該規(guī)范中“引用者屬性”的定義。 | 編輯草稿 | 添加了引薦來源屬性。 |
HTML生活標(biāo)準(zhǔn)該規(guī)范中'<'的定義。 | 生活水平 | |
HTML5該規(guī)范中<a>的定義。 | 建議 | |
HTML 4.01規(guī)范該規(guī)范中'<'的定義。 | 建議 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) 1 | 1.0 4 | (All) | 1.0 |
href="#top" | (Yes) | (Yes) | 10.0 (10.0) | (Yes) | (Yes) | (Yes) |
download | 14 | 13 3 | 20.0 (20.0) | No support | 15 | 10.1 |
ping | (Yes) | No support | No support 2 | No support | (Yes) | No support |
referrerpolicy | 46.0 2 | No support | 50 (50) | No support | No support | No support |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
Basic support | (All) | (All) | (Yes) | 1.0 (1.0) 1 | (All) | (All) | 1.0 | 1.0 |
href="#top" | (Yes) | ? | (Yes) | 10.0 (10.0) | (Yes) | (Yes) | (Yes) | ? |
download | (Yes) | ? | (Yes) | 20.0 (20.0) | No support | ? | No support | ? |
ping | ? | ? | No support | No support | ? | ? | ? | ? |
referrerpolicy | No support | 46.0 3 | No support | 50.0 (50.0) | No support | No support | No support | 46.0 3 |