<a>: 錨點元素
Baseline 廣泛可用 *
<a> HTML 元素（或錨點元素），透過其 href 屬性，建立指向網頁、檔案、電子郵件地址、同一頁面中的位置或任何 URL 可以定址內容的超連結。
<a> 內的內容應該指示連結的目的地。如果 href 屬性存在，當 <a> 元素獲得焦點時，按下回車鍵將啟用它。
試一試
<p>You can reach Michael at:</p>
<ul>
<li><a href="https://example.com">Website</a></li>
<li><a href="mailto:m.bluth@example.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
li {
margin-bottom: 0.5rem;
}
屬性
此元素的屬性包括全域性屬性。
attributionsrc實驗性-
指定你希望瀏覽器傳送一個
Attribution-Reporting-Eligible頭。在伺服器端，這用於觸發在響應中傳送Attribution-Reporting-Register-Source頭，以註冊一個基於導航的歸因源。當用戶點選連結時，瀏覽器會儲存與基於導航的歸因源相關聯的源資料（如
Attribution-Reporting-Register-Source響應頭中提供的那樣）。有關更多詳細資訊，請參閱 歸因報告 API。您可以設定此屬性的兩個版本
-
布林值，即僅
attributionsrc名稱。這指定你希望Attribution-Reporting-Eligible頭髮送到與href屬性指向的同一伺服器。當你處理同一伺服器上的歸因源註冊時，這是可以的。 -
包含一個或多個 URL 的值，例如
htmlattributionsrc="https://a.example/register-source https://b.example/register-source"這在請求的資源不在你控制的伺服器上，或者你只想在不同的伺服器上處理歸因源註冊時很有用。在這種情況下，你可以指定一個或多個 URL 作為
attributionsrc的值。當資源請求發生時，Attribution-Reporting-Eligible頭將除了傳送到資源來源之外，還會發送到attributionsrc中指定的 URL。這些 URL 隨後可以響應Attribution-Reporting-Register-Source以完成註冊。注意：指定多個 URL 意味著可以在同一功能上註冊多個歸因源。例如，您可能正在嘗試衡量不同廣告系列的成功，這涉及生成關於不同資料的不同報告。
<a>元素不能用作歸因觸發器，只能用作源。 -
download-
使瀏覽器將連結的 URL 視為下載。可以有或沒有
filename值。-
如果沒有值，瀏覽器將建議一個檔名/副檔名，該檔名/副檔名由各種來源生成。
Content-DispositionHTTP 頭- URL 路徑中的最後一段
- 媒體型別（來自
Content-Type頭、data:URL 的開頭，或Blob.type，用於blob:URL）
-
filename：定義一個值並建議其作為檔名。/和\字元將轉換為下劃線（_）。檔案系統可能會禁止檔名中的其他字元，因此瀏覽器會根據需要調整建議的名稱。
備註
download僅適用於同源 URL，或blob:和data:方案。- 瀏覽器處理下載的方式因瀏覽器、使用者設定和其他因素而異。使用者可能會在下載開始前收到提示，或者檔案可能會自動儲存，或者檔案可能會自動開啟，無論是在外部應用程式中還是在瀏覽器本身中。
- 如果
Content-Disposition頭中的資訊與download屬性不同，則結果行為可能會有所不同。- 如果頭指定了
filename，則它優先於download屬性中指定的檔名。 - 如果頭指定了
inline的處置，Chrome 和 Firefox 優先考慮屬性並將其視為下載。舊版 Firefox（82 之前）優先考慮頭並將內容內聯顯示。
- 如果頭指定了
-
href-
超連結指向的 URL。連結不限於基於 HTTP 的 URL — 它們可以使用瀏覽器支援的任何 URL 方案。
- 帶
tel:URL 的電話號碼 - 帶
mailto:URL 的電子郵件地址 - 帶
sms:URL 的簡訊 - 帶
javascript:URL 的可執行程式碼 - 雖然 Web 瀏覽器可能不支援其他 URL 方案，但網站可以使用
registerProtocolHandler()
此外，其他 URL 功能可以定位資源的特定部分，包括
- 帶文件片段的頁面部分
- 帶文字片段的特定文字部分
- 帶媒體片段的媒體檔案片段
- 帶
hreflang-
暗示連結 URL 的人類語言。無內建功能。允許的值與全域性
lang屬性相同。 ping-
一個空格分隔的 URL 列表。當遵循連結時，瀏覽器將向這些 URL 傳送正文為
PING的POST請求。通常用於跟蹤。 referrerpolicy-
遵循連結時傳送引用者的程度。
no-referrer：將不傳送Referer頭。no-referrer-when-downgrade：將不向沒有 TLS (HTTPS) 的源傳送Referer頭。origin：傳送的引用者將僅限於引用頁面的源：其方案、主機和埠。origin-when-cross-origin：傳送到其他源的引用者將僅限於方案、主機和埠。同一源上的導航仍將包含路徑。same-origin：將為同源傳送引用者，但跨域請求將不包含引用者資訊。strict-origin：僅當協議安全級別保持不變 (HTTPS→HTTPS) 時，才將文件的源作為引用者傳送，但不要將其傳送到安全性較低的目標 (HTTPS→HTTP)。strict-origin-when-cross-origin（預設）：執行同源請求時傳送完整 URL，僅當協議安全級別保持不變 (HTTPS→HTTPS) 時傳送源，不向安全性較低的目標 (HTTPS→HTTP) 傳送任何頭。unsafe-url：引用者將包含源和路徑（但不包含片段、密碼或使用者名稱）。此值不安全，因為它會將 TLS 保護資源的源和路徑洩漏到不安全的源。
rel-
連結 URL 的關係，作為空格分隔的連結型別。
目標-
顯示連結 URL 的位置，作為瀏覽上下文（一個標籤頁、視窗或
<iframe>）的名稱。以下關鍵字對於載入 URL 的位置具有特殊含義：_self：當前瀏覽上下文。（預設）_blank：通常是新標籤頁，但使用者可以配置瀏覽器改為開啟新視窗。_parent：當前瀏覽上下文的父級瀏覽上下文。如果沒有父級，則行為與_self相同。_top：最頂層的瀏覽上下文。具體來說，這意味著是當前上下文的最高祖先上下文。如果沒有祖先，則行為與_self相同。_unfencedTop：允許嵌入的圍欄框架導航頂級框架（即，超越圍欄框架的根，與其他保留目的地不同）。請注意，如果在圍欄框架上下文之外使用此功能，導航仍將成功，但它不會像保留關鍵字那樣起作用。
注意：在
<a>元素上設定target="_blank"隱式提供了與設定rel="noopener"相同的rel行為，後者不設定window.opener。 type-
透過 MIME 型別提示連結 URL 的格式。無內建功能。
已棄用屬性
charset已棄用-
暗示連結 URL 的字元編碼。
注意：此屬性已廢棄，作者不應使用。請在連結 URL 上使用 HTTP
Content-Type頭。 coords已廢棄-
與
shape屬性一起使用。一個逗號分隔的座標列表。 name已廢棄-
過去用於定義頁面中可能的目標位置。在 HTML 4.01 中，
id和name都可以在<a>上使用，只要它們具有相同的值。注意：請改用全域性屬性
id。 rev已廢棄-
指定一個反向連結；與
rel屬性相反。因過於混亂而廢棄。 shape已廢棄-
影像地圖中超連結區域的形狀。
注意：請改用
<area>元素來建立影像地圖。
無障礙
強連結文字
連結內的內容應指示連結指向何處，即使在脫離上下文的情況下也是如此。
不可訪問的弱連結文字
一個不幸的常見錯誤是隻連結“點選這裡”或“這裡”等詞語。
<p>Learn more about our products <a href="/products">here</a>.</p>
結果
可訪問的強連結文字
幸運的是，這是一個簡單的修復方法，而且實際上比不可訪問的版本更短！
<p>Learn more <a href="/products">about our products</a>.</p>
結果
輔助軟體有快捷方式可以列出頁面上的所有連結。然而，強連結文字對所有使用者都有益——“列出所有連結”快捷方式模擬了有視力使用者快速瀏覽頁面的方式。
onclick 事件
錨點元素經常被濫用為假按鈕，透過將其 href 設定為 # 或 javascript:void(0) 以防止頁面重新整理，然後監聽它們的 click 事件。
這些虛假的 href 值在複製/拖動連結、在新標籤頁/視窗中開啟連結、書籤，或在 JavaScript 載入、出錯或停用時導致意外行為。它們還會向輔助技術（如螢幕閱讀器）傳達不正確的語義。
請改用 <button>。一般來說，你只應將超連結用於導航到真實的 URL。
外部連結和連結到非 HTML 資源
透過 target="_blank" 在新標籤頁/視窗中開啟的連結，或指向下載檔案的連結，應指示在遵循連結時會發生什麼。
患有低視力、藉助螢幕閱讀技術導航或有認知問題的人可能會在新標籤頁、視窗或應用程式意外開啟時感到困惑。較舊的螢幕閱讀軟體甚至可能不會宣佈此行為。
在新標籤頁/視窗中開啟的連結
<a target="_blank" href="https://www.wikipedia.org">
Wikipedia (opens in new tab)
</a>
結果
連結到非 HTML 資源
如果使用圖示來表示連結行為，請確保它具有 alt 屬性以描述其用途。如果圖示丟失，alt 屬性的內容仍將傳達連結的行為。
<p>
<a href="https://www.wikipedia.org/" target="_blank">
Wikipedia
<img src="new-tab.svg" width="14" alt="(Opens in new tab)" />
</a>
<br />
<a href="2017-annual-report.ppt">
2017 annual report
<img src="powerpoint.svg" width="14" alt="(PowerPoint file)" />
</a>
</p>
<p>
<a href="https://www.wikipedia.org/" target="_blank">
Wikipedia
<img src="missing-icon.svg" width="14" alt="(Opens in new tab)" />
</a>
<br />
<a href="2017-annual-report.ppt">
2017 annual report
<img src="missing-icon.svg" width="14" alt="(PowerPoint file)" />
</a>
</p>
結果
跳過連結
跳過連結是儘可能早地放置在 <body> 內容中的連結，指向頁面主要內容的開頭。通常，CSS 會將跳過連結隱藏在螢幕外，直到獲得焦點。
<body>
<a href="#content" class="skip-link">Skip to main content</a>
<header>…</header>
<!-- The skip link jumps to here -->
<main id="content"></main>
</body>
.skip-link {
position: absolute;
top: -3em;
background: white;
}
.skip-link:focus {
top: 0;
}
結果
跳過連結允許鍵盤使用者繞過在多個頁面中重複的內容，例如頭部導航。
跳過連結對於藉助輔助技術（如開關控制、語音命令或口杖/頭杖）進行導航的人特別有用，因為透過重複連結的操作可能很費力。
大小和鄰近度
大小
互動式元素，例如連結，應提供足夠大的區域，以便輕鬆啟用它們。這有助於各種人群，包括那些有運動控制問題的人和使用不精確輸入（如觸控式螢幕）的人。建議最小尺寸為 44×44 CSS 畫素。
散文內容中的純文字連結不受此要求限制，但仍然最好確保有足夠的文字被超連結以方便啟用。
臨近度
互動式元素，例如在視覺上靠近的連結，應有空間將它們分開。間距有助於有運動控制問題的人，他們否則可能會不小心啟用錯誤的互動式內容。
可以使用 CSS 屬性（如 margin）建立間距。
示例
連結到絕對 URL
HTML
<a href="https://www.mozilla.com">Mozilla</a>
結果
連結到相對 URL
HTML
<a href="//example.com">Scheme-relative URL</a>
<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
<a href="p">Directory-relative URL</a>
<a href="./p">Directory-relative URL</a>
<a href="../p">Parent-directory-relative URL</a>
結果
連結到同一頁面上的元素
<!-- <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" 或空片段（href="#"）連結到當前頁面頂部，如 HTML 規範中所定義。
連結到電子郵件地址
要建立在新郵件中開啟使用者電子郵件程式的連結，請使用 mailto: 方案。
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
結果
連結到電話號碼
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>
結果
tel: 連結行為因裝置功能而異。
- 移動裝置自動撥號。
- 大多數作業系統都有可以撥打電話的程式，例如 Skype 或 FaceTime。
- 網站可以使用
registerProtocolHandler撥打電話，例如web.skype.com。 - 其他行為包括將號碼儲存到聯絡人，或將號碼傳送到其他裝置。
有關 tel: URL 方案的語法、附加功能和其他詳細資訊，請參閱 RFC 3966。
使用 download 屬性將 <canvas> 儲存為 PNG
要將 <canvas> 元素的內容儲存為影像，你可以建立一個連結，其中 href 是使用 JavaScript 建立的 canvas 資料作為 data: URL，並且 download 屬性提供下載的 PNG 檔案的檔名。
帶有儲存連結的示例繪圖應用程式
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: white;
border: 1px dashed;
}
a {
display: inline-block;
background: #6699cc;
color: white;
padding: 5px 10px;
}
JavaScript
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;
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()),
);
結果
安全和隱私
<a> 元素可能對使用者的安全和隱私產生影響。有關資訊，請參閱Referer 頭：隱私和安全問題。
在不使用 rel="noreferrer" 和 rel="noopener" 的情況下使用 target="_blank" 會使網站容易受到 window.opener API 利用攻擊，儘管請注意，在較新的瀏覽器版本中，設定 target="_blank" 隱式提供了與設定 rel="noopener" 相同的保護。有關詳細資訊，請參閱瀏覽器相容性。
技術摘要
規範
| 規範 |
|---|
| HTML # a-元素 |
瀏覽器相容性
載入中…