第5章 超鏈接

1、第5章 超鏈接 超鏈接是一個網(wǎng)站的精髓，是網(wǎng)站中使用最為頻繁的元素 之一，同樣，是HTML 文件中最核心的應用之一，互聯(lián) 網(wǎng)上的所有Web頁面都是可以互相鏈接的，通過點擊建有 超鏈接的文本或圖像就可以鏈接到指定的Web頁面。有了 超鏈接我們才可以在各個網(wǎng)頁或是站點之間進行遨游。 5.1 超鏈接概述超鏈接概述 超鏈接在本質(zhì)上屬于一個網(wǎng)頁的一部分，它是一種允許我們同 其它網(wǎng)頁或資源之間進行連接的元素，它使網(wǎng)絡(luò)世界構(gòu)成一個 有機的整體。各個相關(guān)網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個 網(wǎng)站。 所謂的超鏈接是指從一個網(wǎng)頁指向一個目標的連接關(guān)系，這個 目標可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還 可

2、以是一個圖片，一個電子郵件地址，一個文件，甚至是一個 應用程序。 而在一個網(wǎng)頁中用來超鏈接的對象，可以是一段文本或者是一 個圖片等。 超鏈接由源地址文件和目標地址文件構(gòu)成，當訪問者單擊 超鏈接時，鏈接目標將顯示在瀏覽器上，并且根據(jù)目標的 類型來打開或運行。 鏈接由以下3個部分組成： 5.2 超鏈接的路徑 每一個文件都有自己的存放位置和路徑，理解從一個文件 鏈接到另外一個文件之間的路徑關(guān)系是創(chuàng)建超鏈接的根本。 URL的英文全稱是Uniform Resouce Locator，中文翻譯 為統(tǒng)一資源定位器。指的就是每一個文件都具有的路徑 地址。超鏈接的路徑可以分三種： 5.2.1 絕對路徑絕對路徑

3、http:/ http:/ 5.2.2相對路徑對路徑 相對路徑也叫文檔相對路徑，是以當前文件所在位置為起 點，進行相對文件的查找。相對路徑不包括協(xié)議和主機地 址信息，表示它的路徑與當前文檔的訪問協(xié)議和主機名相 同，甚至有相同的目錄路徑。通常只包含文件夾名和文件 名，甚至只有文件名。 相對路徑是站點內(nèi)容最常用的方法，具體方法是利用站點 內(nèi)文件夾層次結(jié)構(gòu)，指定從當前文檔到所鏈接的文檔的路 徑。 1. 如果鏈接到同一目錄下，則只需輸入要鏈接文件的名稱。 例如： 文件info.html和link.html位于同一個文件夾內(nèi)，則 link.html相對于info.h

4、tml的路徑就是“info.html”。 2. 如果要鏈接到下級目錄中的文件。只需先輸入目錄名，然后加/， 再輸入文件名。 例如：info.html的路徑為d:mysiteinfo.html,圖像文件flower.jpg路 徑是d:mysiteimagesflower.jpg，則flower.jpg相對info.html的相 對路徑是“images/flower.jpg”。 例如：info.html的路徑為d:mysiteinfo.html,圖像文件flower.jpg路 徑是d:mysitenewsimagesflower.jpg，則flower.jpg相對info.html 的相對路徑是“

5、news/images/flower.jpg”。 3. 如果要鏈接到上一級目錄中文件，則先輸入./，再輸 入文件名。 例如：info.html文件的路徑是d:mysitenewsinfo.html， index.html的路徑是d:mysiteindex.html。index.html相 對與info.html的路徑為“./index.html”。 5.2.3 根路徑根路徑 根路徑也叫根相對路徑，目錄地址同樣可用于創(chuàng)建內(nèi)部鏈 接，但一般情況不用。根路徑目錄地址的書寫也很簡單， 首先以一個斜杠開頭，代表根目錄，然后書寫文件夾名， 最后書寫文件名。例如：/web/news/index.html。

