張鵬 帶你一周hold住htmlcss 第11講 html超鏈接應用 ！ (貼圖)
一、超文本（HyperText）
標記語(yǔ)言的真正威力在于其收集能力，它可以將收集來(lái)的文檔組合成一個(gè)完整的信息庫，并且可以將文檔庫與世界上的其他文檔集合鏈接起來(lái)夏普550 錯誤代碼H3-02 。
這樣的話(huà)，讀者不僅可以完全控制文檔在屏幕上的顯示，還可以通過(guò)超鏈接來(lái)控制瀏覽信息的順序夏普550 錯誤代碼H3-02 。這就是 HTML 和 XHTML 中的 “HT” - 超文本（hypertext），就是它將整個(gè) Web 網(wǎng)絡(luò )連接起來(lái)。
二、超鏈接（Hyper Link）
1.超鏈接定義
超鏈接（Hyperlink）：是網(wǎng)頁(yè)中指向一個(gè)目標的連接關(guān)系，這個(gè)目標可以是網(wǎng)頁(yè)、網(wǎng)頁(yè)中的具體位置、圖片、郵件地址、文件、應用程序等夏普550 錯誤代碼H3-02 。
鏈接標記的屬性
021yin.com 然后回車(chē)，會(huì )打開(kāi)網(wǎng)頁(yè)教學(xué)網(wǎng)網(wǎng)站的主頁(yè)面。可以看到，頁(yè)面中有多個(gè)欄目，多條新聞等，最上方不同的欄目就是文字鏈接。
鏈接標記雖然在網(wǎng)站設計制作中占有不可替代的地位，但是其標記只有一個(gè)，那就是;a;標記夏普550 錯誤代碼H3-02 。本站介紹的鏈接應用都是基于;a;標記基礎上的。
鏈接標記的屬性見(jiàn)下表
關(guān)于路徑
每一個(gè)文件都有自己的存放位置和路徑，理解一個(gè)文件到要鏈接的那個(gè)文件之間的路徑關(guān)系是創(chuàng )建鏈接的根本夏普550 錯誤代碼H3-02 。url—統一資源定位器，指的就是每一個(gè)網(wǎng)站都具有的獨立的地址。同一個(gè)網(wǎng)站下的每一個(gè)網(wǎng)頁(yè)都屬于同一個(gè)地址之下，但是當創(chuàng )建網(wǎng)頁(yè)時(shí)，不可能也不需要為每一個(gè)鏈接都輸入完全的地址。我們只需要確定當前文檔同站點(diǎn)根目錄之間的相對路徑關(guān)系。因此鏈接可以分為以下3種：
絕對路徑
021yin.com
相對路徑
如news/default.htm
根路徑
如/website/news/default.htm
在了解這三種地址形式前先要理解另外兩個(gè)概念：內部鏈接和外部鏈接
內部和外部都是相對于站點(diǎn)文件夾而言，如果鏈接指向的是站點(diǎn)文件夾之內的文件，就是內部鏈接夏普550 錯誤代碼H3-02 。如果鏈接指向站點(diǎn)文件夾之外的，就被稱(chēng)做外部鏈接。在添加外部鏈接的時(shí)候，將用到下面所講的絕對地址；而添加內部鏈接的時(shí)候，將用到下面所講的根目錄相對地址和文件相對地址。
下面分別介紹這3種鏈接：
絕對路徑
絕對路徑為文件提供完全的路徑，包括適應的協(xié)議，如 。一般常見(jiàn)的有：
021yin.com
ftp://202.136.254.1
當鏈接到其它網(wǎng)站中的文件時(shí)，必須使用絕對鏈接夏普550 錯誤代碼H3-02 。
相對路徑
相對鏈接最適合網(wǎng)站的內部鏈接夏普550 錯誤代碼H3-02 。只要是同一網(wǎng)站之下的，即使不在同一個(gè)目錄下，相對鏈接也非常合適。文件相對地址是書(shū)寫(xiě)內部鏈接的理想形式。只要是處于站點(diǎn)文件夾之內，相對地址可以自由地在文件之間構建鏈接。這種地址形式利用的是構建鏈接的兩個(gè)文件之間的相對關(guān)系，不受站點(diǎn)文件夾所處服務(wù)器位置的影響。因此這種書(shū)寫(xiě)形式省略了絕對地址中的相同部分。這樣做的優(yōu)點(diǎn)是：站點(diǎn)文件夾所在的服務(wù)器地址發(fā)生改變時(shí)，文件夾的所有內部鏈接(如果采用此種地址形式)都不會(huì )出問(wèn)題。
相對鏈接的使用方法為：
如果鏈接到同一目錄下，則只需輸入要鏈接文檔的名稱(chēng)夏普550 錯誤代碼H3-02 。
要鏈接到下一級目錄中的文件，只需先輸入目錄名，然后加" / "再輸入文件名夏普550 錯誤代碼H3-02 。
如鏈接到上一級目錄中的文件，則先輸入"…/ "，再輸入目錄名、文件名夏普550 錯誤代碼H3-02 。
根路徑
根目錄相對地址同樣適應于創(chuàng )建內部鏈接，但大多數情況下，不建議使用此種地址形式夏普550 錯誤代碼H3-02 。它在下列情況下使用：
當站點(diǎn)的規模非常大夏普550 錯誤代碼H3-02 ，防置于幾個(gè)服務(wù)器上時(shí)
當一個(gè)服務(wù)器上同時(shí)放置幾個(gè)站點(diǎn)時(shí)
根目錄相對地址的書(shū)寫(xiě)形式也很簡(jiǎn)單，首先以一個(gè)斜杠開(kāi)頭，代表根目錄，然后書(shū)寫(xiě)文件夾名，最后書(shū)寫(xiě)文件名夏普550 錯誤代碼H3-02 。根路徑以" / "開(kāi)始，然后是根目錄下的目錄名。
制作內部鏈接
所謂內部鏈接，指的是在同一個(gè)網(wǎng)站內部，不同的html頁(yè)面之間的鏈接關(guān)系夏普550 錯誤代碼H3-02 。在建立網(wǎng)站內部鏈接的時(shí)候，要考慮到使鏈接具有清晰的導航結構，使用戶(hù)方便地找到所需內容的html文件。
下面我們建立3個(gè)網(wǎng)頁(yè)頁(yè)面，在第一個(gè)8-1.htm網(wǎng)頁(yè)頁(yè)面中，制作到8-1-1.htm和8-1-2.htm兩個(gè)頁(yè)面的鏈接，并在兩個(gè)被鏈接的頁(yè)面中制作返回到8-1.htm頁(yè)面的鏈接夏普550 錯誤代碼H3-02 。3個(gè)頁(yè)面的目錄關(guān)系如下所示：
8-1.htm和8-1-1.htm存放在網(wǎng)站的根目錄下，8-1-2.htm存放在test目錄下夏普550 錯誤代碼H3-02 。
基本語(yǔ)法
;a href="File＿name";鏈接文字;/a;
語(yǔ)法解釋
通過(guò)href屬性指定地址，File＿name為要鏈接文件的路徑，"鏈接文字"為鼠標單擊的文字內容夏普550 錯誤代碼H3-02 。
文件范例：8-1.htm
通過(guò);a;標記建立兩個(gè)鏈接，分別鏈接到另外兩個(gè)html頁(yè)面中夏普550 錯誤代碼H3-02 。
01 ;!-- ------------------------------ --;
02 ;!-- 文件范例：8-1.htm --;
03 ;!-- 文件說(shuō)明：建立內部鏈接 --;
04 ;!-- ------------------------------ --;
05 ;html;
06 ;head;
07 ;title;建立內部鏈接;/title;
08 ;/head;
09 ;body;
10 ;h1;主流的網(wǎng)頁(yè)設計軟件;/h1;
11 ;p;目前，網(wǎng)頁(yè)技術(shù)進(jìn)入了一個(gè)新的階段，現在的網(wǎng)頁(yè)再也不是圖片的堆積和枯燥無(wú)味的文本了，人們現在追求的是網(wǎng)頁(yè)的動(dòng)態(tài)效果和交互性夏普550 錯誤代碼H3-02 。而Macromedia公司的網(wǎng)頁(yè)設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁(yè)設計的杰出代表，其最新版本mx 2004繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁(yè)設計和網(wǎng)站建設的需要。;/p;
12 ;a href="8-1-1.htm";網(wǎng)頁(yè)制作軟件Dreamweaver mx 2004;/a;
13 ;br;
14 ;a href="test/8-1-2.htm";網(wǎng)頁(yè)動(dòng)畫(huà)軟件Flash mx 2004;/a;
15 ;/body;
16 ;/html;
文件說(shuō)明
第12行定義了到8-1-1.htm同級頁(yè)面的鏈接，第14行定義了到test目錄下的8-1-2.htm頁(yè)面的鏈接夏普550 錯誤代碼H3-02 。
文件范例：8-1-1.htm
這個(gè)文件是"網(wǎng)頁(yè)制作軟件Dreamweaver mx 2004"頁(yè)面，通過(guò);a;標記建立返回到 8-1.htm頁(yè)面的鏈接夏普550 錯誤代碼H3-02 。
01 ;!-- ------------------------------ --;
02 ;!-- 文件范例：8-1-1.htm --;
03 ;!-- 文件說(shuō)明：內部鏈接文件之一 --;
04 ;!-- ------------------------------ --;
05 ;html;
06 ;head;
07 ;title;內部鏈接文件之一;/title;
08 ;/head;
09 ;body;
10 ;h1;Dreamweaver mx 2004;/h1;
11 Dreamweaver mx 2004作為網(wǎng)頁(yè)設計軟件的代表，具有站點(diǎn)管理和頁(yè)面制作兩大核心功能夏普550 錯誤代碼H3-02 。如果你也擁有織夢(mèng)的理想，那么這個(gè)軟件無(wú)疑是幫助你實(shí)現夢(mèng)想的最好手段。完全的可視化編輯、優(yōu)秀的代碼控制、完整的站點(diǎn)規劃和管理、超乎尋常的動(dòng)態(tài)效果設計，這些都為設計人員提供了得心應手的途徑。mx版本的軟件將動(dòng)態(tài)網(wǎng)站和傳統的靜態(tài)頁(yè)面功能進(jìn)行了更進(jìn)一步的整合，無(wú)疑為制作網(wǎng)站提供了更多的實(shí)現方式。
12 ;p;
13 ;a href="8-1.htm";返回;/a;
14 ;/body;
15 ;/html;
文件說(shuō)明
第13行定義了到8-1.htm同級頁(yè)面的鏈接夏普550 錯誤代碼H3-02 。
基本語(yǔ)法
;a href="File＿name" target="value";鏈接文字;/a;
語(yǔ)法解釋
通過(guò)target定義目標窗口夏普550 錯誤代碼H3-02 ，value的取值如下表所示
10 ;h1;主流的網(wǎng)頁(yè)設計軟件;/h1;
11 目前，網(wǎng)頁(yè)技術(shù)進(jìn)入了一個(gè)新的階段，現在的網(wǎng)頁(yè)再也不是圖片的堆積和枯燥無(wú)味的文本了，人們現在追求的是網(wǎng)頁(yè)的動(dòng)態(tài)效果和交互性夏普550 錯誤代碼H3-02 。而Macromweaver公司的網(wǎng)頁(yè)設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁(yè)設計的杰出代表，其最新版本mx 2004繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁(yè)設計和網(wǎng)站建設的需要。;p;
12 ;a href="8-1-1.htm" target="_self";網(wǎng)頁(yè)制作軟件Dreamweaver mx 2004;/a;
13 ;br;
14 ;a href="test/8-1-2.htm" target="_blank";網(wǎng)頁(yè)動(dòng)畫(huà)軟件Flash mx 2004;/a;
15 ;/body;
16 ;/html;
文件說(shuō)明
第12行定義了在原窗口顯示鏈接頁(yè)面，第14行定義了在新開(kāi)窗口顯示鏈接頁(yè)面夏普550 錯誤代碼H3-02 。
建立書(shū)簽鏈接
在瀏覽頁(yè)面的時(shí)候，如果頁(yè)面的內容較多、頁(yè)面過(guò)長(cháng)，瀏覽的時(shí)候需要不斷拖動(dòng)滾動(dòng)條，很不方便，如果要尋找特定的內容，就更加不方便夏普550 錯誤代碼H3-02 。這時(shí)如果能在該網(wǎng)頁(yè)或另外一個(gè)頁(yè)面上建立目錄，瀏覽者單擊目錄上的項目就能自動(dòng)跳到網(wǎng)頁(yè)相應的位置進(jìn)行閱讀，應該是件很方便的事，并且還可以在頁(yè)面中設定諸如"返回首頁(yè)"的鏈接。這就稱(chēng)為書(shū)簽鏈接。
建立書(shū)簽鏈接分為兩步：一是建立書(shū)簽，二是為書(shū)簽建立鏈接夏普550 錯誤代碼H3-02 。
下面來(lái)制作一個(gè)包含網(wǎng)頁(yè)設計三劍客內容的軟件介紹頁(yè)面，并為其中的每一個(gè)軟件建立一個(gè)書(shū)簽，這個(gè)書(shū)簽就是隨后將要跳轉轉的位置夏普550 錯誤代碼H3-02 。也就是說(shuō)，這個(gè)書(shū)簽就確定了一個(gè)頁(yè)面內部的鏈接導引依據。
基本語(yǔ)法
;a name="name";文字;/a;
10 ;h1;主流的網(wǎng)頁(yè)設計軟件;/h1;
11 ;a name="dw";;h3;Dreamweaver mx 2004;/h3;;/a;
12 Dreamweaver mx 2004作為網(wǎng)頁(yè)設計軟件的代表，具有站點(diǎn)管理和頁(yè)面制作兩大核心功能夏普550 錯誤代碼H3-02 。如果你也擁有織夢(mèng)的理想，那么這個(gè)軟件無(wú)疑是幫助你實(shí)現夢(mèng)想的最好手段。完全的可視化編輯、優(yōu)秀的代碼控制、完整的站點(diǎn)規劃和管理、超乎尋常的動(dòng)態(tài)效果設計，這些都為設計人員提供了得心應手的途徑。mx版本的軟件將動(dòng)態(tài)網(wǎng)站和傳統的靜態(tài)頁(yè)面功能進(jìn)行了更進(jìn)一步的整合，無(wú)疑為制作網(wǎng)站提供了更多的實(shí)現方式。
13 ;p;
14 ;a name="fl";;h3;Flash mx 2004;/h3;;/a;
15 Flash mx 2004作為網(wǎng)頁(yè)矢量交互動(dòng)畫(huà)軟件的代表，提供了圖形繪制、動(dòng)畫(huà)制作和交互三大功能夏普550 錯誤代碼H3-02 。掌握了這個(gè)軟件的核心，也就有能力在網(wǎng)上沖浪的同時(shí)，充當一把閃客的角色。越來(lái)越多的個(gè)人、商業(yè)網(wǎng)站采用Flash技術(shù)，廣告banner、動(dòng)畫(huà)片頭、mtv、交互游戲，廣闊的應用為Flash的學(xué)習者提供了廣泛的發(fā)展平臺，學(xué)習Flash mx 2004軟件更是一個(gè)具有誘惑力的過(guò)程。
16 ;p;
17 ;a name="fw";;h3;Fireworks mx 2004;/h3;;/a;
18 Fireworks mx 2004作為網(wǎng)頁(yè)圖像設計軟件的代表，在繼承了前期版本圖形繪制、頁(yè)面特效功能的同時(shí)，大大地發(fā)展了位圖圖像方面的處理功能，這無(wú)疑使這個(gè)軟件有了更大的向Photoshop挑戰的資本，而其在網(wǎng)頁(yè)設計方面的諸多應用，又是無(wú)任何軟件可與之媲美夏普550 錯誤代碼H3-02 。與Dreamweaver mx 2004的整合使其在專(zhuān)業(yè)網(wǎng)站圖像設計過(guò)程中，早已并繼續扮演著(zhù)不可或缺的角色。
19 ;p;
20 ;/body;
21 ;/html;
文件說(shuō)明
第11、14、17行分別定義了3各段落標題文字的書(shū)簽名稱(chēng)dw、fl、fw夏普550 錯誤代碼H3-02 。
鏈接同一頁(yè)面中的書(shū)簽
下面我們就為制作的8-3.htm制作好鏈接，我們希望在頁(yè)面的起始位置制作3個(gè)鏈接，分別鏈接到每一個(gè)軟件介紹的位置上夏普550 錯誤代碼H3-02 。
基本語(yǔ)法
;a href="bookmark＿name";文字鏈接;/a;
語(yǔ)法解釋
bookmark＿name就是剛剛定義的書(shū)簽名稱(chēng)夏普550 錯誤代碼H3-02 。
10 ;h1;主流的網(wǎng)頁(yè)設計軟件;/h1;
11 ;a href="#dw";Dreamweaver mx 2004;/a;
12 ;a href="#fl";Flash mx 2004;/a;
13 ;a href="#fw";Fireworks mx 2004;/a;
14 ;a name="dw";;h3;Dreamweaver mx 2004;/h3;;/a;
15 Dreamweaver mx 2004作為網(wǎng)頁(yè)設計軟件的代表，具有站點(diǎn)管理和頁(yè)面制作兩大核心功能夏普550 錯誤代碼H3-02 。如果你也擁有織夢(mèng)的理想，那么這個(gè)軟件無(wú)疑是幫助你實(shí)現夢(mèng)想的最好手段。完全的可視化編輯、優(yōu)秀的代碼控制、完整的站點(diǎn)規劃和管理、超乎尋常的動(dòng)態(tài)效果設計，這些都為設計人員提供了得心應手的途徑。mx 2004版本的軟件將動(dòng)態(tài)網(wǎng)站和傳統的靜態(tài)頁(yè)面功能進(jìn)行了更進(jìn)一步的整合，無(wú)疑為制作網(wǎng)站提供了更多的實(shí)現方式。
16 ;p;
17 ;a name="fl";;h3;Flash mx 2004;/h3;;/a;
18 Flash mx 2004作為網(wǎng)頁(yè)矢量交互動(dòng)畫(huà)軟件的代表，提供了圖形繪制、動(dòng)畫(huà)制作和交互三大功能夏普550 錯誤代碼H3-02 。掌握了這個(gè)軟件的核心，也就有能力在網(wǎng)上沖浪的同時(shí)，充當一把閃客的角色。越來(lái)越多的個(gè)人、商業(yè)網(wǎng)站采用Flash技術(shù)，廣告banner、動(dòng)畫(huà)片頭、mtv、交互游戲，廣闊的應用為Flash的學(xué)習者提供了廣泛的發(fā)展平臺，學(xué)習Flash mx 2004軟件更是一個(gè)具有誘惑力的過(guò)程。
19 ;p;
20 ;a name="fw";;h3;Fireworks mx 2004;/h3;;/a;
21 Fireworks mx 2004作為網(wǎng)頁(yè)圖像設計軟件的代表，在繼承了前期版本圖形繪制、頁(yè)面特效功能的同時(shí)，大大地發(fā)展了位圖圖像方面的處理功能，這無(wú)疑使這個(gè)軟件有了更大的向Photoshop挑戰的資本，而其在網(wǎng)頁(yè)設計方面的諸多應用，又是無(wú)任何軟件可與之媲美夏普550 錯誤代碼H3-02 。與Dreamweaver mx 2004的整合使其在專(zhuān)業(yè)網(wǎng)站圖像設計過(guò)程中，早已并繼續扮演著(zhù)不可或缺的角色。
22 ;p;
23 ;/body;
24 ;/html;
文件說(shuō)明
第11、12、13行分別定義了到3個(gè)段落標題文字的書(shū)簽鏈接夏普550 錯誤代碼H3-02 。
鏈接到其它頁(yè)面中的書(shū)簽
在頁(yè)面之間，也可以完成跳轉到另一頁(yè)面某一位置的過(guò)程夏普550 錯誤代碼H3-02 。這需要指定好鏈接的頁(yè)面和鏈接的書(shū)簽位置。
基本語(yǔ)法
;a href="File＿name#bookmark＿name";文字鏈接;/a;
語(yǔ)法解釋
File＿name是要跳轉到的頁(yè)面路徑，bookmark＿name是定義的書(shū)簽名稱(chēng)夏普550 錯誤代碼H3-02 。
10 ;h1;主流的網(wǎng)頁(yè)設計軟件;/h1;
11 目前，網(wǎng)頁(yè)技術(shù)進(jìn)入了一個(gè)新的階段，現在的網(wǎng)頁(yè)再也不是圖片的堆積和枯燥無(wú)味的文本了，人們現在追求的是網(wǎng)頁(yè)的動(dòng)態(tài)效果和交互性夏普550 錯誤代碼H3-02 。而Macromedia公司的網(wǎng)頁(yè)設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁(yè)設計的杰出代表，其最新版本mx 2004繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁(yè)設計和網(wǎng)站建設的需要。;p;
12 ;a href="8-4.htm#dw";Dreamweaver mx 2004;/a;
13 ;a href="8-4.htm#fl";Flash mx 2004;/a;
14 ;a href="8-4.htm#fw";Fireworks mx 2004;/a;
15 ;/body;
16 ;/html;
文件說(shuō)明
第12、13、14行分別定義了到8-4.htm頁(yè)面中3個(gè)段落標題文字的書(shū)簽鏈接夏普550 錯誤代碼H3-02 。
外部鏈接
所謂外部鏈接，指的是跳轉到當前網(wǎng)站外部，與其它網(wǎng)站中頁(yè)面或其它元素之間的鏈接關(guān)系夏普550 錯誤代碼H3-02 。這種鏈接在一般情況下需要書(shū)寫(xiě)絕對的鏈接地址。
制作外部鏈接的時(shí)候，使用url統一資源定位符來(lái)定位萬(wàn)維網(wǎng)信息，這種方式可以簡(jiǎn)潔、明了、準確地描述信息所在的地點(diǎn)夏普550 錯誤代碼H3-02 。最常見(jiàn)的url格式是"http://"，其它的格式如表所示。
鏈接到外部網(wǎng)站
頁(yè)面中的常用友情鏈接，經(jīng)常是單擊后可以訪(fǎng)問(wèn)別人的網(wǎng)站，達到互相交流信息的目的夏普550 錯誤代碼H3-02 。下面就是制作鏈接到外部網(wǎng)站的方法。
基本語(yǔ)法
;a href=";
語(yǔ)法解釋
" 。
021yin.com /icd/video.shtml?from=wl