HTML超鏈接課件

1、 超超 鏈鏈 接接 1.超鏈接基本知識(shí)。 2.超鏈接的建立方法。 3.內(nèi)部鏈接、書簽鏈接、外部鏈接。 超鏈接基本知識(shí)超鏈接基本知識(shí) 1. 超鏈接超鏈接 超文本鏈接（hypertextlink）通常簡稱為 超鏈接（hyperlink），或者簡稱為鏈接（link ）。鏈接是HTML 的一個(gè)最強(qiáng)大和最有價(jià)值 的功能。鏈接是指文檔中的文字或者圖像與另 一個(gè)文檔、文檔的一部分或者一幅圖像鏈接在 一起。 2 絕對(duì)路徑絕對(duì)路徑 絕對(duì)路徑就是主頁上的文件或目錄在硬盤 上的真正路徑。使用絕對(duì)路徑定位鏈接目標(biāo)文 件比較清晰，但是有兩個(gè)缺點(diǎn)：一是需要輸入 更多的內(nèi)容，二是如果該文件被移動(dòng)了，就需 要重新設(shè)置所有的相

2、關(guān)鏈接。例如設(shè)置路徑為 “C:Program files1.htm” 3 相對(duì)路徑相對(duì)路徑 首先分析一下為什么會(huì)發(fā)生圖片不能正常顯 示的情況.舉一個(gè)例子，現(xiàn)在有一個(gè)頁面 index.htm，在這個(gè)頁面中鏈接有一張圖片 photo.jpg，它們的絕對(duì)路徑如下： c:websiteindex.htm c:websiteimgphoto.jpg 如果使用絕對(duì)路徑c:websiteimgphoto.jpg ，那么在自己的計(jì)算機(jī)上將一切正常。因?yàn)榇_實(shí) 可以在指定的位置（即 c:websiteimgphoto.jpg）上找到photo.jpg 文件。但是當(dāng)將頁面上傳到網(wǎng)站時(shí)就很可能會(huì)出 錯(cuò)了，因?yàn)榫W(wǎng)站可能

3、在服務(wù)器的c 盤，也可能在 d 盤，也可能在aa 目錄下，更可能在bb 目錄下 ，也就是說很有可能不存在 c:websiteimgphoto.jpg 這樣一個(gè)路徑。此 時(shí)就用到相對(duì)路徑。所謂相對(duì)路徑，顧名思義就 是自己相對(duì)于目標(biāo)位置。在上例的index.htm 中 鏈接的photo.jpg 可以使用imgphoto.jpg 來定 位文件，那么不論將這些文件放到哪里，只要它 們的相對(duì)關(guān)系沒有變，就不會(huì)出錯(cuò)。 在編程中使用“.”來表示上一級(jí)目錄， “.”表示上上級(jí)的目錄，以此類推。再看 幾個(gè)例子，注意所有例子中都是index.htm 文 件中鏈接有一張圖片photo.jpg。看下面這個(gè) 例子： c

4、:websitewebindex.htm c:websiteimgphoto.jpg 在此例中，index.htm 中鏈接的photo.jpg 應(yīng) 該怎樣表示呢？錯(cuò)誤寫法：imgphoto.jpg，這種 寫法是不正確的。在此例中，對(duì)于index.htm 文 件來說，imgphoto.jpg所代表的絕對(duì)路徑是 c:websitewebimgphoto.jpg，顯然不符合要 求。 正確寫法：使用.imgphoto.jpg 的相對(duì)路徑 來定位文件。 對(duì)于相對(duì)路徑來說，設(shè)置起來一般有如下對(duì)于相對(duì)路徑來說，設(shè)置起來一般有如下 3 種寫法：種寫法： 1.同一目錄下的文件：只需要輸入鏈接文件的名稱即 可，如

5、01.html。 2.上一級(jí)目錄中的文件，在目錄名和文件名之前加入 “./”，如./04/02.html；如果是上兩級(jí)，則需要加 入兩個(gè)“./”，如././file/01.html。 3.下一級(jí)目錄：輸入目錄名和文件名，之間以“/”隔 開，如：Html/05/01.html。除了絕對(duì)路徑和相對(duì)路 徑之外，還有一種稱為根目錄。根目錄常常在大規(guī)模 站點(diǎn)需要放置在幾個(gè)服務(wù)器上，或者一個(gè)服務(wù)器上同 時(shí)放置多個(gè)站點(diǎn)時(shí)使用。其書寫形式很簡單，只需要 以“/”開始，表示根目錄，之后是文件所在的目錄名 和文件名。 超鏈接標(biāo)記的基本語法超鏈接標(biāo)記的基本語法 超級(jí)鏈接的語法根據(jù)其鏈接對(duì)象的不同而有所變 化，但都是

