HTML網頁超連結標籤_HTML/Xhtml_網頁製作

HTML網頁超連結標記學習教學
連結標記的屬性
連結是網頁頁面中最重要的元素之一，是一個網站的靈魂。一個網站是由多個頁面組成的，頁面之間依靠連結來確定相互的導航關係。每一個網頁都有獨一無二的地址，在英文中被稱為url(Uniform Resource Locator：通用資源標示符)。在網址列輸入http://www.jb51.net然後回車，會開啟腳本之家網站的主頁。可以看到，頁面中有多個欄目，多條新聞等，最上方不同的欄位就是文字連結。
連結標記雖然在網站設計製作中佔有不可替代的地位，但是其標記只有一個，那就是標記。本站介紹的連結應用程式都是基於標記基礎上的。
連結標記的屬性請參考下表
屬性 描述 href 指定連結位址 name 給連結命名 title 給連結提示文字 target 指定連結的目標視窗 accesskey 連結熱鍵
關於路徑
每個檔案都有自己的存放位置和路徑，理解一個檔案到要連結的那個檔案之間的路徑關係是建立連結的根本。 url—統一資源定位器，指的就是每個網站都具有的獨立的位址。同一個網站下的每一個網頁都屬於同一個位址之下，但是當建立網頁時，不可能也不需要為每個連結輸入完全的位址。我們只需要確定目前文檔同站點根目錄之間的相對路徑關係。因此連結可以分為以下3種： 絕對路徑
如http://www.jb51.net 相對路徑
如news/default.htm 根路徑
如/website/news/default.htm
在了解這三種地址形式之前先要理解另外兩個概念：內部鏈接和外部鏈接
內部和外部都是相對於網站資料夾而言，如果連結指向的是網站資料夾之內的文件，就是內部連結。如果連結指向網站資料夾之外的，就被稱為做外部連結。在增加外部連結的時候，將用到下面所講的絕對地址；而添加內部連結的時候，將用到下面所講的根目錄相對地址和文件相對地址。
以下分別介紹這3種連結：

絕對路徑

絕對路徑為文件提供完全的路徑，包括適應的協議，如http ,Ftp,rtsp等。一般常見的有：

http://www.sohu.com

ftp://202.136. 254.1

當連結到其它網站中的檔案時，必須使用絕對連結。 相對路徑

相對連結最適合網站的內部連結。只要是同一網站之下的，即使不在同一個目錄下，相對連結也非常合適。文件相對地址是書寫內部連結的理想形式。只要是處於網站資料夾之內，相對位址可以自由地在檔案之間建立連結。這種位址形式利用的是建立連結的兩個檔案之間的相對關係，不受網站資料夾所處伺服器位置的影響。因此這種書寫形式省略了絕對地址中的相同部分。這樣做的優點是：網站資料夾所在的伺服器位址發生改變時，資料夾的所有內部連結(如果採用此種位址形式)都不會出問題。

相對連結的使用方法為： 如果連結到同一目錄下，只需輸入要連結文件的名稱。 要連結到下一級目錄中的文件，只需先輸入目錄名，然後加" / "再輸入文件名。 如連結到上一級目錄中的文件，則先輸入"…/ "，再輸入目錄名稱、檔案名稱。 根路徑

根目錄相對地址同樣適應於創建內部鏈接，但大多數情況下，不建議使用此種地址形式。它在下列情況下使用： 當站點的規模非常大，防置於幾個伺服器上時 當一個伺服器上同時放置幾個站點時

根目錄相對地址的書寫形式也很簡單，先以一個斜線開頭，代表根目錄，然後書寫資料夾名，最後書寫檔名。根路徑以" / "開始，然後是根目錄下的目錄名。
#p#
製作內部鏈接
所謂內部鏈接，指的是在同一個網站內部，不同的html頁面之間的連結關係。在建立網站內部連結的時候，要考慮到使連結具有清晰的導航結構，使用戶方便地找到所需內容的html檔案。
下面我們建立3個網頁頁面，在第一個8-1.htm網頁頁面中，製作到8-1-1.htm和8-1-2.htm兩個頁面的鏈接，並在兩個被連結的頁面中製作返回到8-1.htm頁面的連結。 3個頁面的目錄關係如下圖所示：
8-1.htm和8-1-1.htm存放在網站的根目錄下，8-1-2.htm存放在test目錄下。基本語法 連結文字語法解釋
透過href屬性指定位址，File＿name為要連結檔案的路徑，"連結文字"為滑鼠點選的文字內容。 檔案範例：8-1.htm
透過標記建立兩個鏈接，分別連結到另外兩個html頁面。
01
02
04
05
06
07
08
09
10

