申明: 本站飛宇網 https://feiyetopro.blogspot.com/。自網路收集整理之書籍、文章、影音僅供預覽交流學習研究，其[書籍、文章、影音]情節內容， 評論屬其個人行為， 與本網站無關。版權歸原作者和出版社所有，請在下載 24 小時內刪除，不得用作商業用途；如果您喜歡其作品，請支持訂閱購買[正版]。謝謝！
視頻講解：21分
5.2 關於路徑
5.4 深層挖掘——內部連結
5.5 查找方便——書簽連結
5.7 其他連結
HTML5入門經典
第一篇 基礎知識篇
第5章 在迷宮中尋找出口——超連結
超連結（HyperLink）是HTML檔中可供連接至其他網路節點的網狀架構，是網頁中不可缺少的“大功臣”，由於有它的存在，我們才能將位於世界各地的HTML檔連結起來，而Client（使用者）才能依據超連結標籤中所指定的URL（Universal Resource Locator）連接至相關Server（伺服器）。
通過學習本章，讀者可以達到以下學習目的：
❑瞭解超連結的基本知識；
❑掌握超連結的寫法；
❑掌握超連結的建立；
❑熟悉超連結目標的設置；
❑熟悉傳輸協議；
❑掌握書簽連結、外部連結。
5.1 超連結
連結是一個網站的靈魂。用HTML語言創建連結非常方便，但超連結的原理對於一個網站卻至關重要。理解一些關於連結的基本概念和原理，不僅有助於HTML連結標記的使用，而且對於其他網頁製作軟體的使用以及高層次的網頁程式設計等都有很大的幫助。
超連結是網頁中最重要的元素之一。一個網站是由多個頁面組成的，頁面之間依據連結確定相互的導航關係。連結能使流覽者從一個頁面跳轉到另一個頁面，實現文檔互聯、網站互聯。
超文字連結（hypertextlink）通常簡稱為超連結（hyperlink），或者簡稱為連結（link）。連結是HTML的一個最強大和最有價值的功能。連結是指將文檔中的文字或者圖像與另一個文檔、文檔的一部分或者圖像連接在一起。
5.2 關於路徑
5.2.1 絕對路徑
絕對路徑就是主頁上的檔或目錄在硬碟上的真正路徑。使用絕對路徑定位連結目的檔案比較清晰，但是其有兩個缺點：一是需要輸入更多的內容，二是如果該檔被移動了，就需要重新設置所有的相關連結。例如，在本地測試網頁時連結全部可用，但是到了網上就不可用了。這就是路徑設置的問題。例如，設置路徑為D:\mr\5\5.1.html，在本地可以找到該路徑下的檔，但是到了網站上該檔就不一定在該路徑下了，所以就會出問題。
5.2.2 相對路徑
相對路徑是最適合於網站的內部連結的。只要是屬於同一網站之下的，即使不在同一個目錄下，相對連結也非常適合。檔相對位址是書寫內部連結的理想形式，只要是處於網站資料夾之內，相對位址就可以自由地在檔之間構建連結。這種位址形式利用的是構建連結的兩個檔之間的相對關係，不受網站資料夾所處伺服器位置的影響。因此這種書寫形式省略了絕對位址中的相同部分。這樣做的優點是，網站資料夾所在伺服器位址發生改變時，資料夾的所有內部連結都不會出問題。
相對連結的使用方法如下：
❑如果連結到同一目錄下，則只需輸入要連結文檔的名稱，如5.1.html。
❑要連結到下一級目錄中的檔，只需先輸入目錄名，然後加“/”，再輸入檔案名，如mr/5.2.html。
❑如果連結到上一級目錄中的檔，則先輸入“../”，再輸入目錄名、檔案名，如../../mr/5.2.html。
5.2.3 根路徑
根目錄相對位址同樣適用於創建內部聯接，但大多數情況下，不建議使用此種位址形式。它在下列情況下使用：
❑當網站的規模非常大，放置於幾個伺服器上時。
❑當一個伺服器上同時放置幾個網站時。
根目錄相對位址的書寫形式也很簡單，首先以一個斜杠開頭，代表根目錄，然後書寫資料夾名，最後書寫檔案名。根路徑以“/”開始，然後是根目錄下的目錄名，如/mingri/book.html。
5.3 從哪裡開始，到哪裡結束——超連結
5.3.1 如何使用超連結標記
超連結的語法根據其連結化物件的不同而有所變化，但都是基於＜a＞標記的。
語法：
＜a href="檔案名"＞連結元素＜/A＞或＜A href="URL"＞連結元素＜/A＞
說明 在該語法中，連結元素可以是文字，也可以是圖片或其他頁面元素。其中href是hypertextreference的縮寫。通過超級連結的方式可以使各個網頁之間連結起來，使網站中眾多的頁面構成一個有機整體，使訪問者能夠在各個頁面之間跳轉。超級連結可以是一段文本、一幅圖像或其他網頁元素，當在流覽器中用滑鼠按一下這些物件時，流覽器可以根據指示載入一個新的頁面或者轉到頁面的其他位置。
下面具體講解各種超連結的創建方法。
5.3.2 連結到另一個網頁
在網頁中，文本超連結是最常見的一種，它通過網頁中的檔和其他的檔進行連結。
語法：
＜A href="連結位址"＞連結文字＜/A＞
說明 在該語法中，連結位址可以是絕對位址，也可以是相對位址。
【例5.1】創建文本超連結，代碼如下。
實例位置：光碟\MR\源碼\第5章\5.1
＜html＞
＜head＞
＜title＞文本連結＜/title＞
＜/head＞
＜body＞
＜center＞＜h3＞中國古城介紹：西安古城＜/h3＞＜/center＞
＜a href="5.1-2.html"＞下一篇：荊州古城＜/a＞＜br/＞＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;西安，古稱" 長安"、"京兆"。是舉世聞名的世界四大古都之一，是中國歷史上建都時間最多、建都朝代最多、影響力最大的都城，是中華民族的搖籃、中華文明的發祥地、中華文化的代表，有著“天然歷史博物館”的美譽。＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;西安，在《史記》中被譽為" 金城千里，天府之國"，是中華民族的發祥之地，由周文王營建，建成於西元前12世紀，先後有21個王朝和政權建都於此，是13朝古都，中國歷史上的四個最鼎盛的朝代周、秦、漢、唐均建都西安。西安高陵楊官寨遺址發現，將中國城市歷史推進到了6000年前的新石器時代晚期，同時確定了西安是世界歷史上第一座城市。
＜/body＞
＜/html＞
運行效果如圖5.1所示。
圖 5.1 檔連結的頁面效果
在上圖中有一個文本連結“下一篇：荊州古城”，它連結到了目前的目錄下的5.1-2.html文件。該檔的實例代碼如下：
＜html＞
＜head＞
＜title＞文本連結＜/title＞
＜/head＞
＜body＞
＜center＞＜h3＞中國古城介紹：荊州古城＜/h3＞＜/center＞
＜a href="5.1-1.html"＞上一篇：西安古城＜/a＞＜br/＞＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;荊州古城，又稱江陵城，是我國歷史文化名城、全國重點文物保護單位之一，是楚文化的發祥地之一，是著名的三國古戰場，歷史上“劉備借荊州”、“關羽大意失荊州”等膾炙人口的三國故事都發生在這裡。荊州古城地處連東西貫南北的交通要塞，歷來均為兵家必爭之地，荊州城屢毀屢建，現在的荊州古城最後一次修建是在清朝順治三年（1646年），依原址而建，保存至今，是“我國南方不可多得的完壁”。
＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;荊州古城總面積4.6平方公里，分為三層，最外層為水城、中間是磚城，裡面是土城，水城（護城河）全長10500米，寬30米，水深4米，西通太湖，東連長湖，與古運河相連；城牆四周原有東門（迎賓門）、小東門（公安門、水門）、北門（拱極門）、小北門（遠安門）、西門（安瀾門）、南門（南紀門）6座城門，除小東門外，其他五座城門都由兩道門組成，有甕城，新中國成立後，又新開3座城門，分別是新東門、新南門、新北門，均無甕城，原來6座城門上都有城門樓，分別是賓陽樓、望江樓、九陽樓、曲江樓、朝宗樓、景龍樓等，其中以曲江樓和景龍樓最為出名。＜br/＞＆nbsp;＆nbsp;＆nbsp;＆nbsp;荊州古城不僅三國遺跡遍佈，而且文化底蘊豐厚，歷史、神話傳說眾多，尤其是《三國演義》故事的廣泛流傳，使得荊州古城名揚四海，享譽海內外，是三國旅遊線上的著名景點。
＜/body＞
＜/html＞
運行效果如圖5.2所示。
圖 5.2 打開的連結頁面
在這個頁面中同樣有一個“上一篇：西安古城”的連結，點擊該連結，頁面將轉到5.1-1.html文件，如圖5.1所示。
5.3.3 超連結的目標視窗
在創建網頁的過程中，有時候並不希望超連結的目標視窗將原來的視窗覆蓋，比如在打開新的視窗時，主頁面的視窗仍保留在原處。這時可以通過target參數設置目標視窗的屬性。
語法：
＜a href="連結位址" target=目標視窗的打開方式＞連結元素＜/a＞
在該語法中，target參數的取值有4種，如表5.1所示。
在表5.1中提到的框架是一種頁面結構。
【例5.2】使用target屬性來設置超連結的目標視窗，代碼如下。
實例位置：光碟\MR\源碼\第5章\5.2
＜html＞
＜head＞
＜title＞目錄視窗的打開方式＜/title＞
＜/head＞
＜body＞
＜center＞＜h2＞魯迅作品介紹＜/h2＞＜/center＞
＜hr size="4"
color="#FF0000"/＞
＜font size="+4"＞《呐喊》＜/font＞＜br/＞＜br/＞
作者：魯迅著＜br/＞
錢理群王得後選編＜br/＞
出版社：浙江文藝出版社＜br/＞
出版日期;2007年10月＜br/＞
ISBN：978-7-5339-0441-8＜br/＞
字數：316千字＜br/＞
定價：1 9.5 0元＜b r/＞
＜a href="5.2-2.html"
target="_blank"＞內容簡介＜/a＞
＜/body＞
＜/html＞
設置這段代碼的檔案名為5.2-1.html，在這段代碼中包含一個超連結文本“內容簡介”，按一下該文字可以打開5.2-2.html文件。該文件中的代碼如下：
＜html＞
＜head＞
＜title＞目標視窗的打開方式＜/title＞
＜/head＞
＜body＞
＜center＞＜h2＞內容簡介＜/h2＞＜/center＞
＜font size="+4"＞《呐喊》＜/font＞＜br/＞＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;本集出版收小說十五篇，作於1918年至1922年間，1923年8月由北京新潮出版社，列為該社“文藝叢書”之一。1926年10月第三次印刷時起，改由北京北新書局出版，列入作者所編的“烏合之眾”。1930年1月第十三次印刷時，作者抽去其中的《不周山》一篇（後改名為《補天》，收入《故事新編》）此後印行的版本均從1930年版。
＜/body＞
＜/html＞
運行檔5.2-1.html，按一下視窗中的“內容簡介”連結，可以在一個新的視窗打開檔5.2-2.html，如圖5.3所示。
圖 5.3 設置目標視窗的打開方式
5.4 深層挖掘——內部連結
所謂內部連結，指的是在同一個網站內部，不同的HTML頁面之間的連結關係。在建立網站內部連結的時候，要考慮到使連結具有清晰的導航結構，使使用者能方便地找到所需要內容的HTML檔。
【例5.3】下麵通過一個實例說明在一個網站中內部連結的實現方式。在本實例中共包含3個檔，分別為5.3.html、5.3-1.html和5.3-2.html。其中，5.3.html作為一個起始頁面，另外兩個檔放置在與5.3.html文件同級的film資料夾中。本實例通過3個檔的互相連接說明在網站內部進行連結的方法。文件5.3.html的代碼如下。
實例位置：光碟\MR\源碼\第5章\5.3
＜html＞
＜head＞
＜title＞內部連結的實現＜/title＞
＜/head＞
＜body＞
＜center＞＜h2＞中國古城介紹＜/h2＞＜/center＞
＜hr size="2"
color="#FF0000"/＞
＜font size="+4"＞西安古城＜/font＞＜br/＞＜br/＞
世界歷史名城，華夏精神故鄉，中國第一古都—西安。＜br/＞＜br/＞
＜a href="5.3-1.html"＞詳細介紹＜/a＞＜br/＞
＜hr size="2"
color="#FF0000"/＞
＜font size="+4"＞大理古城＜/font＞＜br/＞＜br/＞＜br/＞
大理歷史深遠，素有" 文獻名邦" 美名。大理古城位於風光綺麗的蒼山之麓，始建於明洪武十五年，是中國二十四個歷史文化名城之一。＜br/＞＜br/＞
＜a href="5.3-2.html"＞詳細介紹＜/a＞
＜/body＞
＜/html＞
在該檔中包含了兩個連結，一個是“西安古城”的詳細介紹的連結，另一個是“大理古城”的介紹。這兩個檔都位於資料夾film中，在連結時需要在連結位元址中加入目錄和檔案名。
“西安古城”的介紹檔5.3-1.html的代碼如下：
＜html＞
＜head＞
＜title＞內部連結的實現＜/title＞
＜/head＞
＜body＞
＜center＞＜h3＞西安古城＜/h3＞＜/center＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;西安，古稱“長安”、“京兆”。是舉世聞名的世界四大古都之一，是中國歷史上建都時間最多、建都朝代最多、影響力最大的都城，是中華民族的搖籃、中華文明的發祥地、中華文化的代表，有著“天然歷史博物館”的美譽。＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;西安，在《史記》中被譽為“金城千里，天府之國”，是中華民族的發祥之地，由周文王營建，建成於西元前12世紀，先後有21個王朝和政權建都於此，是13朝古都，中國歷史上的四個最鼎盛的朝代周、秦、漢、唐均建都西安。西安高陵楊官寨遺址發現，將中國城市歷史推進到了6000年前的新石器時代晚期，同時確定了西安是世界歷史上第一座城市。＜br/＞＜br/＞
＜a href="5.3.html"＞返回＜/a＞＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;
＜a href="5.3-2.html"＞下一個文化古城介紹＜/a＞
＜/body＞
＜/html＞
初始頁面5.3.html則位於該檔的上一級目錄中，在連結時需要在檔案名前添加“../”。而“大理古城”的介紹頁與5.3-1.html位於同一目錄中，是同級檔，在連結時只需要將連結位址設置為該檔案名5.3-1.html即可。文件5.3-2.html的代碼如下：
＜html＞
＜head＞
＜title＞內部連結的實現＜/title＞
＜/head＞
＜body＞
＜center＞＜h3＞大理古城＜/h3＞＜/center＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;大理歷史深遠，素有" 文獻名邦" 美名。大理古城位於風光綺麗的蒼山之麓，始建於明洪武十五年，是中國二十四個歷史文化名城之一。＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;至今已有600多年的歷史。它面臨洱海，背靠蒼山，至今仍保持著縱橫交錯、棋盤格局式的街道和雄偉壯觀的南北城樓，城樓上" 文獻名邦" 四個大字格外引人注目。最初東西南北各有城門，上有城樓，後毀。城內民居石牆青瓦、門窗雕龍畫鳳，顯得古雅質樸。城西北的崇聖寺三塔和城西南的弘聖一塔，巷山腳下的無世祖平雲南碑和一年一度的三月街，更使古城顯得別有一番情趣。大理還是白族的主要聚居地。多彩的民俗風情，"三方一照壁"、"四合五天井" 的建築特色，都為人們探尋南詔古國打開了一葉窺秘之窗。＜br/＞＜br/＞
＜a href="../5.3.html"＞返回＜/a＞＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;
＜a href="5.3-1.html"＞下一個文化古城介紹＜/a＞
＜/body＞
＜/html＞
運行起始檔5.3.html，會看到頁面中包含兩個連結文字，如圖5.4所示。
圖 5.4 起始視窗的連結效果
按一下其中一個“詳細介紹”的連結可以打開下一級內容。在這裡按一下“詳細介紹”，可以打開如圖5.5所示的“西安古城”詳細介紹的視窗。
圖 5.5 “西安古城”介紹視窗
在該視窗中包含了兩個連結，按一下文本“返回”可以返回起始頁面5.3.html中；按一下文本“下一個文化古城介紹”可以直接打開另外一個古城介紹的視窗，如圖5.6所示。
圖 5.6 “大理古城”介紹視窗
5.5 查找方便——書簽連結
在流覽頁面的時候，如果頁面的內容較多，頁面過長，流覽的時候需要不斷拖動捲軸，很不方便，如果要尋找特定的內容，就更加不方便。這時如果能在該網頁或另外一個頁面上建立目錄，流覽者只要按一下目錄上的專案就能自動跳到網頁相應的位置進行閱讀，這樣無疑是最方便的事。並且還可以在頁面中設定諸如“返回頁首”之類的連結。這就稱為書簽連結。
建立書簽連結分為兩步，一是建立書簽，二是為書簽製作連結。
5.5.1 建立書簽
書簽可以與連結文字在同一頁面，也可以在不同的頁面。但是要實現網頁內部的書簽連結，都需要先建立書簽，通過建立書簽才能對頁面的內容進行引導和跳轉。
語法：
＜A name="書簽名稱"＞文字＜/A＞
在該語法中，書簽名稱就是對於後面要跳轉所創建的書簽，而文字則是設置連結後跳轉的位置。
【例5.4】創建書簽，代碼如下。
實例位置：光碟\MR\源碼\第5章\5.4
＜html＞
＜head＞
＜title＞定義書簽＜/title＞
＜/head＞
＜body＞
＜h3＞性格測試：公園裡看書測試你性格。＜/h3＞
＜hr size="3"
color="#FF0000"/＞
＜a name="answerA"＞選擇A：雷陣雨＜/a＞＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;雷陣雨，是會淋濕書本、頭髮，令人感覺不太舒服的事物。故選此答案的人，是想回避此種情況，顯示是屬於自我防衛本能比較強的人。你的不安比別人強一倍，對可能威脅到自我的危機相當敏感。因此，一旦察覺自己身處危機的狀況時，通常會力爭上游、發揮潛力。倘若陷入低潮的話，也能化危機為轉機，及早擺脫困境。＜br/＞＜br/＞
＜hr size="3"
color="#FF0000"/＞
＜a name="answerA"＞選擇B：午睡＜/a＞＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;午睡，顯示樂觀的潛在心理。此種人的迴圈性氣質很強，容易受當場的氣氛感染。一旦感覺情緒低落時，可以借著運動、休閒來變換心情，或是改變工作、生活環境，讓自己輕鬆一下。如此一來，便能擺脫困境。重新出發。萬一遇到極度低潮的狀況，換個新工作或是改變根本的環境，都是不錯的主意。＜br/＞＜br/＞
＜hr size="3"
color="#FF0000"/＞
＜a name="answerA"＞選擇C：改念別科＜/a＞＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;改念別科，表示可能性或上進心。此種人原本提升自我的欲望就很強。因此，當陷入低潮時，可以去找德高望重的人開導，不然就是閱讀名人傳記，接受精神上的刺激。因為這樣可以激發上進心，不會被一點小小的挫折擊垮。＜br/＞＜br/＞
＜/body＞
＜/html＞
在這段代碼中，定義了3個書簽，分別命名為answerA、answerB和answerC。運行這段代碼，效果如圖5.7所示。
圖 5.7 定義書簽
可以看到，在流覽器中並不能看到定義的書簽，但是它實際上已經存在了。此時就可以定義書簽連結了。
5.5.2 連結到同一頁面的書簽
下面就可以為剛才製作的書簽添加連結內容了。在代碼的前面增加連結文字和連結位址就能實現同一頁面的書簽連結。
語法：
＜A href="#書簽的名稱"＞連結的文字＜/A＞
在該語法中，書簽的名稱就是剛才所定義的書簽名，也就是name的賦值。而#則代表這是書簽的連結位址。
【例5.5】連結到同一頁面的書簽，代碼如下。
實例位置：光碟\MR\源碼\第5章\5.5
＜html＞
＜head＞
＜title＞定義書簽＜/title＞
＜/head＞
＜body＞
＜h3＞性格測試：公園裡看書測試你性格。＜/h3＞
夏天，一位年輕人坐在公園的椅子上看書，看樣子像是考生，只見他在看一本像是英文的參考書。突然，他合上書本——你認為他為什麼合上書本呢?請從以下幾個備選答案中選一個與你想像中較接近的：＜br/＞＜br/＞
＜a href="#answerA"＞A:雷雨＜/a＞＜br/＞＜br/＞
＜a href="#answerB"＞B:午睡＜/a＞＜br/＞＜br/＞
＜a href="#answerC"＞C:改念別科＜/a＞＜br/＞＜br/＞
＜hr size="3"/＞
＜a name="answerA"＞選擇A：雷陣雨＜/a＞＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;雷陣雨，是會淋濕書本、頭髮，令人感覺不太舒服的事物。故選此答案的人，是想回避此種情況，顯示是屬於自我防衛本能比較強的人。你的不安比別人強一倍，對可能威脅到自我的危機相當敏感。因此，一旦察覺自己身處危機的狀況時，通常會力爭上游、發揮潛力。倘若陷入低潮的話，也能化危機為轉機，及早擺脫困境。＜br/＞＜br/＞
＜hr size="3"
color="#FF0000"/＞
＜a name="answerB"＞選擇B：午睡＜/a＞＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;午睡，顯示樂觀的潛在心理。此種人的迴圈性氣質很強，容易受當場的氣氛感染。一旦感覺情緒低落時，可以借著運動、休閒來變換心情，或是改變工作、生活環境，讓自己輕鬆一下。如此一來，便能擺脫困境。重新出發。萬一遇到極度低潮的狀況，換個新工作或是改變根本的環境，都是不錯的主意。＜br/＞＜br/＞
＜hr size="3"
color="#FF0000"/＞
＜a name="answerC"＞選擇C：改念別科＜/a＞＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;改念別科，表示可能性或上進心。此種人原本提升自我的欲望就很強。因此，當陷入低潮時，可以去找德高望重的人開導，不然就是閱讀名人傳記，接受精神上的刺激。因為這樣可以激發上進心，不會被一點小小的挫折擊垮。＜br/＞＜br/＞
＜/body＞
＜/html＞
運行這段代碼，可以看到3個文字連結，如圖5.8所示。
圖 5.8 建立書簽和連結的頁面效果
在頁面中按一下其中的一個連結文字，頁面將會跳轉到該連結的書簽所在位置。按一下“A:雷雨”，跳轉後的頁面效果如圖5.9所示。
圖 5.9 跳轉的效果
按一下頁面中的“C:改念別科”，頁面跳轉到書簽answerC所在的位置，如圖5.10所示。
圖 5.10 跳轉到書簽所在位置
5.5.3 連結到不同頁面的書簽
書簽連結不但可以連結到同一頁面，也可以在不同頁面中設置。
語法：
＜A href="連結的檔位址#書簽的名稱"＞連結的文字＜/A＞
在該語法中，與同一頁面的書簽連結不同的是，需要在連結的位址前增加檔所在的位置。
【例5.6】下面設置一個單獨的連結頁面，使其連結到前面定義的書簽頁面，代碼如下。
實例位置：光碟\MR\源碼\第5章\5.6
＜html＞
＜head＞
＜title＞定義書簽＜/title＞
＜/head＞
＜body＞
＜h3＞性格測試：公園裡看書測試你性格。＜/h3＞
＆nbsp;＆amp;夏天，一位年輕人坐在公園的椅子上看書，看樣子像是考生，只見他在看一本像是英文的參考書。突然，他合上書本——你認為他為什麼合上書本呢?請從以下幾個備選答案中選一個與你想像中較接近的：＜br/＞＜br/＞
＜a href="5.6-1.html#answerA"＞選擇A：雷陣雨＜/a＞＜br/＞＜br/＞
＜a href="5.6-1.html#answerB"＞選擇B：午睡＜/a＞＜br/＞＜br/＞
＜a href="5.6-1.html#answerC"＞選擇C：改念別科＜/a＞＜br/＞＜br/＞
＜/body＞
＜/html＞
運行這段代碼，效果如圖5.11所示。
圖 5.11 運行效果
按一下其中的某個連結，例如“C：改念別科”，就可以直接連結到書簽所在的位置，即5.6-1.html，如圖5.12所示。
圖 5.12 連結的效果
5.6 範圍廣泛——外部連結
所謂外部連結，指的是跳轉到當前網站的外部，是與其他網站中頁面或其他元素之間的連結關係。這種連結在一般情況下需要書寫絕對連結位址。
製作外部連結的時候，使用URL統一資源定位符來定位萬維網資訊，這種方式可以簡潔、明瞭、準確地描述資訊所在的地點。
最常見的URL格式是"http://"，其他的格式如表5.2所示。
5.6.1 通過HTTP
網頁中最常使用HTTP協定進行外部連結的是在設置友情連結時。
語法：
＜a href="http://..."＞連結文字＜/a＞
在該語法中，http://表明這是關於HTTP協定的外部連結，而在其後輸入網站的網址即可。
【例5.7】通過HTTP協議傳輸，代碼如下。
實例位置：光碟\MR\源碼\第5章\5.7
＜html＞
＜head＞
＜title＞連結到外部網站＜/title＞
＜/head＞
＜body＞
＜a href="http://www.mingribook.com"＞連結到明日圖書網＜/a＞
＜/body＞
＜/html＞
運行這段代碼，可以實現如圖5.13所示的頁面效果。
圖 5.13 設置外部連結的頁面
按一下“點擊進入明日圖書網”的文字後，將打開明日圖書網的首頁面，如圖5.14所示。
圖 5.14 明日圖書網首頁
5.6.2 通過FTP
Internet上資源豐富，通過檔案傳輸通訊協定FTP，就可以足不出戶獲得各種免費軟體和其他檔。FTP即“檔案傳輸通訊協定”，它是使電腦與電腦之間能夠相互通訊的語言。FTP使檔和資料夾能夠在Internet上公開傳輸。在某些情況下，需要從網路電腦系統管理員處獲得許可才能登錄並訪問電腦上的檔。但是通常會發現，可以使用FTP訪問某個網路或伺服器，而不需要擁有該電腦的帳戶，也不必是授權的密碼持有人。這些匿名FTP伺服器可包含能夠通過FTP公開獲得的廣泛資料。
語法：
＜a href="fip://"＞文字連結＜/a＞
在該語法中，ftp://表明這是關於FTP協定的外部連結，而在其後輸入網站的網址即可。
實例代碼如下：
＜html＞
＜head＞
＜title＞使用FTP服務＜/title＞
＜/head＞
＜body＞
連結FTP伺服器的連結
＜hr size="2"＞
＜a href="ftp://221.8.65.74"＞程式設計詞典個人版更新位址＜/a＞
＜/body＞
＜/html＞
運行這段代碼，可以實現如圖5.15所示的頁面效果。
在頁面中包含一個文本連結，它所連結的位址就是一個FTP網址。而設置的target參數則決定了在打開的新頁面中進行連結。打開的效果如圖5.15所示。
圖 5.15 設置FTP連結的頁面
注意 IP位址應該對應FTP伺服器一起使用。
5.6.3 發送Email
在網路中，很多擁有個人網頁的朋友都喜歡在網站的醒目位置處寫上自己的電子郵寄地址，這樣網頁流覽者一旦用滑鼠按一下由mailto組成超連結後，就能自動打開當前電腦系統中預設的電子郵件用戶端軟體，例如Outlook Express、Foxmail等。其實這是通過mailto標籤來實現的。
語法：
＜a href="mailto:電子郵寄地址"＞連結文字＜/a＞
在該語法的電子郵寄地址後還可以增加一些參數，如表5.3所示。
這些參數可以沒有，也可以同時設置幾個。在帶有多個參數時，需要使用＆符號對參數進行分隔。
實例代碼如下：
＜html＞
＜head＞
＜title＞連結mail伺服器＜/title＞
＜/head＞
＜body＞
連結mail伺服器的連結
＜hr size="2"＞
＜a href="mailto:mingrisoft@mingrisoft.com"＞明日程式設計詞典註冊資訊發送＜/a＞
＜/body＞
＜/html＞
運行這段代碼，效果如圖5.16所示。按一下“明日程式設計詞典註冊資訊發送”後，就會打開系統預設的電子郵件軟體Outlook Express發送郵件，如圖5.17所示。
圖 5.16 電子郵件連結
圖 5.17 發送電子郵件
5.6.4 下載檔案
如果希望製作下載檔案的連結，只需在連結位址處輸入檔所在的位置即可。當流覽器使用者按一下連結後，流覽器會自動判斷檔的類型，以對不同情況做出處理。
語法：
＜a href="檔所在地址"＞連結文字＜/a＞
在檔所在地址中設置檔的路徑，可以是相對位址，也可以是絕對位址。
【例5.8】下載相關檔，代碼如下。
實例位置：光碟\MR\源碼\第5章\5.8
＜html＞
＜head＞
＜title＞文件下載＜/title＞
＜/head＞
＜body＞
＜h4＞最新流覽器下載＜/h4＞＜br/＞＜br/＞
＜a
href="Opera_11.52.1000_XiaZaiBa.exe"＞最新的Opera流覽器下載＜/a＞
＜/body＞
＜/html＞
運行這段代碼，效果如圖5.18所示。
圖 5.18 設置檔下載頁面
按一下頁面中的“最新的Opera流覽器下載”，可以打開如圖5.19所示的提示對話方塊。
圖 5.19 檔下載的提示對話方塊
在該對話方塊中可以按一下“保存”按鈕，並選擇另存為，將彈出如圖5.20所示的對話方塊。在對話方塊中設置相應的存儲位置，按一下“保存”按鈕即可實現檔的保存。
圖 5.20 “另存為”對話方塊
5.7 其他連結
除了常見的內部連結、外部連結、書簽連結以外，在頁面中還可以使用腳本連結和空連結。
5.7.1 腳本連結
在連結語句中，可以通過腳本來實現HTML語言完成不了的功能。下面以JavaScript腳本為例說明腳本連結的使用。
語法：
＜a href="JavaScript:..."＞文字連結＜/a＞
在JavaScript:後面編寫的就是具體的腳本。
實例代碼：
＜html＞
＜head＞
＜title＞腳本連結＜/title＞
＜/head＞
＜body＞
＜a href="javascript:window.close()"＞關閉窗口＜/a＞
＜/body＞
＜/html＞
運行這段代碼，效果如圖5.21所示。
圖 5.21 腳本連結
當按一下“關閉視窗”連結後，可以彈出如圖5.22所示的對話方塊，按一下“是”按鈕後流覽器視窗將關閉。
圖 5.22 是否關閉窗口對話方塊
5.7.2 空連結
在連結中，可以通過#符號實現空連結。所謂空連結，是指滑鼠指向連結後，就變成手形，但按一下後，仍然停留在當前頁面。
語法：
＜a href="#"＞文字連結＜/a＞
實例代碼：
＜html＞
＜head＞
＜title＞空連結＜/title＞
＜/head＞
＜body＞
＜a href="#"＞空連結＜/a＞
＜/body＞
＜/html＞
運行這段代碼，效果如圖5.23所示。按一下連結後，仍然停留在當前頁面。
圖 5.23 空連結效果
5.8 上機實踐
5.8.1 顯示超連結的提示資訊
題目描述
為了明確超級連結所表達的具體涵義，可以為超級連結文字或超級連結圖片添加提示資訊，當滑鼠指向該超級連結文字或圖片時，即可彈出相應的資訊提示，並可設置提示資訊的文字屬性，從而做到所見即所得。本上機實踐將實現一個顯示超連結的提示資訊的實例，效果如圖5.24所示。
圖 5.24 顯示超級連結的提示資訊
技術指導
本實例中主要通過DIV層改變層的樣式，來實現改變層的背景顏色、寬度、字體大小以及x和y座標位置等，關鍵步驟如下。
Step 1 在＜body＞區域中設計一個層和一個超級連結，設置超級連結的onMouseOut事件為out()函數，onMouseOver事件為over()。同時將body的onLoad事件設置為out()函數，使頁面顯示時不顯示層的提示資訊，代碼如下：
＜body onLoad="out()"＞
＜a style="width:100px"
href="http://www.mingrisoft.com" onMouseOut="out()"
onMouseOver="over('吉林省明日科技有限公司')"＞
＜p＞http://www.mingrisoft.com＜/p＞
＜/a＞
＜div id="Tdiv"＞＜/div＞
＜/body＞
Step 2 編寫改變層樣式的JavaScript自訂函數，代碼如下：
＜script
language="javascript"＞
function
over(hint)
{
document.all.Tdiv.innerHTML=hint;
document.all.Tdiv.style.position="absolute";
document.all.Tdiv.style.backgroundColor="#FFFFCC";
document.all.Tdiv.style.width="140px";
document.all.Tdiv.style.fontSize="9pt";
document.all.Tdiv.style.posLeft=window.event.x+document.body.clientLeft+4;
document.all.Tdiv.style.posTop=window.event.y+document.body.clientTop+2;
document.all.Tdiv.style.visibility="visible";
}
＜/script＞
Step 3 編寫滑鼠移出層時隱藏層的自訂JavaScript函數，代碼如下：
＜script
language="javascript"＞
function
out()
{
document.all.Tdiv.style.visibility="hidden";
}
＜/script＞
5.8.2 設置圖片的超連結
題目描述
本練習是圖片超連結的建立，和文字超連結的建立基本類似，都是通過＜a＞＜/a＞標記來實現的，只需要把原來的連結文字換成相應的圖片，效果如圖5.25所示。點擊圖片超連結後，效果如圖5.26所示。
圖 5.25 點擊圖片之前
圖 5.26 點擊圖片之後
技術指導
為一個圖片添加了超連結以後，流覽器會自動給圖片加一個粗邊框，就像在建立文字超連結時會自動加上底線一樣。如果希望去掉這個邊框，只需在＜img＞標記中設置border="0" 後就可以取消這個邊框。本上機實踐的關鍵代碼參考如下：
＜html＞
＜head＞
＜title＞圖片的超連結＜/title＞
＜/head＞
＜body＞
＜a href=sl2-1.html＞＜img src=2.jpg＞＜/a＞
點擊該圖片放大
＜/body＞
＜/html＞
5.9 小結
本章從超連結的理論講起，介紹了3種地址形式：絕對位址、檔相對位址和根目錄相對位址。然後介紹了如何創建各種不同形式的連結。
5.10 習題
選擇題
1.創建一個位於文檔內部位置的連結的代碼是（____）。
A.＜a href="#NAME"＞＜/a＞
B.＜a name="NAME"＞＜/a＞
C.＜a
href="mailtEMAIL"＞＜/a＞
D.＜a href="URL"＞＜/a＞
2.HTML代碼＜a name="NAME"＞＜/a＞表示（____）。
A.創建一個超連結
B.創建一個自動發送電子郵件的連結
C.創建一個位於文檔內部的連接點
D.創建一個指向位於文檔內部的連接點
3.下面關於絕對位址與相對位址的說法錯誤的是（____）。
A.在HTML文檔中插入圖像其實只是寫入一個圖像連結的位址，而不是真的把圖像插入文檔中
B.使用相對位址時，圖像的連結起點是此HTML文檔所在的資料夾
C.使用相對位址時，圖像的位置是相對於Web的根目錄
D.如果要經常進行改動，推薦使用絕對位址
4.下列關於絕對路徑的說法正確的一項是（____）。
A.絕對路徑是被連結文檔的完整URL，不包含使用的傳輸協定
B.使用絕對路徑需要考慮原始檔案的位置
C.在絕對路徑中，如果目的檔案被移動，則連結同時可用
D.創建外部連結時，必須使用絕對路徑
5.在“屬性”面板的“目標視窗”屬性中的_blank表示（____）。
A.將連結檔在上一級框架頁或包含該連結的視窗中打開
B.將連結檔在新的視窗中打開
C.將連結檔載入相同的框架或窗口中
D.將連結檔載入到整個流覽器屬性視窗中，將刪除所有框架
6.下列關於在一個文檔中可以創建的超連結類型，說法不正確的是（____）。
A.連結到其他文檔或檔（如圖形、影片、PDF或音效檔）的連結
B.命名錨記連結，此類連結可跳轉至文檔內的特定位置
C.電子郵件連結，此類連結可新建一個收件人位址已經填好的空白電子郵件
D.空連結和腳本連結，此類連結能夠在物件上附加行為，但不能創建執行JavaScript代碼的連結
7.下面哪一項是正確的電子郵件連結？（____）
A.xxx.com.cn
B.xxx@.net
C.xxx@com
D.xxx@xxx.com
判斷題
1.建立書簽連結時必須在錨點前加“#”。（____）
2.FTP協議是指超文字傳輸協定。（____）