6、基于標(biāo)記的。 語法：鏈接元素或鏈接元素 說明：在該語法中，鏈接元素可以是文字， 也可以是圖片或其他頁面元素。其中href 是 hypertextreference 的縮寫。通過超級(jí)鏈接的 方式可以使各個(gè)網(wǎng)頁之間鏈接起來，使網(wǎng)站中眾 多的頁面構(gòu)成一個(gè)有機(jī)整體，使訪問者能夠在各 個(gè)頁面之間跳轉(zhuǎn)。超級(jí)鏈接可以是一段文本、一 幅圖像或其他網(wǎng)頁元素，當(dāng)在瀏覽器中用鼠標(biāo)單 擊這些對(duì)象時(shí)，瀏覽器可以根據(jù)指示載入一個(gè)新 的頁面或者轉(zhuǎn)到頁面的其他位置。 2 建立文本超鏈接建立文本超鏈接 在網(wǎng)頁中，文本超鏈接是最常見的一種。它通 過網(wǎng)頁中的文件和其他的文件進(jìn)行鏈接。 語法：鏈接文字 說明：在該語法中，鏈接地址可以

7、是絕對(duì)地址，也 可以是相對(duì)地址。 文本鏈接 神話故事：八仙斗花龍 下一篇：女媧補(bǔ)天 傳說，有一天八仙要到東海去游蓬萊島。本來， 騰云駕霧，一眨眼就可到，可是呂純陽偏偏別出心裁，提出要乘船過海，觀 賞海景。他拿來鐵拐李的拐杖，往海里一拋，喝聲“變”，頓時(shí)變成一艘寬 敞、漂亮的大龍船，八位大仙坐船觀景，喝酒斗歌，好不熱鬧。不料，因此 惹出一場麻煩來。原來，龍宮里有條花鱗惡龍，是龍王的第七個(gè)兒子，稱為 “花龍?zhí)印?。這天，他閑得沒事，在水晶宮外游蕩，忽聞海面上有仙樂之 聲，便循聲尋去，猛見一條雕花龍船，內(nèi)坐八位奇形怪狀的大仙，其中有個(gè) 妙齡女郎，楚楚動(dòng)人，花龍?zhí)右姶讼勺?，魂魄俱消，早忘了師傅南極仙

8、翁 的忠告，忘了龍王母的訓(xùn)導(dǎo)，想入非非，似魔似癡地迷上何仙姑了。 在這段代碼中，有一個(gè)文本鏈接“下一篇：女媧補(bǔ)天”，它鏈接到了當(dāng) 前目錄下的next.html 文件。 14 文本鏈接 神話故事：女媧補(bǔ)天 上一篇：八仙斗花龍 有一天，大龍和精衛(wèi)、小太極一起到遠(yuǎn)古 時(shí)代去玩，居然看到了傳說中能頂住上天、撐開天與地的不周山， 也遇到了美麗的女媧娘娘，甚至看到女媧補(bǔ)天的過程那真是一場驚 天地而泣鬼神的經(jīng)歷，講來都令人鼻酸！ 天上的大神女媧，用泥土做成泥娃娃，再 賦予它們生命。從此女媧創(chuàng)造了人，人們世世代代繁衍生息，過著幸福 的生活。然而，好景不長。有一年，火神祝融和水神共工打起仗來。共 工把撐天的柱子

9、不周山撞倒了，天塌下半邊來，砸了很多窟窿，把地也 砸裂了，地上的洪水及天河的水不停地漏下來，造成大地上水患、火海 ，真是悲慘??！ 設(shè)置超鏈接的目標(biāo)窗口設(shè)置超鏈接的目標(biāo)窗口 在創(chuàng)建網(wǎng)頁的過程中，有時(shí)候并不希望超鏈接的 目標(biāo)窗口將原來的窗口覆蓋，比如希望不論鏈接到 何處，主頁面都保留在原處。這時(shí)可以通過target 參數(shù)設(shè)置目標(biāo)窗口的屬性。 語法：鏈接元素 說明：在該語法中，target 參數(shù)的取值有4 種 target值值 目標(biāo)窗口的打開方式目標(biāo)窗口的打開方式 _parent 在上一級(jí)窗口打開，常在分幀的框架頁面中使用 _blank 新建一個(gè)窗口打開 _self 在同一窗口打開，與默認(rèn)設(shè)置相同

