# 鏈接標簽 鏈接（hyperlink）是互聯網的核心。它允許用戶在頁面上，從一個網址跳轉到另一個網址，從而把所有資源聯系在一起。 URL 是鏈接指向的地址。鏈接不僅可以指向另一個網頁，也可以指向文本、圖像、文件等資源。可以這樣說，所有互聯網上的資源，都可以通過鏈接訪問。 ## 1.`<a>` 鏈接通過`<a>`標簽表示，用戶點擊后，瀏覽器會跳轉到指定的網址。下面就是一個典型的鏈接。 ```html <a href="https://www.dodoke.com/">渡課首頁</a> ``` 上面代碼就定義了一個超級鏈接。瀏覽器顯示“渡課首頁”，文字下面默認會有下劃線，表示這是一個鏈接。用戶點擊后，瀏覽器跳轉到`href`屬性指定的網址。 `<a>`標簽內部不僅可以放置文字，也可以放置其他元素，比如段落、圖像、多媒體等等。 ~~~html <a href="https://noi.dodoke.com/"> <img src="http://noi.dodoke.com/images/logo.png"> </a> ~~~ 上面代碼中，`<a>`標簽內部就是一個圖像。用戶點擊圖像，就會跳轉到指定網址。 - **href 屬性** `href`屬性給出鏈接指向的網址。它的值應該是一個 URL 或者錨點。 上文已經給出了完整 URL 的例子，下面是錨點的例子。 ~~~html <a href="#demo">示例</a> ~~~ 上面代碼中，`href`屬性的值是`#`加上錨點名稱。點擊后，瀏覽器會自動滾動，停在當前頁面里面`demo`錨點所在的位置。 - **target 屬性** `target`屬性指定如何展示打開的鏈接。它可以是在指定的窗口打開，也可以在`<iframe>`里面打開。 ~~~html <p><a href="http://www.dodoke.com" target="_blank">渡課首頁</a></p> <p><a href="http://noi.dodoke.com" target="_blank">渡課 Online Judge</a></p> ~~~ 上面代碼中，兩個鏈接都在空白窗口打開。首先點擊鏈接`渡課首頁`，瀏覽器新建一個窗口，在該窗口打開`www.dodoke.com`。然后，用戶又點擊鏈接`渡課 Online Judge`，瀏覽器同樣新建一個窗口，在該窗口打開`noi.dodoke.com`。 `target`屬性的值也可以是以下四個關鍵字之一。 * `_self`：當前窗口打開，這是默認值。 * `_blank`：新窗口打開。 * `_parent`：上層窗口打開，這通常用于從父窗口打開的子窗口，或者`<iframe>`里面的鏈接。如果當前窗口沒有上層窗口，這個值等同于`_self`。 * `_top`：頂層窗口打開。如果當前窗口就是頂層窗口，這個值等同于`_self`。 ## 2.郵件鏈接 鏈接也可以指向一個郵件地址，使用`mailto`協議。用戶點擊后，瀏覽器會打開本機默認的郵件程序，讓用戶向指定的地址發送郵件。 ~~~html <a href="mailto:contact@dodoke.com">聯系我們</a> ~~~ 上面代碼中，鏈接就指向郵件地址。點擊后，瀏覽器會打開一個郵件地址，讓你可以向`contact@dodoke.com`發送郵件。 除了郵箱，郵件協議還允許指定其他幾個郵件要素。 * `subject`：主題 * `cc`：抄送 * `bcc`：密送 * `body`：郵件內容 使用方法是將這些郵件要素，以查詢字符串的方式，附加在郵箱地址后面。 ~~~html <a href="mailto:contact@dodoke.com?cc=admin@dodoke.com&subject=hello&body=say%20hello">發送郵件</a> ~~~ 上面代碼中，郵件鏈接里面不僅包含了郵箱地址，還包含了`cc`、`subject`、`body`等郵件要素。這些要素的值需要經過 URL 轉義，比如空格轉成`%20`。 不指定郵箱也是允許的，就像下面這樣。這時用戶自己在郵件程序里面，填寫想要發送的郵箱，通常用于郵件分享網頁。 ~~~html <a href="mailto:">告訴朋友</a> ~~~ ## 3.電話鏈接 如果是手機瀏覽的頁面，還可以使用`tel`協議，創建電話鏈接。用戶點擊該鏈接，會喚起電話，可以進行撥號。 ~~~html <a href="tel:12345678900">撥打電話</a> ~~~ 上面代碼在手機中，點擊鏈接會喚起撥號界面，可以直接撥打指定號碼。