2.7 超鏈接

HTML的主要優點在于能夠輕而易舉地實現互聯網上的信息訪問、資源共享。HTML可以鏈接到其他的網頁、圖像、多媒體、電子郵件地址、可下載的文件等。

2.7.1 超鏈接概述

1.超鏈接的定義

超鏈接（Hyperlink）是指從一個網頁指向一個目標的鏈接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。

超鏈接是一個網站的精髓，它在本質上屬于網頁的一部分，通過超鏈接將各個網頁鏈接在一起后，才能真正構成一個網站。超鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖像和動畫等，從而將網站建設成一個豐富多彩的多媒體世界。

當網頁中包含超鏈接時，其外觀形式為彩色（一般為藍色）且帶下畫線的文字或圖像。單擊這些文本或圖像，可跳轉到相應位置。鼠標指針指向超鏈接時，將變成手形。

2.超鏈接的分類

根據目標文件的不同，可將超鏈接分為頁面超鏈接、錨點超鏈接、電子郵件超鏈接等；根據單擊對象的不同，可將超鏈接分為文字超鏈接、圖像超鏈接、圖像映射超鏈接等。

3.路徑

創建超鏈接之前必須先了解鏈接與被鏈接文本的路徑。在一個網站中，路徑通常有3種表示方式：絕對路徑、根目錄相對路徑和文檔目錄相對路徑。

（1）絕對路徑

絕對路徑是包括通信協議名、服務器名、路徑及文件名的完全路徑。如鏈接清華大學信息科學技術學院首頁，絕對路徑是http://www.sist.tsinghua.edu.cn/docinfo/index.jsp。如果站點之外的文檔在本地計算機上，比如鏈接D盤book目錄下的default.html文件，那么它的路徑就是file:///D:/book/default.html。這種完整地描述文件位置的路徑也是絕對路徑。

（2）根目錄相對路徑

根目錄相對路徑的根是指本地站點文件夾（根目錄），以“/”開頭，路徑是從當前站點的根目錄開始計算。比如一個網頁鏈接或引用站點根目錄下images目錄中的一個圖像文件a.gif，用根目錄相對路徑表示就是/images/a.gif。

（3）文檔目錄相對路徑

文檔目錄相對路徑是指當前文檔所在的文件夾，也就是以當前文檔所在的文件夾為基礎開始計算路徑。文檔目錄相對路徑適合用于創建網站內部鏈接。它是以當前文件所在的路徑為起點，進行相對文件的查找。

2.7.2 超鏈接的應用

1.創建錨點

錨點與超鏈接的文字可以在同一個頁面，也可以在不同的頁面。在實現錨點超鏈接之前，需要先創建錨點，通過創建的錨點才能對頁面的內容進行引導與跳轉。創建錨點的語法格式如下。

其中，錨點的名稱可以是數字或英文字母，也可以是兩者混合。在同一頁面中可以有多個錨點，但錨點名稱不能相同。創建超鏈接時，href屬性定義了這個超鏈接所指的目標地址，也就是路徑。如果要創建一個不鏈接到其他位置的空超鏈接，可用“#”代替URL。

target屬性用于設置超鏈接被單擊后所要開始打開窗口的方式，有以下4種方式。

_blank：在新窗口中打開被鏈接文檔。

_self：默認。在相同的框架中打開被鏈接文檔。

_parent：在父框架集中打開被鏈接文檔。

_top：在整個窗口中打開被鏈接文檔。

2.在不同頁面中使用錨點

在不同頁面中使用錨點，就是在當前頁面與其他相關頁面之間創建超鏈接。根據目標文件與當前文件的目錄關系，有4種寫法。注意，超鏈接應該盡量采用相對路徑。

（1）鏈接到同一目錄內的網頁文件

格式如下。

其中，“目標文件名”是超鏈接所指向的文件。

（2）鏈接到下一級目錄中的網頁文件

格式如下。

（3）鏈接到上一級目錄中的網頁文件

格式如下。

其中，“../”表示退到上一級目錄中。

（4）鏈接到同級目錄中的網頁文件

格式如下。

表示先退到上一級目錄中，再進入目標文件所在的目錄。

3.書簽超鏈接

在瀏覽頁面時，如果頁面篇幅很長，需要不斷地拖動滾動條，給瀏覽帶來不便。為了使瀏覽者既可以從頭閱讀到尾，又可以很快找到自己感興趣的特定內容進行部分閱讀，這個時候就可以通過書簽超鏈接來實現。當瀏覽者單擊頁面上的某一“標簽”，就能自動跳到網頁相應的位置進行閱讀，給瀏覽者帶來方便。

書簽就是用<a>標簽對網頁元素做一個記號，其功能類似于用于固定船的錨。如果頁面中有多個書簽超鏈接，對不同目標元素要設置不同的書簽名。書簽名在<a>標簽的name屬性中定義，格式如下。

（1）頁面內的書簽超鏈接

要在當前頁面內實現書簽超鏈接，需要定義兩個標簽：一個為超鏈接標簽，另一個為書簽標簽。超鏈接標簽的格式如下。

即單擊“熱點文本”，將跳轉到“記號名”開始的網頁元素。

（2）其他頁面的書簽超鏈接

書簽超鏈接還可以在不同頁面間進行鏈接。當單擊書簽超鏈接標題，頁面會根據超鏈接中的href屬性所指定的地址，將網頁跳轉到目標地址中書簽名稱所表示的內容。要在其他頁面內實現書簽超鏈接，需要定義兩個標簽：一個為當前頁面的超鏈接標簽，另一個為跳轉頁面的書簽標簽。當前頁面的超鏈接標簽的格式如下。

即單擊“熱點文本”，將跳轉到目標頁面“記號名”開始的網頁元素。

4.下載文件超鏈接

當需要在網站中提供資料下載功能時，就需要為資料文件提供下載鏈接。如果超鏈接指向的不是一個網頁文件，而是其他文件，如zip、rar、mp3、exe文件等，單擊超鏈接時就會下載相應的文件。格式如下。

例如，下載一個包裝指南的壓縮包文件guide.rar，可以創建如下超鏈接。

5.電子郵件超鏈接

網頁中的電子郵件地址超鏈接，可以使網頁瀏覽者將有關信息以電子郵件的形式發送給電子郵件的接收者。通常情況下，接收者的電子郵件地址位于網頁頁面的底部。當用戶單擊電子郵件超鏈接，系統會自動啟動默認的電子郵件軟件，打開一個郵件窗口。格式如下。

例如，E-mail地址是angel@love.com，可以創建如下超鏈接。

2.7.3 案例——制作愛心包裝下載專區頁面

【例2-19】 制作愛心包裝下載專區頁面。本例文件2-19.html和2-19-doc.html在瀏覽器中的顯示效果如圖2-21、2-22所示。

頁面2-19.html的代碼如下。

頁面2-19-doc.html的代碼如下。

【說明】在下載專區頁面中，將鼠標指針移動到下載文檔的超鏈接時，鼠標指針變為手形，單擊文檔標題超鏈接，則打開指定的網頁2-19-doc.html。如果在<a>標簽中省略屬性target，則在當前窗口中顯示；當target="_blank"時，將在新的瀏覽器窗口中顯示。