<a>：錨元素
<a> HTML 元素（或錨元素），透過 其href 屬性，建立到網頁、檔案、電子郵件地址、同一頁面中的位置或 URL 可以定址的任何其他內容的超連結。
每個<a>中的內容應該指示連結的目標。如果存在href屬性，則在<a>元素上聚焦時按 Enter 鍵將啟用它。
試一試
屬性
此元素的屬性包括 全域性屬性。
attributionsrc實驗性-
指定您希望瀏覽器傳送
Attribution-Reporting-Eligible頭部。在伺服器端，這用於觸發在響應中傳送Attribution-Reporting-Register-Source頭部，以註冊 基於導航的歸因來源。當用戶點選連結時，瀏覽器會儲存與基於導航的歸因來源關聯的源資料（如
Attribution-Reporting-Register-Source響應頭部中提供）。有關更多詳細資訊，請參閱 歸因報告 API。您可以設定此屬性的兩個版本
- 布林值，即僅使用
attributionsrc名稱。這表示您希望將Attribution-Reporting-Eligible頭部發送到與href屬性指向的同一伺服器。當您在同一伺服器上處理歸因源註冊時，這很好用。 - 包含一個或多個 URL 的值，例如這在請求的資源不在您控制的伺服器上，或者您只想在不同的伺服器上處理歸因源註冊的情況下很有用。在這種情況下，您可以將一個或多個 URL 指定為html
attributionsrc="https://a.example/register-source https://b.example/register-source"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-
在遵循連結時傳送多少 referrer。
no-referrer：不會發送Referer頭部。no-referrer-when-downgrade：不會將Referer頭部發送到沒有 TLS（HTTPS）的 來源。origin：傳送的 referrer 將限制為引用頁面的來源：其 方案、主機和 埠。origin-when-cross-origin：傳送到其他來源的 referrer 將限制為方案、主機和埠。同一來源的導航仍將包含路徑。same-origin：將為 同源 傳送 referrer，但跨源請求將不包含 referrer 資訊。strict-origin：僅在協議安全級別保持不變（HTTPS→HTTPS）時傳送文件的來源作為 referrer，但不要將其傳送到安全性較低的目的地（HTTPS→HTTP）。strict-origin-when-cross-origin（預設）：在執行同源請求時傳送完整的 URL，僅在協議安全級別保持不變（HTTPS→HTTPS）時傳送來源，並且不傳送任何頭部到安全性較低的目的地（HTTPS→HTTP）。unsafe-url：referrer 將包含來源和路徑（但不包含 片段、密碼或 使用者名稱）。此值不安全，因為它會將來自 TLS 保護資源的來源和路徑洩漏到不安全的來源。
rel-
連結的 URL 作為空格分隔的連結型別的關係。
target-
在何處顯示連結的 URL，作為瀏覽上下文（選項卡、視窗或
<iframe>）的名稱。以下關鍵字對載入 URL 的位置具有特殊含義_self：當前瀏覽上下文。（預設）_blank：通常是一個新標籤頁，但使用者可以配置瀏覽器改為開啟一個新視窗。_parent：當前瀏覽上下文的父瀏覽上下文。如果沒有父級，則表現為_self。_top：最頂層的瀏覽上下文。具體來說，這意味著“最高”上下文是當前上下文的祖先。如果沒有祖先，則表現為_self。_unfencedTop：允許嵌入的 fenced frame 導航頂級 frame（即遍歷圍欄 frame 的根目錄之外，與其他保留的目的地不同）。請注意，如果在圍欄 frame 上下文之外使用此選項，導航仍將成功，但它不會像保留關鍵字那樣起作用。
注意：在
<a>元素上設定target="_blank"會隱式提供與設定rel="noopener"相同的rel行為，後者不會設定window.opener。 type-
使用 MIME 型別 暗示連結的 URL 的格式。沒有內建功能。
已棄用的屬性
無障礙訪問
強連結文字
連結內的內容應指示連結指向的位置，即使脫離上下文也是如此。
不可訪問的，弱連結文字
一個令人遺憾的常見錯誤是隻連結“點選此處”或“此處”等詞語。
<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 資源的連結
<a href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a>
如果使用圖示來表示連結行為，請確保它具有替代文字
<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>
結果
跳過連結
跳過連結是在<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: #fff;
}
.skip-link:focus {
top: 0;
}
結果
跳過連結允許鍵盤使用者繞過在多個頁面中重複的內容，例如標題導航。
對於使用輔助技術（如開關控制、語音命令或嘴棒/頭部魔杖）進行導航的人來說，跳過連結特別有用，因為遍歷重複連結的操作可能很費力。
尺寸和鄰近度
示例
連結到絕對 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 規範中所定義。
連結到電子郵件地址
連結到電話號碼
<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 建立的 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: #fff;
border: 1px dashed;
}
a {
display: inline-block;
background: #69c;
color: #fff;
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 標準 # the-a-element |
瀏覽器相容性
BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。