3.1 超鏈接

超鏈接（hyperlink）是網(wǎng)頁(yè)互相聯(lián)系的橋梁，超鏈接可以看作一個(gè)“熱點(diǎn)”，它可以從當(dāng)前網(wǎng)頁(yè)定義的位置跳轉(zhuǎn)到其他位置，包括當(dāng)前頁(yè)的某個(gè)位置，以及Internet、本地硬盤或局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖像等多媒體文件。

當(dāng)網(wǎng)頁(yè)中包含超鏈接時(shí)，其外觀形式為彩色（一般為藍(lán)色）且?guī)庐嬀€的文字或圖像。單擊這些文本或圖像，可跳轉(zhuǎn)到相應(yīng)位置。鼠標(biāo)指針指向超鏈接時(shí)，將變成手形。

3.1.1 超鏈接簡(jiǎn)介

1.超鏈接的分類

根據(jù)超鏈接目標(biāo)文件的不同，超鏈接可分為頁(yè)面超鏈接、錨點(diǎn)超鏈接、電子郵件超鏈接等；根據(jù)超鏈接單擊對(duì)象的不同，超鏈接可分為文字超鏈接、圖像超鏈接、圖像映射等。

2.路徑

創(chuàng)建超級(jí)鏈接時(shí)必須了解鏈接與被鏈接文本的路徑。在一個(gè)網(wǎng)站中，路徑通常有3種表示方式：絕對(duì)路徑、根目錄相對(duì)路徑和文檔目錄相對(duì)路徑。

（1）絕對(duì)路徑

絕對(duì)路徑是指包括服務(wù)器規(guī)范（網(wǎng)頁(yè)一般使用http://）在內(nèi)的完全路徑。例如，http://www.adobe.com/support/dreamweaver/contents.html就是一個(gè)絕對(duì)路徑。

必須使用絕對(duì)路徑，才能鏈接到其他服務(wù)器上的文檔。盡管對(duì)本地鏈接（即到同一站點(diǎn)內(nèi)文檔的鏈接）也可使用絕對(duì)路徑鏈接，但不建議采用這種方式，因?yàn)槿绻麑⒋苏军c(diǎn)移到其他域中，則所有本地絕對(duì)路徑鏈接都將斷開。對(duì)本地鏈接使用相對(duì)路徑，也便于在本地站點(diǎn)內(nèi)移動(dòng)文件。

（2）根目錄相對(duì)路徑

根目錄相對(duì)路徑是指從站點(diǎn)根文件夾到被鏈接文檔經(jīng)過的路徑。站點(diǎn)上所有公開的文件都存放在站點(diǎn)的根目錄下。站點(diǎn)根目錄相對(duì)路徑以一個(gè)正斜杠（/）開始，例如，/support/tips.htm是文件（tips.htm）的站點(diǎn)根目錄相對(duì)路徑，該文件位于站點(diǎn)根文件夾的support子文件夾中。

（3）文檔目錄相對(duì)路徑

文檔目錄相對(duì)路徑是指以當(dāng)前文檔所在位置為起點(diǎn)到被鏈接文檔經(jīng)過的路徑，這種方式適合于創(chuàng)建本地鏈接。文檔相對(duì)路徑的基本思想是省略當(dāng)前文檔和所鏈接的文檔都相同的絕對(duì)URL部分，而只提供不同的部分。

3.1.2 超鏈接的應(yīng)用

1.錨點(diǎn)標(biāo)簽<a>…</a>

錨點(diǎn)（anchor）標(biāo)簽由<a>定義，它在網(wǎng)頁(yè)上建立超文本鏈接。通過單擊一個(gè)詞、句或圖像，可從此處轉(zhuǎn)到另一個(gè)鏈接資源（目標(biāo)資源），這個(gè)目標(biāo)資源有唯一的地址（URL）。具有以上特點(diǎn)的詞、句或圖像就稱為熱點(diǎn)。<a>標(biāo)簽的格式為：

href屬性為超文本引用，它的值為一個(gè)URL，是目標(biāo)資源的有效地址。如果要?jiǎng)?chuàng)建一個(gè)不鏈接到其他位置的空超鏈接，可用“#”代替URL。target屬性設(shè)定鏈接被單擊后所要開始窗口的方式，可選值為：_blank，_parent，_self，_top。

2.指向其他頁(yè)面的鏈接

創(chuàng)建指向其他頁(yè)面的鏈接，就是在當(dāng)前頁(yè)面與其他相關(guān)頁(yè)面之間建立超鏈接。根據(jù)目標(biāo)文件與當(dāng)前文件的目錄關(guān)系，有4種寫法。注意，應(yīng)該盡量采用相對(duì)路徑。

（1）鏈接到同一目錄內(nèi)的網(wǎng)頁(yè)文件

格式為：

其中，“目標(biāo)文件名”是鏈接所指向的文件。

（2）鏈接到下一級(jí)目錄中的網(wǎng)頁(yè)文件

格式為：

（3）鏈接到上一級(jí)目錄中的網(wǎng)頁(yè)文件

格式為：

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

（4）鏈接到同級(jí)目錄中的網(wǎng)頁(yè)文件

格式為：