主流的網頁設計軟體

11

目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文字了，人們現在追求的是網頁的動態效果和互動性。而Macromedia公司的網頁設計三劍客軟體Dreamweaver、Flash、Fireworks正是互動網頁設計的傑出代表，其最新版本mx 2004繼承了前期版本的優點，進行了功能的進一步整合，非常適合於網頁設計和網站建設的需要。

12 網頁製作軟體Dreamweaver mx 2004
13

14 網頁動畫軟體Flash mx 2004
15
16 文件說明
第12行定義了到8-1-1.htm同級頁面的鏈接，第14行定義了到test目錄下的8-1-2.htm頁面的鏈接。 檔案範例：8-1-1.htm
這個檔案是"網頁製作軟體Dreamweaver mx 2004"頁面，透過標記建立回到 8-1.htm頁面的連結。
01
02
03
04
05
06
07
08
09
10

Dreamweaver mx 2004

11 Dreamweaver mx 2004作為網頁設計軟體的代表，具備網站管理和頁面製作兩大核心功能。如果你也擁有織夢的理想，那麼這個軟體無疑是幫助你實現夢想的最佳手段。完全的視覺化編輯、優秀的程式碼控制、完整的網站規劃和管理、超乎尋常的動態效果設計，這些都為設計人員提供了得心應手的途徑。 mx版本的軟體將動態網站和傳統的靜態頁面功能進行了更進一步的整合，無疑為製作網站提供了更多的實現方式。
12

13 回傳
14
15 檔案說明
第13行定義了到8-1.htm同級頁面的連結。 檔案範例：8-1-2.htm
這個檔案是"網頁動畫軟體Flash mx 2004"頁面，透過標記建立回到8-1.htm頁面的連結。
01
02
03
04
05
06
07
08
09
10

Flash mx 2004

11 Flash mx 2004作為網頁向量互動動畫軟體的代表，提供了圖形繪製、動畫製作和互動三大功能。掌握了這個軟體的核心，也有能力在網路上衝浪的同時，扮演一把閃客的角色。越來越多的個人、商業網站採用Flash技術，廣告banner、動畫片頭、mtv、互動遊戲，廣闊的應用為Flash的學習者提供了廣泛的發展平台，學習Flash mx 2004軟體更是一個具有誘惑力的過程。
12

13 回傳
14
15 檔案說明
第13行定義了到8-1.htm上一層頁面的連結。
#p#
設定連結的目標窗口
點擊連結後，預設的瀏覽器窗口是原有窗口，我們可以指定這個連結打開的目標窗口，如新開窗口等。基本語法 連結文字語法解釋
透過target定義目標窗口，value的取值如下表所示 屬性值 描述 ＿parent 在上一級視窗中開啟。一般使用分幀的框架會經常使用 ＿blank 在新視窗中開啟 ＿self 在同一幀或視窗中打開，這項一般不用設定 ＿top 在瀏覽器的整個視窗中打開，忽略任何框架 文件範例：8-2.htm
透過target屬性設定連結的目標視窗。
01
02
04
05
06

07
08
09
10

主流的網頁設計軟體

11 目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文字了，人們現在追求的是網頁的動態效果和互動性。而Macromweaver公司的網頁設計三劍客軟體Dreamweaver、Flash、Fireworks正是互動網頁設計的傑出代表，其最新版本mx 2004繼承了前期版本的優點，進行了功能的進一步整合，非常適合於網頁設計和網站建設的需要。

12 網頁製作軟體Dreamweaver mx 2004
13