10、_top 在瀏覽器的整個(gè)窗口打開，將會(huì)忽略所有的框架結(jié)構(gòu) 目標(biāo)窗口的打開方式 世界影片介紹 孤島The Island 導(dǎo)演：邁克爾貝 Michael Bay 編?。喊锟怂箮炱澛?Alex Kurtzman 主演：伊萬邁克格雷戈 Ewan McGregor 斯嘉麗約翰森 Scarlett Johansson 迪蒙郝德森 Djimon Hounsou 邁克爾克拉克鄧肯Michael Clarke Duncan 類型：動(dòng)作/劇情/科幻/驚悚 級(jí)別：PG-13 發(fā)行：夢工場 Dreamwork 上映日期：2005 年7 月22 日 官方網(wǎng)站：theisland- 影片詳情 more.html 文件的

11、代碼如下： 目標(biāo)窗口的打開方式 影片詳情 孤島The Island 男青年林肯6E（伊萬邁克格雷戈）生活在 一個(gè)貌似烏托邦、卻被21 世紀(jì)中葉先進(jìn)的科學(xué)技術(shù)設(shè)備武裝起來的社區(qū) 里。 但是，不久后的一個(gè)意外讓林肯驚覺：原來 ，他頭腦中一切關(guān)于自己身世和整個(gè)這個(gè)社區(qū)的認(rèn)識(shí)都是一個(gè)巨大的謊 言！他和社區(qū)里的所有居民其實(shí)都是“神秘島”居民們的克隆人，他們 的存在只是為了給他們的“原型”提供各種更換用的身體零件，而這個(gè) 社區(qū)其實(shí)只是個(gè)軟禁他們的牢籠 內(nèi)部內(nèi)部 鏈鏈 接接 在各種超鏈接中，根據(jù)鏈接對(duì)象的不同，設(shè) 置的方式也有所區(qū)別。內(nèi)部鏈接是指鏈接的對(duì) 象是在同一個(gè)網(wǎng)站中的資源。下面通過一個(gè)實(shí) 例說明在一

12、個(gè)網(wǎng)站中內(nèi)部鏈接的實(shí)現(xiàn)方法。 在本實(shí)例中共包含 3 個(gè)文件，分別為 index.html、film1.html 和film2.html。其中， index.html 作為一個(gè)起始頁面，另外兩個(gè)文件 放置在與index.html 文件同級(jí)的film 文件夾中 。本實(shí)例通過3 個(gè)文件的互相連接說明在網(wǎng)站 內(nèi)部進(jìn)行鏈接的方法。 文件 index.html 的代碼如下： 內(nèi)部鏈接的實(shí)現(xiàn) 世界影片介紹 征婚啟事Must Love Dogs 導(dǎo)演編劇：格雷大衛(wèi)古德伯格 Gary David Goldberg 主演：戴安蓮恩 Diane Lane 克里斯托佛布拉默 Christopher Plummer 約

13、翰庫薩克 John Cusack 伊麗莎白博金斯 Elizabeth Perkins 類型：愛情 地區(qū)：美國 上映日期：2005 年7 月 影片詳情 帝企鵝日記LA MARCHE DE LEMPEREUR 導(dǎo)演/編?。簠慰速Z蓋 Luc Jacquet 主演：Romaine Bohringer Charles Berling Jules Sitruk 類型：劇情 地區(qū)：法國 上映日期：2005 年8 月 影片詳情 影片“征婚啟事”的介紹文件 film1.html 的代碼如下： 內(nèi)部鏈接的實(shí)現(xiàn) 征婚啟事Must Love Dogs 劇情介紹： 搞對(duì)象從來就不是什么輕松的事情。有 好事者曾經(jīng)總結(jié)過如