表示先退到上一級(jí)目錄中，然后再進(jìn)入目標(biāo)文件所在的目錄。

【演練3-1】制作夢(mèng)想櫥柜頁(yè)面之間的鏈接，當(dāng)前頁(yè)3-1.html中包含兩個(gè)鏈接分別指向注冊(cè)頁(yè)和登錄頁(yè)，如圖3-1所示。

代碼如下：

3.指向書簽的鏈接

書簽就是用<a>標(biāo)簽對(duì)網(wǎng)頁(yè)元素作一個(gè)記號(hào)，其功能類似于用于固定船的錨，所以書簽也稱錨記或錨點(diǎn)。如果頁(yè)面中有多個(gè)書簽鏈接，對(duì)不同目標(biāo)元素要設(shè)置不同的書簽名。書簽名在<a>標(biāo)簽的name屬性中定義，格式為：

（1）指向頁(yè)面內(nèi)書簽的鏈接

要在當(dāng)前頁(yè)面內(nèi)實(shí)現(xiàn)書簽鏈接，需要定義兩個(gè)標(biāo)簽：一個(gè)為超鏈接標(biāo)簽，另一個(gè)為書簽標(biāo)簽。超鏈接標(biāo)簽的格式為：

即單擊“熱點(diǎn)文本”，將跳轉(zhuǎn)到“記號(hào)名”開始的網(wǎng)頁(yè)元素。

【演練3-2】制作指向頁(yè)面內(nèi)書簽的鏈接，在頁(yè)面下方的“關(guān)于企業(yè)”文本前定義一個(gè)書簽“about”，當(dāng)單擊頁(yè)面頂部的“關(guān)于企業(yè)”鏈接時(shí)，將跳轉(zhuǎn)到頁(yè)面下方的關(guān)于企業(yè)位置處，如圖3-2所示。

代碼如下：

【說明】在驗(yàn)證本例效果時(shí)，可以把瀏覽器縮放到只顯示頁(yè)面上半部分信息的大小，然后單擊頂部的“關(guān)于企業(yè)”鏈接，就可以看到頁(yè)面自動(dòng)定位到下方的“關(guān)于企業(yè)”位置處。

（2）指向其他頁(yè)面書簽的鏈接

要在其他頁(yè)面內(nèi)實(shí)現(xiàn)書簽鏈接，需要定義兩個(gè)標(biāo)簽：一個(gè)為當(dāng)前頁(yè)面的超鏈接標(biāo)簽，另一個(gè)為跳轉(zhuǎn)頁(yè)面的書簽標(biāo)簽。當(dāng)前頁(yè)面的超鏈接標(biāo)簽的格式為：

即單擊“熱點(diǎn)文本”，將跳轉(zhuǎn)到目標(biāo)頁(yè)面“記號(hào)名”開始的網(wǎng)頁(yè)元素。

【演練3-3】制作指向其他頁(yè)面書簽的鏈接，在頁(yè)面info.html的“關(guān)于企業(yè)”文本前定義一個(gè)書簽“about”，當(dāng)單擊當(dāng)前頁(yè)面3-3.html中頁(yè)面頂部的“關(guān)于企業(yè)”鏈接時(shí)，將跳轉(zhuǎn)到頁(yè)面info.html中“關(guān)于企業(yè)”位置處，如圖3-3所示。

當(dāng)前頁(yè)面3-3.html的代碼如下：

跳轉(zhuǎn)頁(yè)面info.html的代碼如下：

4.指向下載文件的鏈接

如果鏈接到的文件不是HTML文件，則該文件將作為下載文件。指向下載文件的鏈接格式為：

例如，下載一個(gè)購(gòu)物向?qū)У膲嚎s包文件guide.rar，可以建立如下鏈接：

5.指向電子郵件的鏈接

單擊指向電子郵件的鏈接，將打開默認(rèn)的電子郵件程序，如FoxMail、Outlook Express等，并自動(dòng)填寫郵件地址。指向電子郵件鏈接的格式為：

例如，E-mail地址是cat@163.com，可以建立如下鏈接：

3.1.3 案例——制作夢(mèng)想櫥柜服務(wù)指南頁(yè)面

【演練3-4】制作夢(mèng)想櫥柜服務(wù)指南及下載的頁(yè)面，本例文件包括3-4.html、2-5.html兩個(gè)展示網(wǎng)頁(yè)和guide.rar下載文件。在瀏覽器中顯示的效果如圖3-4和圖3-5所示。

代碼如下：

【說明】

①當(dāng)把鼠標(biāo)指針移到超鏈接上時(shí)，鼠標(biāo)指針變?yōu)槭中危瑔螕簟俺Ｒ妴栴}解答”鏈接則打開指定的網(wǎng)頁(yè)2-5.html。如果在<a>標(biāo)簽中省略屬性target，則在當(dāng)前窗口中顯示；當(dāng)target="_blank"時(shí)，將在新的瀏覽器窗口中顯示。

②在圖3-5所示的網(wǎng)頁(yè)中單擊下載熱點(diǎn)“夢(mèng)想櫥柜服務(wù)指南”，將打開“文件下載”對(duì)話框，將該文件下載到指定位置。