在HTML文件設置超文本鏈接（hyper text link）

本文簡單介紹在HTML文件中設置超文本鏈接的方法，以及注意事項，也就是<a>標記的使用要點。

在網頁中出現超文本鏈接（以下簡稱超鏈接），意味著瀏覽者可以藉由滑鼠/游標的簡單點擊，開啟另一個網頁，或是快速跳到同一網頁的特定段落。這實現了網際網路「互聯」的概念，對文本來說也實現了「概念」的互聯！

<a>標記的設置是HTML語言的基礎，初學者都不可能錯過它。用多了之後漸漸熟悉，<a>標記除了可以鏈接網址，還可以用來開啟電子郵件程式、（手機）開啟電話撥號功能。


<a>標記的基本功能：建立超文本鏈接

*<a>標記最常用來鏈接不同的網頁，讓瀏覽者能從當前頁面透過「點擊」，開啟另一個網頁（目標頁）。
*用<a>標記不是只能指向另一個.html文件（網頁），也能指向一張圖片的存放網址、指向一個PDF檔案的存放網址。
*<a>標記可以用來指向一個電子郵件地址，而瀏覽者點擊之後，會開啟電子郵件程式，讓人可以寫郵件到該電子郵件地址。
*<a>標記可以用來指向一個電話號碼，而點擊之後，可以進行撥號（限手機）。


<a>標記的寫法

*建立超鏈接，使用的是<a></a>標記，基本寫法為：

<a href="https://www.abcd.com/newlink.html">GO TO NEW LINK</a>

其中，被<a></a>圍住的文本（GO TO NEW LINK），在網頁上會顯示為變色、有下划線，讓人看得出來它是個「超鏈接」，可以點擊。
單箭頭內的文字符號則不會顯示在網頁上，它是用來告訴瀏覽器，該去哪裡抓取目標頁。


href屬性說明

*href是<a>標記的「屬性」，用來指明目標網頁的存放位置和文件名稱。
*href是hyper text reference的縮減寫法，意思就是「超文本引用」。
*href的表示方式，有「絕對路徑」和「相對路徑」兩種（注1）。
絕對路徑：
需寫出完整的網址，例如：<a href="https://www.abcd.com/newlink.html">GO TO NEW LINK</a>
相對路徑：
如果目標網頁就存在同一個網站內部（本範例為www.abcd.com），那麼可以選擇使用相對路徑來表示目標網頁的存放位置，
例如：<a href="../images/newlink.html">GO TO NEW LINK</a>

*<a></a>標記若圍住一段文字，點擊這段文字就能開啟目標網頁。
*<a></a>也可以圍住圖片，點擊圖片可以開啓目標網頁。
*建立電子郵件超鏈接的寫法：<a href="mailto:myname@domain.com">E-mail me!</a>。設置好之後，別忘了測試一下。
*建立電話超鏈接：<a href="tel:+886-2-23456789">+886-2-23456789</a>。設置好之後，別忘了測試一下。


title屬性說明

*title是用來注明「目標網頁」的標題名稱。
 例如：<a href="newworld.html" title="A new world">Go to a new world</a>
*設置title屬性後，當滑鼠/游標移到超鏈接文字的上方時，會浮現title的內容。
*title文字的設置，可以作為盲人識讀的輔助（據說可以用語音讀出內容，但我個人沒有試過）。


target屬性說明

*target是用來設置「目標網頁」的開啟窗口，主要分為「在原有視窗開啟」，以及「新增視窗開啟」兩種。
在原有視窗開啟：
<a href="newpage.html" target="_self">go to new page</a>
target="_self"是在當前視窗開啓目標網頁，這代表會離開（關閉）當前網頁，以目標網頁取代。
新增視窗開啟：
<a href="newpage.html" target="_blank">go to new page</a>
target="_blank"是要新增一個瀏覽器視窗（或標籤頁）來開啓目標網頁。這代表當前網頁會保留著。
*如果不特別設定target屬性，通常點擊超鏈接後，瀏覽器會在原有的視窗開啓目標網頁，也就是會覆蓋原來的網頁頁面。某些SEO（搜索引擎優化）觀點認為，這樣會使網站的「跳出率」提高，不利於網站的優化，因此有些人建議，把超鏈接都設置為新增視窗開啟比較好。
*現在，不同的瀏覽器似乎會自訂網頁開啓規則，例如360瀏覽器會自動以新的標籤頁開啓目標網頁，而Chrome則會讓目標網頁覆蓋原有網頁。


id屬性說明（進階概念）

*注意，id不是<a>標記的屬性，而是HTML其他標記的屬性，但是id屬性的使用，與<a>息息相關。
*id可以說是一個用來「做記號」的屬性。我們先在目標網頁的某處HTML標記中使用id屬性，用id定義一個名稱（例如id="detail"）。另外在當前網頁的某個<a>標記處標註這個id名稱，就可以實現「點擊後跳轉到目標網頁中的特定位置」。
*使用方法（以id="detail"為例）：
1. 假設當前網頁是here.html，目標網頁是there.html。
2. 在目標網頁there.html的某個特定段落，是我們要跳轉到達的位置，在該處的某個標記中加入id="detail"，例如：<h2 id="detail">標題內容</h2>。
3. 在當前網頁here.html文件中，某個<a>標記的網址末尾，加上該id名稱：<a href="there.html#detail">See detail</a>。
4. 如此一來，點擊當前網頁中的超鏈接「See detail」，就會開啟目標網頁，顯示<h2>的所在位置。

*任何標記(如<h3>、<p>、<blockquote>)都可以加上id屬性，給予一個名稱，使其成為超鏈接點擊後的目標位置。
*一個網頁文件中可以設置多個id名稱，但同個網頁中的id名稱不能重複。
*實際運用上，可以利用id="top"，設置「回到頁面頂部」的鏈接。
*id名稱的開頭必須是字母，後面可接字母、數字或符號，但中間不能有空格。



注1：相對路徑和絕對路徑的區別
用途
相對路徑：用來指向網站內部的網頁或文件。
絕對路徑：用來指向外部網站的網頁或文件，但也可以用來指向網站內部的網頁或文件。
優點
相對路徑：只要網站的網頁文件、圖片存放位置不變，相對路徑可保持有效。若是把整個網站的文件夾搬移到新的網址（例如更換域名），相對路徑還是有效，超連結也還是有效，不必修改。
絕對路徑：方便設置。
缺點
相對路徑：必須寫出目標網頁相對於當前網頁的路徑和位置，對不熟悉的人來說容易出錯。
絕對路徑：萬一域名需要變動，所有內部網頁的絕對路徑都會失效，必須重新設置。