14、下的愛情黃字公式：一份羞辱+兩份惱怒+一 些對(duì)未來好運(yùn)氣的盲從=所謂愛情。而現(xiàn)如今的搞對(duì)象方式就 更沒法讓人樂觀了，網(wǎng)絡(luò)交友、吃飯相親、朋友或親戚的胡亂介 紹到底怎樣才能找到合適的意中人?。?返回 下一個(gè)影片介紹 初始頁面index.html 則位于該文件的上 一級(jí)目錄中，在鏈接時(shí)需要在文件名前添加 “./”。而影片“帝企鵝日記”的影片介紹與 文件film1.html 位于同一目錄下，是同級(jí)文件 ，在鏈接時(shí)只需要將鏈接地址設(shè)置為該文件名 film1.html 即可。 文件film2.html 的代碼如下： 內(nèi)部鏈接的實(shí)現(xiàn) 帝企鵝日記LA MARCHE DE LEMPEREUR 劇情介紹： 本片

15、記錄的是在南極大陸上生活的帝企鵝的生存 和繁衍的故事。影片展示了帝企鵝這個(gè)滑稽、可愛而又堅(jiān)強(qiáng)的物種怎樣與嚴(yán) 酷的自然環(huán)境和它們的天敵作斗爭，怎樣對(duì)小企鵝傾注它們的愛，從而完成 它們的生命延續(xù)之旅。 返回 下一個(gè)影片介紹 5 書簽書簽 鏈鏈 接接 當(dāng)創(chuàng)建的網(wǎng)頁內(nèi)容特別多時(shí)，可以通過書簽 對(duì)內(nèi)容進(jìn)行鏈接，這樣讀者在閱讀時(shí)可以通過 書簽進(jìn)行內(nèi)容的跳轉(zhuǎn)，這種鏈接也稱為網(wǎng)頁內(nèi) 部的書簽鏈接。 5.1 建立書簽建立書簽 書簽可以與鏈接文字在同一頁面，也可以在不同的頁 面。但要實(shí)現(xiàn)網(wǎng)頁內(nèi)部的書簽鏈接，都需要先建立書簽 。通過建立的書簽才能對(duì)頁面的內(nèi)容進(jìn)行引導(dǎo)和跳轉(zhuǎn)。 語法：文字 說明：在該語法中，書簽名稱就

16、是對(duì)于后面要跳轉(zhuǎn)所創(chuàng)建 的書簽，而文字則是設(shè)置鏈接后跳轉(zhuǎn)的位置。 實(shí)例代碼： 定義書簽 愛情測試：你的戀愛狂熱度是多少 選擇A：凌晨零時(shí)到清晨六點(diǎn) 向來朝氣蓬勃的你，的確喜歡談戀愛 ，喜歡那種活力十足的感覺，但是你的戀愛狂熱度，卻是平平而 已。因?yàn)槟銓?duì)生活中的其他事物，如你個(gè)人的嗜好，也有著戀愛 般的熱度，過度分散目標(biāo)的結(jié)果，使你的戀愛狂熱度只有 30% 選擇B：清晨六點(diǎn)到中午十二點(diǎn) 你那死不服輸?shù)男愿駥⒛阍谌巳褐歇?dú) 立出來，戀愛的時(shí)候，亦因?yàn)椴豢蠈?duì)對(duì)方坦白而遭拋棄，你唯一 的好處是你絕不拖拖拉拉沒完沒了。但是有時(shí)候戀愛也要講小策 略的哦，偶爾“認(rèn)輸”也未嘗不是件好事！ 選擇C：中午十二點(diǎn)到下

17、午六點(diǎn) 你是個(gè)十分理智的MM，但聰明反被 聰明誤哦，你對(duì)每件事都小心謹(jǐn)慎，在愛情道路上，因怕受傷而 不敢用情太深，但這會(huì)令你的戀人有種被忽視的感覺，對(duì)你的熱 情亦因此大減，其實(shí)有時(shí)候在他面前裝迷糊裝可愛，他會(huì)更加喜 歡你哦。 選擇D：下午六點(diǎn)到凌晨零點(diǎn) 你有點(diǎn)神經(jīng)質(zhì)哦，但是是 個(gè)很執(zhí)著的MM，別人很難適應(yīng)你的處世作風(fēng)哦，你 的男朋友也一樣哦，你一時(shí)對(duì)他風(fēng)情萬種，一時(shí)對(duì)他 冷若冰霜，令他感到十分迷惑。即使對(duì)你一見鐘情， 他亦會(huì)被你給他飄忽不定的感覺而嚇得溜之大吉，要 改變這樣的狀況，MM 可要好好控制一下自己的情緒 哦！ 在這段代碼中，定義了4 個(gè)書簽，分別命名為 answerA、answerB