14 網頁動畫軟體Flash mx 2004
15
16 文件說明
第12行定義了在原始視窗顯示連結頁面，第14行定義了在新開視窗顯示連結頁面。
#p#
建立書籤鏈接
在瀏覽頁面的時候，如果頁面的內容較多、頁面過長，瀏覽的時候需要不斷拖動滾動條，很不方便，如果要尋找特定的內容，就更加不方便。這時如果能在該網頁或另外一個頁面上建立目錄，瀏覽者單擊目錄上的項目就能自動跳到網頁相應的位置進行閱讀，應該是件很方便的事，並且還可以在頁面中設定諸如"返回首頁"的連結。這就稱為書籤連結。
建立書籤連結分為兩步驟：一是建立書籤，二是為書籤建立連結。
下面來製作一個包含網頁設計三劍客內容的軟體介紹頁面，並為其中的每一個軟體建立一個書籤，這個書籤就是隨後將要跳轉轉的位置。也就是說，這個書籤就確定了一個頁面內部的連結導引依據。基本語法 文字文件範例：8-3.htm
為頁面中

三段標題文字建立書籤連結。
01
02
03
04
05
06
07
08
09
10

主流的網頁設計軟體

11

Dreamweaver mx 2004

12 Dreamweaver mx 2004作為網頁設計軟體的代表，具備網站管理和頁面製作兩大核心功能。如果你也擁有織夢的理想，那麼這個軟體無疑是幫助你實現夢想的最佳手段。完全的視覺化編輯、優秀的程式碼控制、完整的網站規劃和管理、超乎尋常的動態效果設計，這些都為設計人員提供了得心應手的途徑。 mx版本的軟體將動態網站和傳統的靜態頁面功能進行了更進一步的整合，無疑為製作網站提供了更多的實現方式。
13

14

Flash mx 2004

15 Flash mx 2004作為網頁向量互動動畫軟體的代表，提供了圖形繪製、動畫製作和互動三大功能。掌握了這個軟體的核心，也有能力在網路上衝浪的同時，扮演一把閃客的角色。越來越多的個人、商業網站採用Flash技術，廣告banner、動畫片頭、mtv、互動遊戲，廣闊的應用為Flash的學習者提供了廣泛的發展平台，學習Flash mx 2004軟體更是一個具有誘惑力的過程。
16

17

Fireworks mx 2004

18 Fireworks mx 2004作為網頁圖像設計軟體的代表，在繼承了前期版本圖形繪製、頁面特效功能的同時，大大地發展了點陣圖圖像方面的處理功能，這無疑使這個軟體有了更大的向Photoshop挑戰的資本，而其在網頁設計方面的許多應用，又是無任何軟體可與之媲美。與Dreamweaver mx 2004的整合使其在專業網站圖像設計過程中，早已並繼續扮演著不可或缺的角色。
19

20
21 文件說明
第11、14、17行分別定義了3各段落標題文字的書簽名稱dw、fl、fw。
#p#
連結同一頁中的書籤
下面我們就為製作的8-3.htm製作好鏈接，我們希望在頁面的起始位置製作3個鏈接，分別鏈接到每一個軟體介紹的位置上。基本語法 文字連結語法解釋
bookmark＿name就是剛剛定義的書籤名。 檔案範例：8-4.htm
製作3個鏈接，分別到頁中

三段標題文字書籤的位置。
01
02
04
05
06
07
08
09
10

主流的網頁設計軟體

11 Dreamweaver mx 2004
12 Flash mx 2004
13 Fireworks mx 2004
14

Dreamweaver mx 2004

15 Dreamweaver mx 2004作為網頁設計軟體的代表，具備網站管理和頁面製作兩大核心功能。如果你也擁有織夢的理想，那麼這個軟體無疑是幫助你實現夢想的最佳手段。完全的視覺化編輯、優秀的程式碼控制、完整的網站規劃和管理、超乎尋常的動態效果設計，這些都為設計人員提供了得心應手的途徑。 mx 2004版本的軟體將動態網站和傳統的靜態頁面功能進行了更進一步的整合，無疑為製作網站提供了更多的實現方式。
16

17

Flash mx 2004

18 Flash mx 2004作為網頁向量互動動畫軟體的代表，提供了圖形繪製、動畫製作和互動三大功能。掌握了這個軟體的核心，也有能力在網路上衝浪的同時，扮演一把閃客的角色。越來越多的個人、商業網站採用Flash技術，廣告banner、動畫片頭、mtv、互動遊戲，廣闊的應用為Flash的學習者提供了廣泛的發展平台，學習Flash mx 2004軟體更是一個具有誘惑力的過程。
19

20

Fireworks mx 2004

