HTML <a> 標簽

定義和用法

<a> 標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。

<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目的地。

默認情況下，鏈接將在所有瀏覽器中顯示如下：

  • 未訪問過的鏈接是帶有下劃線和藍色的
  • 已訪問過的鏈接是帶有下劃線和紫色的
  • 正在訪問的鏈接是帶有下劃線和紅色的

提示：您可能已經注意到了，CodeW3C.com 站點內的鏈接外觀與默認的鏈接外觀非常不同。您可以使用 CSS 偽類 向文本超鏈接添加復雜而多樣的樣式。

另請參閱：

HTML 教程：HTML 鏈接

HTML DOM 參考手冊：Anchor 對象

CSS 教程：鏈接樣式

術語解釋

什么是超文本？

實例

例子 1

創建指向 codew3c.com 的鏈接：

<a href="https://www.codew3c.com">訪問 codew3c.com!</a>

親自試一試

例子 2

如何使用圖像作為鏈接：

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="w3logo.png" width="400" height="225">
</a>

親自試一試

例子 3

如何在新的瀏覽器窗口中打開鏈接：

<a href="https://www.codew3c.com" target="_blank">訪問 codew3c.com!</a>

親自試一試

例子 4

如何鏈接到電子郵件地址：

<a href="mailto:someone@example.com">發送電子郵件</a>

親自試一試

例子 5

如何鏈接到電話號碼：

<a href="tel:+8613888888888">+86 138 8888 8888</a>

親自試一試

例子 6

如何鏈接到同一頁上的另一個部分：

<a href="#section2">轉到第二章</a>

親自試一試

例子 7

如何鏈接到 JavaScript：

<a href="javascript:alert('Hello World!');">執行 JavaScript</a>

親自試一試

提示和注釋

提示：如果 <a> 標簽沒有 href 屬性，它只是一個超鏈接的占位符。

提示：被鏈接的頁面通常顯示在當前瀏覽器窗口中，除非您規定了另一個目標（用 target 屬性）。

提示：請使用 CSS 設置鏈接的樣式：CSS 鏈接 和 CSS 按鈕。

屬性

屬性 值 描述
download 文件名 規定當用戶單擊超鏈接時將下載目標。
href URL 規定鏈接指向的頁面的 URL。
hreflang 語言代碼 規定被鏈接文檔的語言。
media 媒體查詢 規定被鏈接文檔是為何種媒介/設備優化的。
ping URL 列表 規定以空格分隔的 URL 列表，當鏈接被訪問時，瀏覽器將發送帶有 ping 正文的 POST 請求（在后臺發送）。通常用于跟蹤。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 規定要與鏈接一起發送的引用信息。
rel
  • alternate
  • author
  • bookmark
  • external
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • noopener
  • prev
  • search
  • tag
 規定當前文檔和被鏈接文檔之間的關系。
target
  • _blank
  • _parent
  • _self
  • _top
 規定在何處打開被鏈接文檔。
type 媒體類型 規定被鏈接文檔的媒體類型。

全局屬性

<a> 標簽還支持 HTML 中的全局屬性。

事件屬性

<a> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <a> 元素：

a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}
a:link:active, a:visited:active {
  color: (internal value);
}

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持