3.2 超鏈接標記<a>

超鏈接是指當鼠標單擊一些文字、圖片或其他網頁元素時，瀏覽器會根據其指示載入一個新的頁面或跳轉到頁面的其他位置。超級鏈接除了可鏈接文本外，還可鏈接各種多媒體，如聲音、圖像、動畫等，通過它們可享受豐富多彩的多媒體世界。

建立超鏈接所使用的HTML標記為<a></a>。超鏈接最重要的有兩個要素：超鏈接指向的目標地址和設置為超鏈接的網頁元素。基本的超鏈接結構如下：

     <a href=URL>網頁元素</a>

3.2.1 設置文本和圖片的超鏈接

設置超鏈接的網頁元素通常使用文本和圖片。文本超鏈接和圖片超鏈接通過<a></a>標記實現，將文本或圖片放在<a>開始標記和</a>結束標記之間即可建立超鏈接。下面的實例將實現文本和圖片的超鏈接。

【例3.2】（實例文件：ch03\3.2.html）

在IE 11.0中預覽網頁效果，如圖3-3所示。用鼠標單擊圖片或文本即可實現鏈接跳轉的效果。

圖3-3 文本和圖片鏈接效果

默認情況下，為文本添加超鏈接，文本會自動增加下畫線，并且文本顏色變為藍色，單擊過的超鏈接，文本會變成暗紅色。圖片增加超鏈接以后，瀏覽器會自動給圖片加一個粗邊框。圖片和文本超鏈接的下畫線需要借助CSS樣式完成，這里不做介紹，詳見CSS部分。

3.2.2 超鏈接指向的目標類型

通過上面的講解，讀者會發現超鏈接的目標對象都是.html類型的文件。超鏈接不但可以鏈接到各種類型（如圖片文件、聲音文件、視頻文件、word等）的文件，還可以鏈接到其他網站、ftp服務器、電子郵件等。

1．鏈接到各種類型的文件

超鏈接<a>標記的href屬性指向鏈接的目標（可以是各種類型的文件）。如果是瀏覽器能夠識別的類型，會直接在瀏覽器中顯示；如果是瀏覽器不能識別的類型，在IE瀏覽器中會彈出文件下載對話框，如圖3-4所示。

圖3-4 IE中的文件下載對話框

【例3.3】（實例文件：ch03\3.3.html）

在IE 11.0中預覽網頁效果，如圖3-5所示，實現鏈接到HTML文件、圖片和Word文檔。

圖3-5 各種類型的鏈接

2．鏈接到其他網站或FTP服務器

在網頁中，友情鏈接也是推廣網站的一種方式。下列代碼實現了鏈接到其他網站或FTP服務器的功能。

     <a >鏈接百度</a>
     <a href="ftp://172.16.1.254">鏈接到FTP服務器</a>

3．設置電子郵件鏈接

在某些網頁中，當訪問者單擊某個鏈接以后，會自動打開電子郵件客戶端軟件（如Outlook或Foxmail等）向某個特定的E-mail地址發送郵件，這個鏈接就是電子郵件鏈接。電子郵件鏈接的格式如下：

     <a href="mailto:電子郵件地址" >網頁元素</a>

【例3.4】（實例文件：ch03\3.4.html）

在IE 11.0中預覽網頁效果，如圖3-6所示，實現了電子郵件鏈接。

圖3-6 鏈接到電子郵件

當讀者單擊【站長信箱】鏈接時，會自動彈出電子郵件客戶端窗口以編寫電子郵件，如圖3-7所示。

圖3-7 電子郵件客戶端窗口

3.2.3 設置以新窗口顯示超鏈接頁面

默認情況下，當單擊超鏈接時，目標頁面會在當前窗口中顯示并替換掉當前頁面的內容。如果要實現在單擊某個超鏈接后在新的瀏覽器窗口中顯示目標頁面，就需要使用<a>標記的target屬性。target屬性取值有4個，即_blank、_self、_top、_parent。由于HTML5不再支持框，所以_top、_parent這兩個取值不常用。本小節僅為讀者講解_blank、_self值。其中，_blank表示在新窗口中顯示超鏈接頁面。_self表示在當前窗口中顯示超鏈接頁面。當省略target屬性時，默認取值為_self。

【例3.5】（實例文件：ch03\3.5.html）

在IE 11.0中預覽網頁效果，如圖3-8所示。

圖3-8 新窗口頁面