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