21 Fireworks mx 2004作為網頁圖像設計軟體的代表，在繼承了前期版本圖形繪製、頁面特效功能的同時，大大地發展了點陣圖圖像方面的處理功能，這無疑使這個軟體有了更大的向Photoshop挑戰的資本，而其在網頁設計方面的許多應用，又是無任何軟體可與之媲美。與Dreamweaver mx 2004的整合使其在專業網站圖像設計過程中，早已並繼續扮演著不可或缺的角色。
22

23
24 檔案說明
第11、12、13行分別定義了到3個段落標題文字的書籤連結。
#p#
連結到其它頁面中的書籤
在頁面之間，也可以完成跳到另一頁某一位置的過程。這需要指定好連結的頁面和連結的書籤位置。基本語法 文字連結語法解釋
File＿name是要跳到的頁面路徑，bookmark＿name是定義的書籤名稱。 檔案範例：8-5.htm
製作一個新頁面，其中包含3個鏈接，分別鏈接到8-4.htm頁面中

三段標題文字書籤的位置。
01
02
04
05
06
07
08
09
10

主流的網頁設計軟體

11 目前，網頁技術進入了一個新的階段，現在的網頁再也不是圖片的堆積和枯燥無味的文字了，人們現在追求的是網頁的動態效果和互動性。而Macromedia公司的網頁設計三劍客軟體Dreamweaver、Flash、Fireworks正是互動網頁設計的傑出代表，其最新版本mx 2004繼承了前期版本的優點，進行了功能的進一步整合，非常適合於網頁設計和網站建設的需要。

12 Dreamweaver mx 2004
13 Flash mx 2004
14 Fireworks mx 2004
15
16 檔案說明
第12、13、14行分別定義了到8-4.htm頁中3個段落標題文字的書籤連結。
#p#
外部鏈接
所謂外部鏈接，指的是跳到當前網站外部，與其它網站中頁面或其它元素之間的鏈接關係。這種連結在一般情況下需要書寫絕對的連結地址。
製作外部連結的時候，使用url統一資源定位符來定位萬維網訊息，這種方式可以簡潔、明了、準確地描述訊息所在的地點。最常見的url格式是"http://"，其它的格式如表所示。 url的格式
服務 url格式 說明 www http:// 進入萬維網址 Ftp ftp:// 進入檔案傳輸伺服器 News news:// 啟動新聞討論群組 Telnet telnet:// 啟動Telnet方式 Gopher gopher:// 造訪一個Gopher伺服器 Email mailto:// 啟動郵件
連結到外部網站
頁面中的常用友情鏈接，經常是單擊後可以訪問別人的網站，達到互相交流信息的目的。下面就是製作連結到外部網站的方法。基本語法 文字連結 語法解釋
"http://"後面寫下的就是網站的網址。 文件範例：8-6.htm
製作連結到外部網站的連結。
01
02
04
05
06

07
08
09
10 連結到腳本之家網站
11
12 檔案說明
第10行定義了到腳本之家網站的連結。
#p#
發送E-mail
在html頁面中，可以建立E-mail連結。當瀏覽者點擊連結後，系統會啟動預設的電子郵件進行E-mail的發送。在windows系統中，如果使用者設定了郵件軟體，例如Outlook,Outlook Express等，在瀏覽器中點選E-mail連結會自動開啟新郵件窗口，網址列會自動新增E-mail連結中的郵件信箱。基本語法 文字連結 文字連結 文字連結 文字連結語法解釋
其中a@b.c為郵件地址，後面的參數如下表所示 郵件的參數
參數 說明 subject 電子郵件主旨 cc 抄送收件者 bcc 暗送收件者
如果希望同時寫下多個參數，則參數之間使用"＆"符號分隔，如：
文字連結 文件範例：8-7.htm
製作電子郵件連結。
01
02
03
04
05
06

07
08
09
10 來信給作者
11

12 意見建議
13
14 文件說明
第10行定義了預設的電子郵件鏈接，第12行的鏈接設定了郵件主題"意見建議"，以及發送郵件後抄送和暗送的郵件地址。
#p#
連結FTP
Internet上資源豐富，透過檔案傳輸協定Ftp，就可以足不出戶地取得各種免費軟體和其它檔案。 Ftp即"文件傳輸協定"。協定是一種使電腦與電腦之間能夠相互通訊的語言。 Ftp使檔案和資料夾能夠在Internet上公開傳輸。在某些情況下，您需要從網路電腦管理員處獲得許可才能登陸並存取電腦上的檔案。但是通常您會發現可以使用Ftp存取某個網路或伺服器，而不需要擁有該電腦的帳戶，也不必須是授權的密碼持有人。這些匿名Ftp伺服器可包含能夠透過Ftp公開取得的廣泛資料。基本語法 文字連結語法解釋
"ftp://"後面寫的是Ftp主機的位址。 文件範例：8-8.htm
製作電子郵件連結。
01
02
04
05
06