6、在鏈接站點內(nèi)文件時，我們通常采用相對路徑而不使用根 跟徑和絕對路徑。后兩者在發(fā)生了文件夾改名或者移動的 情況后，所有的鏈接都會失敗，并且一旦將此文夾件移到 網(wǎng)絡(luò)服務器上時，同樣需要重做大量的更改。而使用相對 路徑，不僅在本地機器環(huán)境下適合，上傳到網(wǎng)絡(luò)或其他系 統(tǒng)下也不需要進行多少更改就能夠做準確鏈接。 鏈接元素鏈接元素 5.3 超鏈接的建立超鏈接的建立 5.3.1 插入外部鏈接插入外部鏈接 不論是文字或是圖像，都可以創(chuàng)建鏈接到絕對地址的外部 鏈接。創(chuàng)建外部鏈接通常要使用絕對的鏈接路徑。最常用 的外部鏈接格式為： 鏈接顯示名 注意網(wǎng)址中的http不可省略。 網(wǎng)站直通車 常用 百度 google

7、hao123 新聞 新浪 搜狐 網(wǎng)易 購物 淘寶網(wǎng) 當當網(wǎng) 京東商城 5.3.2 插入內(nèi)部鏈接插入內(nèi)部鏈接 所謂內(nèi)部鏈接，就是一 個網(wǎng)站內(nèi)部不同文件之 間的鏈接，創(chuàng)建內(nèi)部鏈 接通常采用相對路徑。 內(nèi)部鏈接 點擊這里鏈接到“網(wǎng)站直通車”頁面即5-1.html 5.3.3 以圖像為源點的鏈接以圖像為源點的鏈接 圖像上設(shè)鏈接 常用網(wǎng)站 5.3.4 鏈接打開目標鏈接打開目標target屬性屬性 在制作網(wǎng)頁的過程中，有時候我們希望超鏈接的目標窗口 是在一個新的窗口中打開，原頁面仍然保留在原處。也就 是說，不希望超鏈接的目標窗口將原來的窗口覆蓋掉，這 時可以通過標記的target屬性來設(shè)置目標窗口的打開

8、方式。 基本語法：基本語法： 鏈接元素 語法說明：語法說明： target屬性用于指定打開鏈接的目標窗口，其默認方式是原窗口。建立 鏈接的目標窗口有以下四個選項： _self: 默認，被鏈接的文檔加載到與該鏈接文字相同的框架或窗口中。 _blank:將被鏈接的文檔加載到新的瀏覽器窗口中。將被鏈接的文檔加載到新的瀏覽器窗口中。 _parent:將被鏈接的文檔加載到父框架窗口中。 _top: 被鏈接的文檔加載到整個瀏覽器窗口中并刪除所有框架。 5.3.6 鏈接的目標類型鏈接的目標類型 超鏈接不僅可以鏈接到一個網(wǎng)頁文件，還可以是其它的文 件類型，可以鏈接到一個圖片、一個壓縮包、一個doc文 檔或是一

9、個郵箱地址等等。 李白簡介 李白（701.2.28762），字太白， 號青蓮居士。.。 李白畫像 李白故事 李白作品 5.3.7 Email鏈接鏈接 Email鏈接，可以快速發(fā)送電子郵件，點擊電子郵件鏈接 后，將啟動機器上的電子郵件管理軟件，然后可以發(fā)送電 子郵件給收件人。例如： 請寫電子郵件聯(lián) 系我們 p錨記鏈接又叫書簽鏈接，常常用于那些內(nèi)容龐大繁瑣的網(wǎng) 頁，通過點擊命名錨記，不僅讓我們能指向文檔，還能指 向頁面里的特定位置。元素的name屬性用于定義錨 記的名稱，一個頁面可以定義多個錨記，通過的href 屬性可以根據(jù)name跳轉(zhuǎn)到對應的錨記位置。 p錨記鏈接可以在同一頁面中鏈接，也可以在不