18、、answerC 和answerD。 5.2 鏈接到同一頁面的書簽鏈接到同一頁面的書簽 下面就可以為剛才制作的書簽添加鏈接內(nèi)容 了。在代碼的前面增加鏈接文字和鏈接地址就 能夠?qū)崿F(xiàn)同頁面的書簽鏈接。 語法：鏈接的文字 說明：在該語法中，書簽的名稱就是剛才所定義 的書簽名，也就是name 的賦值。而#則代表 這是書簽的鏈接地址。實(shí)例代碼： 定義書簽 愛情測試：你的戀愛狂熱度是多少 情竇初開的漂亮小MM 終于找到了心中的白馬王子啦 ！可是可是是不是好想好想將感情更順利地進(jìn)行下去、急速 升溫？那么，可愛的MM 們快來做這個(gè)測試吧保證讓你和心 中的白馬王子開開心心一路牽手到底。一天之中，你最喜歡什么 時(shí)

19、間哦？ A:凌晨零時(shí)到清晨六點(diǎn) B:清晨六點(diǎn)到中午十二點(diǎn) C:中午十二點(diǎn)到下午六點(diǎn) 下午六點(diǎn)到凌晨零時(shí) 選擇A：凌晨零時(shí)到清晨六點(diǎn) 向來朝氣蓬勃的你，的確喜歡談戀愛，喜歡那 種活力十足的感覺，但是你的戀愛狂熱度，卻是平平而已。因?yàn)槟銓?duì)生活 中的其他事物，如你個(gè)人的嗜好，也有著戀愛般的熱度，過度分散目標(biāo)的 結(jié)果，使你的戀愛狂熱度只有30% 選擇B：清晨六點(diǎn)到中午十二點(diǎn) 你那死不服輸?shù)男愿駥⒛阍谌巳褐歇?dú)立出來， 戀愛的時(shí)候，亦因?yàn)椴豢蠈?duì)對(duì)方坦白而遭拋棄，你唯一的好處是你絕不拖 拖拉拉沒完沒了。但是有時(shí)候戀愛也要講小策略的哦，偶爾“認(rèn)輸”也未 嘗不是件好事！ 選擇C：中午十二點(diǎn)到下午六點(diǎn) 你是個(gè)十分

20、理智的MM，但聰明反被 聰明誤哦，你對(duì)每件事都小心謹(jǐn)慎，在愛情道路上，因怕受傷而 不敢用情太深，但這會(huì)令你的戀人有種被忽視的感覺，對(duì)你的熱 情亦因此大減，其實(shí)有時(shí)候在他面前裝迷糊裝可愛，他會(huì)更加喜 歡你哦。 選擇D：下午六點(diǎn)到凌晨零點(diǎn) 你有點(diǎn)神經(jīng)質(zhì)哦，但是是個(gè)很執(zhí)著的 MM，別人很難適應(yīng)你的處世作風(fēng)哦，你的男朋友也一樣哦，你 一時(shí)對(duì)他風(fēng)情萬種，一時(shí)對(duì)他冷若冰霜，令他感到十分迷惑。即 使對(duì)你一見鐘情，他亦會(huì)被你給他飄忽不定的感覺而嚇得溜之大 吉，要改變這樣的狀況，MM 可要好好控制一下自己的情緒哦！ 運(yùn)行這段代碼，可以看到4 個(gè)文字鏈接。 在頁面中單擊其中的一個(gè)鏈接文字，頁面將會(huì) 跳轉(zhuǎn)到該鏈接的書簽所在位置。單擊“A：清 晨零時(shí)到清晨六點(diǎn)”,單擊頁面中的“C：中午 十二點(diǎn)到下午六點(diǎn)”，頁面跳轉(zhuǎn)到書簽 answerC 所在的位置. 5.3 鏈接到不同頁面的書簽鏈接到不同頁面的書簽 書簽鏈接不但可以鏈接到同一頁面，也可 以在不同頁面中設(shè)置。 語法： 鏈接的文字 說明：在該語法中，與同一頁面的書簽鏈接不同 的是，需要在鏈接的地址前增加文件所在的位 置。 定義書簽 愛情測試：你的戀愛