title | slug |
---|---|
<a>:超連結元素 |
Web/HTML/Element/a |
{{HTMLSidebar}}
<a>
HTML 元素(或稱錨點元素),具有其 href
屬性,用於創建指向網頁、文件、電子郵件地址、同一頁面中的位置或任何其他 URL 可定位的東西。
每個 <a>
元素內的內容應該指示連結的目的地。如果存在 href
屬性,則在焦點位於 <a>
元素上時按下 Enter 鍵將激活它。
{{EmbedInteractiveExample("pages/tabbed/a.html", "tabbed-shorter")}}
此元素的屬性包括全域屬性。
-
download
-
: 導致瀏覽器將連結的 URL 視為下載。可與或不與
filename
值一起使用:-
沒有值時,瀏覽器將從各種來源生成的文件名/擴展名提供建議:
-
filename
:定義值可建議作為文件名。/
和\
字符將轉換為底線(_
)。檔案系統可能禁止文件名中的其他字符,因此如果需要,瀏覽器將調整建議的名稱。
[!NOTE]
-
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 的短信文字消息 - 儘管網頁瀏覽器可能不支持其他 URL 方案,但網站可以使用
registerProtocolHandler()
進行設置
-
-
hreflang
- : 指示連結 URL 的人類語言的提示。沒有內建功能。允許的值與全域
lang
屬性相同。
- : 指示連結 URL 的人類語言的提示。沒有內建功能。允許的值與全域
-
ping
- : URL 的空格分隔列表。當點擊連結時,瀏覽器將向這些 URL 發送 {{HTTPMethod("POST")}} 請求,內容為
PING
。通常用於跟蹤。
- : URL 的空格分隔列表。當點擊連結時,瀏覽器將向這些 URL 發送 {{HTTPMethod("POST")}} 請求,內容為
-
referrerpolicy
-
: 跟隨連結時發送的引用者的程度。
no-referrer
:不發送 {{HTTPHeader("Referer")}} 標頭。no-referrer-when-downgrade
:不發送 {{HTTPHeader("Referer")}} 標頭至沒有 {{Glossary("TLS")}}({{Glossary("HTTPS")}})的來源。origin
:發送的引用者將僅限於引用頁面的來源:其協定、{{Glossary("host", "主機")}}和{{Glossary("port", "通訊埠")}}。origin-when-cross-origin
:發送給其他來源的引用者將僅限於協定、主機和端口。對同一來源的導航仍將包含路徑。same-origin
:對於{{Glossary("Same-origin policy", "同一來源")}},將發送引用者,但跨來源請求將不包含引用者信息。strict-origin
:僅在協定安全級別保持不變時(HTTPS→HTTPS)發送文件的源作為引用者,但不要將其發送給不太安全的目的地(HTTPS→HTTP)。strict-origin-when-cross-origin
(默認值):對於同一來源請求,發送完整的 URL;僅在協定安全級別保持不變時(HTTPS→HTTPS)發送源;對於不太安全的目的地(HTTPS→HTTP),不發送標頭。unsafe-url
:引用者將包括來源和路徑(但不包括片段、密碼或用戶名)。此值不安全,因為它將來自 TLS 保護資源的來源和路徑洩露給不安全的來源。
-
-
rel
- : 連結 URL 的關係,作為空格分隔的連結類型。
-
target
-
: 要在何處顯示連結 URL,作為瀏覽上下文(一個選項卡、窗口或 {{HTMLElement("iframe")}})的名稱。以下關鍵字對於加載 URL 的位置具有特殊意義:
_self
:當前瀏覽上下文。(默認)_blank
:通常是一個新選項卡,但用戶可以配置瀏覽器以打開新窗口。_parent
:當前瀏覽上下文的父級。如果沒有父級,則與_self
行為相同。_top
:最上層的瀏覽上下文。具體來說,這意味著當前上下文的祖先中的「最高」上下文。如果沒有祖先,則與_self
行為相同。_unfencedTop
:允許嵌入的有圍欄框架導航到最頂層框架(即超出有圍欄框架根的遍歷,與其他保留目標不同)。請注意,如果在有圍欄框架上下文之外使用此選項,則導航仍將成功,但它不會像保留關鍵字那樣運作。
[!NOTE] 將
target="_blank"
設置在<a>
元素上,隱含提供了與設置rel="noopener"
相同的rel
行為,它不設置window.opener
。
-
-
type
- : 提示連結 URL 的格式,使用 {{Glossary("MIME type", "MIME 類型")}}。沒有內建功能。
-
charset
{{Deprecated_Inline}}-
: 指示連結 URL 的 {{Glossary("character encoding")}}。
[!NOTE] 這個屬性已棄用,不應該被作者使用。請在連結的 URL 上使用 HTTP {{HTTPHeader("Content-Type")}} 標頭。
-
-
coords
{{Deprecated_Inline}}- : 與
shape
屬性一起使用。逗號分隔的座標列表。
- : 與
-
name
{{Deprecated_Inline}}-
: 用於在頁面中定義可能的目標位置。在 HTML 4.01 中,
id
和name
都可以在<a>
上使用,只要它們具有相同的值。[!NOTE] 請改用全域屬性
id
。
-
-
rev
{{Deprecated_Inline}}- : 指定反向連結;與形狀屬性相反。由於非常混亂而被棄用。
-
shape
{{Deprecated_Inline}}-
: 圖像地圖中超連結區域的形狀。
[!NOTE] 請改用 {{HTMLElement("area")}} 元素代替圖像地圖。
-
<a href="https://www.mozilla.com">Mozilla</a>
{{EmbedLiveSample('鏈接到絕對 URL')}}
<a href="//example.com">Scheme-relative URL</a>
<a href="/zh-TW/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>
a {
display: block;
margin-bottom: 0.5em;
}
{{EmbedLiveSample('鏈接到相對 URL')}}
<!-- <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>
{{EmbedLiveSample('鏈接到同一頁面上的元素')}}
Note
你可以使用 href="#top"
或空片段(href="#"
)來鏈接到當前頁面的頂部,如 HTML 規範中所定義。
要創建鏈接,讓用戶可以使用他們的電子郵件程序打開新消息,請使用 mailto:
方案:
<a href="mailto:[email protected]">Send email to nowhere</a>
{{EmbedLiveSample('鏈接到電子郵件地址')}}
有關 mailto:
URL 的詳細信息,例如包括主題或正文,請參見電子郵件鏈接或 {{RFC(6068)}}。
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>
{{EmbedLiveSample('鏈接到電話號碼')}}
tel:
鏈接的行為因設備能力而異:
- 手機設備會自動撥打號碼。
- 大多數操作系統都有可以撥打電話的程序,如 Skype 或 FaceTime。
- 網站可以使用 {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler")}} 來打電話,例如
web.skype.com
。 - 其他行為包括將號碼保存到聯繫人中,或將號碼發送到另一個設備。
有關 tel:
URL 方案的語法、其他功能和詳細信息,請參見 {{RFC(3966)}}。
要將 {{HTMLElement("canvas")}} 元素的內容保存為圖像,你可以創建一個鏈接,其中 href
是使用 JavaScript 創建的 data:
URL 的畫布數據,而 download
屬性提供下載的 PNG 文件的文件名:
<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>
html {
font-family: sans-serif;
}
canvas {
background: #fff;
border: 1px dashed;
}
a {
display: inline-block;
background: #69c;
color: #fff;
padding: 5px 10px;
}
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()),
);
{{EmbedLiveSample('具有處存鏈接的範例繪畫應用程式', '100%', '400')}}
<a>
元素可能對用戶的安全性和隱私造成影響。有關信息,請參見 Referer 標頭:隱私和安全問題。
在不使用 rel="noreferrer"
和 rel="noopener"
的情況下使用 target="_blank"
會使網站容易受到 {{domxref("window.opener")}} API 攻擊,但請注意,在新版瀏覽器中,設置 target="_blank"
隱含地提供了與設置 rel="noopener"
相同的保護機制。詳細信息請參見瀏覽器相容性。
鏈接內容應指示鏈接的目的地,即使是在上下文之外。
一個常見的錯誤是只將「點擊此處」或「這裡」之類的詞作為鏈接:
<p>Learn more about our products <a href="/products">here</a>.</p>
{{EmbedLiveSample('無障礙性差的弱鏈接文字')}}
幸運的是,這是一個容易解決的問題,而且實際上比無法訪問的版本還要短!
<p>Learn more <a href="/products">about our products</a>.</p>
{{EmbedLiveSample('強鏈接文字')}}
輔助軟件有捷徑可以列出頁面上的所有鏈接。然而,強鏈接文字有益於所有用戶——「列出所有鏈接」的快捷方式模擬了視覺用戶快速掃描頁面的方式。
常常將錨點元素誤用為假按鈕,將它們的 href
設置為 #
或 javascript:void(0)
以防止頁面刷新,然後監聽它們的 click
事件。
這些虛假的 href
值在複製/拖動鏈接、在新標籤/窗口中打開鏈接、書籤或當 JavaScript 加載、錯誤或禁用時會引起意外行為。它們也向輔助技術(如螢幕閱讀器)傳遞了不正確的語義。
請改用 {{HTMLElement("button")}}。一般來說,你應該僅將超鏈接用於導航到實際 URL。
通過 target="_blank"
在新標籤/窗口中打開的鏈接,或者指向下載文件的鏈接應該指示當鏈接被點擊時會發生什麼。
視力受損的人、使用螢幕閱讀技術進行導航的人或存在認知問題的人,在新標籤、窗口或應用程序意外打開時可能會感到困惑。較舊的螢幕閱讀軟件甚至可能不會宣告這種行為。
<a target="_blank" href="https://www.wikipedia.org">
Wikipedia (opens in new tab)
</a>
{{EmbedLiveSample('在新標籤/窗口中打開的鏈接')}}
<a href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a>
如果使用圖標來表示鏈接行為,請確保它具有 alt 文本:
<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>
{{EmbedLiveSample('鏈接到非 HTML 資源')}}
跳轉鏈接是一個盡可能放在 {{HTMLElement("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;
}
{{EmbedLiveSample('跳轉鏈接')}}
跳轉鏈接讓使用鍵盤的用戶可以跳過在多個頁面中重複出現的內容,例如頭部導航。
對於使用輔助技術,如切換控制、語音命令或口杖/頭桿進行導航的人來說,跳轉鏈接尤其有用,因為移動過程中重複鏈接的行為可能很費勁。
互動元素,例如連結,應該提供足夠大的區域,以便輕鬆地啟動它們。這有助於各種人,包括那些有運動控制問題的人以及使用不精確輸入(例如觸摸螢幕)的人。建議的最小尺寸為 44×44 CSS 像素。
在散文內容中僅包含文本的鏈接不受此要求的限制,但確保有足夠的文本被超鏈接以便輕鬆啟動仍然是一個好主意。
放置在視覺上相鄰的互動元素,例如連結,應該有空間將它們分開。間距有助於運動控制問題的人,否則他們可能會意外啟動錯誤的互動內容。
間距可以使用 CSS 屬性如 {{CSSxRef("margin")}} 創建。
內容類型 | 流內容、段落型內容、 互動型內容、捫及內容。 |
---|---|
允許的內容 | 透明內容模型,除了沒有子孫可以是互動型內容或一個 a 元素,並且沒有子孫可以具有指定的 tabindex 屬性。 |
標籤省略 | 不允許,開始和結束標籤都是必須的。 |
允許的父元素 |
任何接受流內容的元素,但不包括其他 <a> 元素。
|
隱含的 ARIA 角色 |
當存在 href 屬性時為 link ,否則為
generic
|
允許的 ARIA 角色 |
當存在 當不存在
|
DOM 介面 | {{DOMxRef("HTMLAnchorElement")}} |
{{Specifications}}
{{Compat}}
- {{HTMLElement("link")}} 類似於
<a>
,但用於對用戶不可見的元數據超鏈接。 - {{CSSxRef(":link")}} 是一個 CSS 虛擬類,將匹配
<a>
元素,其中href
屬性中的 URL 尚未被用戶訪問過。 - {{CSSxRef(":visited")}} 是一個 CSS 虛擬類,將匹配
<a>
元素,其中href
屬性中的 URL 曾經被用戶訪問過。 - {{CSSxRef(":any-link")}} 是一個 CSS 虛擬類,將匹配具有
href
屬性的<a>
元素。 - 文字片段是添加到 URL 中的用戶代理指令,允許內容作者鏈接到頁面上的特定文本,而不需要 ID。