10、同頁面中鏈 接，在不同頁面中鏈接的前提是需要指定好鏈接的頁面地 址和鏈接的錨記位置。 5.4 錨記（書簽）鏈接錨記（書簽）鏈接 p基本語法：基本語法： 在同一頁面使用錨記鏈接的方法： 鏈接文本 在不同頁面使用錨記鏈接的方法： 鏈接文本 西游記西游記 第第001回回 第第002回回 第第003回回 第一回靈根育孕源流出心性修持大道生 . . . 回到頂部回到頂部 第二回第二回悟徹菩提真妙理悟徹菩提真妙理斷魔歸本合元神斷魔歸本合元神 話表美猴王得了姓名，.。 . . 回到頂部回到頂部 第三回第三回四海千山皆拱伏四海千山皆拱伏九幽十類盡除名九幽十類盡除名 . 回到頂部回到頂部 不同頁面的錨記鏈接示例

11、 席幕容經(jīng)典詩集目錄 無怨的青春無怨的青春 錯誤錯誤 蓮的心事蓮的心事 有時候在圖像上的某個區(qū)域或多個區(qū)域設(shè)置鏈接，這就需 要用到圖像映射。 5.5 設(shè)置圖像映射設(shè)置圖像映射 5.5.1 了解熱區(qū)和圖像映射了解熱區(qū)和圖像映射 在 HTML 中還可以把圖片劃分成多個熱點區(qū)域，每一個 熱點域鏈接到不同網(wǎng)頁的資源。這種效果的實質(zhì)是把一幅 圖片劃分為不同的熱點區(qū)域，再讓不同的區(qū)域進行超鏈接。 圖像映射是一個能對鏈接指示作出反應的圖形。單擊該圖 形的已定義區(qū)域，可轉(zhuǎn)到與該區(qū)域相鏈接的目標。 5.5.2 創(chuàng)建圖像映射 元素是用來創(chuàng)建圖像映射區(qū)域，在元素之間添加 映射區(qū)域信息，為了能夠引用相應的映射信息，應

12、在 元素中使用 name 屬性指定圖像映射的名稱。 基本語法：基本語法： . 語法說明：語法說明： 中的name屬性和中的usemap屬性將圖像和 熱區(qū)聯(lián)系起來。 要在圖像中添加熱區(qū)應使用 標記，每個熱區(qū)用一 個元素，如果一幅圖像上需要有三個映射區(qū)域,則 應使用三個元素。 標記有以下3個常用屬性： 1、href屬性：用于標識出超鏈接的目標文檔。 2、shape屬性：熱區(qū)形狀，取值可以是rect(矩形)、circle(圓形)、 poly(多邊形)和default(整個圖像區(qū)域)。 3、coords 屬性：用于標識熱區(qū)坐標。對于矩形而言，coords有4 個值，表示矩形區(qū)域左上角x坐標、左上角y坐

13、標、右下角x坐 標和右下角y坐標；對于圓形而言，coords有3個值，分別表示 圓心的x坐標、y坐標以及圓的半徑值；而對于多邊形來說，則 coords有多對值，分別表示各頂點的坐標值。 5.6 浮動窗口及其鏈接浮動窗口及其鏈接 浮動窗口也被稱為內(nèi)嵌框架、內(nèi)嵌窗口等。 元素可以用來創(chuàng)建包含在另外一個文檔中的浮動 窗口，實際上就是將一個HTML文檔嵌入到另外一個 HTML文檔中，如同“畫中畫”的感覺一樣。 5.6.1 浮動窗口浮動窗口 基本語法：基本語法： 語法說明：語法說明： src屬性用來指定在iframe中顯示的文檔的URL。在 HTML4中元素有很多屬性，但是在HTML5中 僅僅支持src屬性。 嵌入的頁面 嵌入的頁面 iframe示例 iframe應用示例 iframe示例 iframe應用示例 淘寶網(wǎng) 京東商城 當當網(wǎng) 5.7 定義基準網(wǎng)址 基本語法：基本語法： 語法說明：語法說明： href屬性設(shè)置基準網(wǎng)址，target設(shè)置目標窗口打開方 式。元素必須位于網(wǎng)頁頭部，在同一文檔中，最 多只能使用一個元素。 ba