HTML連結

連結幾乎在所有網頁都找的到。連結允許用戶從頁面點擊到另一個頁面

HTML連結-超連結

HTML連結是超連結。 超連結是一個文本，或者可以點擊圖像，並跳轉到另一個文檔。

HTML連結-語法

在HTML中，連結是用標籤a來定義：

<a href="url">連結文字</a>

例子

<a href="http://www.w3schools.com/html/">照訪我們的HTML教學</a>
<!-- href屬性指定目標地址（http://www.w3schools.com/html/）
鏈接文本是可以看見的部分（照訪我們的HTML教學）。
點擊連結文字，會傳送到指定的地址。 -->

本地連結

上面的例子中使用絕對URL（一個完整的Web地址）。 本地鏈接（鏈接到同一網站）指定到相對URL（不含http://www....）。

<a href="html_images.asp">HTML Images</a>

HTML連結-顏色

當你把滑鼠移動到連結上，會有兩件事發生

1. 滑鼠箭頭變成一個小手
2. 連結文字的顏色會改變

在默認情況下，連結會出現這樣（在所有瀏覽器）：

1. 未訪問過的連結是藍色並有底線
2. 訪問過的連結是紫色並有底線
3. 正在點擊的連結是紅色並有底線

你可以改變默認顏色，使用樣式：

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}                 <!--一般連結綠色-->
a:visited {color:pink; background-color:transparent; text-decoration:none}                  <!--參觀過的連結粉色-->
a:hover   {color:red; background-color:transparent; text-decoration:underline}              <!--正在執行的連結紅色-->
a:active  {color:yellow; background-color:transparent; text-decoration:underline}           <!--當滑鼠移到連結上黃色-->
</style>

HTML連結-目標屬性

目標屬性指定在哪裡打開文檔。 這個例子在新的瀏覽器或新的頁籤打開文檔。

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

在同一頁面打開連結的文檔：

<a href="http://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

HTML連結-以圖片為連結

這是使用圖片為連結：

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>

HTML連結-創建一個書籤

HTML書籤是用來讓讀者跳轉到網頁中的特定部分。 如果你的網站有很長的頁面，建立書籤是好的。 建立書籤，您必須首先創建書籤，然後添加一個鏈接。 當點擊該鏈接時，頁面將滾動到書籤的位置。

首先先創建書籤：

<h2 id="tips">Useful Tips Section</h2>

接著連結到書籤：

<a href="#tips">Visit the Useful Tips Section</a>

或者連結到另一個頁面的書籤：

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>