HTML <a> href 屬性

HTML <a> 標簽

定義和用法

href 屬性規定鏈接指向的頁面的 URL。

href 屬性的值可以是任何有效文檔的相對或絕對 URL，包括片段標識符和 JavaScript 代碼段。如果用戶選擇了 <a> 標簽中的內容，那么瀏覽器會嘗試檢索并顯示 href 屬性指定的 URL 所表示的文檔，或者執行 JavaScript 表達式、方法和函數的列表。

如果 href 屬性不存在，則 <a> 標簽將不是超鏈接。

提示：您可以使用 href="#top" 或 href="#" 鏈接到當前頁面的頂部！

制作文本鏈接

一個引用其他文檔的簡單 <a> 標簽可以是下列形式：

<a href="http://www.codew3c.com/index.html">CodeW3C.com 在線教程</a>

瀏覽器用特殊效果顯示短語“CodeW3C.com 在線教程”（通常是帶下劃線的藍色文本），這樣用戶就會知道它是一個可以鏈接到其他文檔的超鏈接。就像這樣：

CodeW3C.com 在線教程

用戶還可以利用瀏覽器中的選項來自己指定文本顏色、設置鏈接前和鏈接后鏈接文本的顏色。

提示：可以使用 CSS 偽類向文本超鏈接添加復雜而多樣的樣式。

制作圖像鏈接

更復雜的錨還可以包含圖像。下面這個 LOGO 是一個圖像鏈接，點擊該圖像，可以返回 W3school 的首頁：

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

上面的代碼會為 CodeW3C.com 的 LOGO 添加一個返回首頁的超鏈接：

CodeW3C.com 在線教程

大多數圖形瀏覽器都會在作為錨的一部分的圖像周圍放置特殊的邊框。通過在 <img> 標簽中把圖像的 border 屬性設置為 0 可以刪除超鏈接的邊框。也可以使用 CSS 的邊框屬性來全局性地改變元素的邊框樣式。

實例

例子 1

href 屬性規定鏈接的目的地：

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

親自試一試

例子 2

如何使用圖像作為鏈接：

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

親自試一試

例子 3

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

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

親自試一試

例子 4

如何鏈接到電話號碼：

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

親自試一試

例子 5

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

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

親自試一試

例子 6

如何鏈接到 JavaScript：

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

親自試一試

語法

<a href="URL">

屬性值

值 描述
URL

鏈接的 URL。

可能的值：

  • 絕對 URL - 指向另一個網站（比如 href="http://www.example.com/index.html"）
  • 相對 URL - 指向網站內的文件（比如 href="index.html"）
  • 鏈接到頁面中帶有指定 id 的元素（比如 href="#section2"）
  • 其他協議（比如 https://、ftp://、mailto:、file: 等）
  • 腳本（比如 href="javascript:alert('Hello');"）

瀏覽器支持

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

HTML <a> 標簽