07
08
09
10 北京大學Ftp站點
11
12 檔案說明
第10行定義了Ftp主機位址為北京大學的Ftp主機。
#p#
連結Telnet
Telnet也是Internet上最主要和最廣泛的應用之一，遠端登陸Telnet指一台電腦遠端連結到另一台電腦上，並在遠端電腦上運行自己系統的程序，從而共享電腦網路系統的軟體和硬體資源。基本語法 文字連結語法解釋
"Telnet://"後面寫下的是Telnet站點的地址 檔案範例：8-9.htm
製作Telnet連結。
01
02
04
05
06
07
08
09
10 北京大學未名站
11
12 文件說明
第10行定義了Telnet站點位址為北京大學未名站。其中162.105.203.245為站點位址，23為連接埠號碼。
#p#
連結到Gopher
在www出現之前，Gopher軟體是Internet上最主要的檢索工具，Gopher網站也是最主要的網站。在www出現後，Gopher失去了昔日的光彩。儘管如此，今天Gopher仍很流行，因為Gopher網站能夠容納大量的資訊供用戶查詢。基本語法 文字連結語法解釋
"Gopher://"後面寫下的就是Gopher網站的地址。 檔案範例：8-10.htm
製作Gopher連結。
01
02
04
05
06
07
08
09
10 Gopher站點
11
12 檔案說明
第10行定義了Gopher網站的位址。
#p#
連結到News新聞群組
New新聞群組是由分佈在世界各地的上千個新聞伺服器組成，它能夠隨時更換訊息，任何一條發送到新聞群組伺服器上的訊息，在幾分鐘之後就能傳遍全球。新聞群組是個人向新聞伺服器所張貼郵件的集合，一台電腦上可建立數千個新聞群組。每一個瀏覽者幾乎可以找到任何主題的新聞群組。雖然某些新聞群組是受到監控的，但大多數不是。對於受監控的新聞群組，其擁有者可以檢查張貼的郵件、提出問題，或刪除不適當的郵件等。任何人都可以向新聞群組張貼郵件。新聞組不需要成員資格或如入費用。基本語法 文字連結語法解釋
"News://" 後面寫下的就是New伺服器的位址。 文件範例：8-11.htm
製作New新聞群組連結。
01
02
04
05
06
07
08
09
10 News新聞群組
11
12 檔案說明
第10行定義了New新聞群組伺服器的位址。
#p#
下載文件
如果希望製作下載文件的鏈接，只需在鏈接地址處輸入文件所在的位置即可。當瀏覽器使用者點擊連結後，瀏覽器會自動判斷文件的類型，以做出不同情況的處理。基本語法 文字連結語法解釋
"File＿url"代表檔案所在的路徑，可以寫下相對路徑，也可以寫下絕對路徑。 檔案範例：8-12.htm
建立檔案的下載連結。
01
02
03
04
05
06
07
08
09
10 下載軟體
11
12 檔案說明
第10行定義了Word Recovery軟體的下載位址。
#p#
腳本連結
在連結語句中，可以透過腳本來實現html語言完成不了的功能。以下以JavaScript腳本為例說明腳本連結的使用。基本語法 文字連結語法解釋
在JavaScript:後面寫的就是具體的腳本。 檔案範例：8-13.htm
透過腳本連結實現關閉瀏覽器視窗效果。
01
02
04
05
06
07
10 關閉視窗
11
12 檔案說明
第10行定義了JavaScript腳本。
#p#
空鏈接
在連結中，可以透過#符號實現空連結。所謂空鏈接，是指指向鏈接後，滑鼠變成手行，但單擊鏈接後，仍然停留在當前頁面。基本語法 文字連結檔案範例：8-14.htm
實現空連結。
01
02
03
04
05
06
07
08
09
10 空連結
11
12 檔案說明
第10行定義了空連結。