第3章超鏈接

1、第三章 超鏈接3.1 認識超鏈接 超級鏈接在本質(zhì)上屬于一個網(wǎng)頁的一部分，它是一種允許用戶同其他網(wǎng)頁或站點之間進行鏈接的元素。 HTML 使用超級鏈接與網(wǎng)絡上的另一個文檔相連。 幾乎可以在所有的網(wǎng)頁中找到鏈接。 各個網(wǎng)頁鏈接在一起后，才能真正構成一個網(wǎng)站。3.1.1什么是超級鏈接 所謂的超級鏈接又叫超鏈接是指從一個網(wǎng)頁指向一個目標的鏈接關系。 目標可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片、一個電子郵件地址、一個文件，甚至是一個應用程序。而在一個網(wǎng)頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。 當瀏覽者單擊已經(jīng)鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據(jù)目標

2、的類型來打開或運行。 3.1.1 超鏈接實例 創(chuàng)建超級鏈接本例演示如何在 HTML 文檔中創(chuàng)建鏈接。 將圖像作為鏈接本例演示如何使用圖像作為鏈接。3.1.2 超鏈接類型 1 1按照鏈接路徑分類按照鏈接路徑分類 按照鏈接路徑一般分為以下3種類型： 內(nèi)部鏈接、錨點鏈接和外部鏈接。 所謂內(nèi)部鏈接，在同一個網(wǎng)站內(nèi)部，不同的html頁面之間的鏈接關系，在建立網(wǎng)站內(nèi)部鏈接的時候，要明確哪個是主鏈接文件（即當前頁），哪個是被鏈接文件。 所謂外部鏈接，跳轉(zhuǎn)到當前網(wǎng)站外部，與其它網(wǎng)站頁面或其它元素之間的鏈接關系。 所謂錨點鏈接，也稱為書簽鏈接，用來標記文檔中的特定位置，使用其可以跳轉(zhuǎn)到當前文檔或其他文檔中的標記

3、位置。3.1.2 超鏈接類型 2 2按照使用對象分類按照使用對象分類 如果按照使用對象的不同，網(wǎng)頁中的鏈接又可以分為：文本超鏈接、圖像超鏈接、E-mail鏈接、錨點鏈接、多媒體文件鏈接、空鏈接等。3.2 創(chuàng)建超級鏈接 本節(jié)介紹如何在頁面內(nèi)創(chuàng)建超級鏈接，包括創(chuàng)建外部鏈接和內(nèi)部鏈接，最后介紹如何改變鏈接的顏色。 3.2.1 標記 設置鏈接的基本標記是，被其包含的對象為被設置為超級鏈接的對象。 基本語法： 超鏈接名稱3.2.1 標記 （續(xù)） 語法解釋： （1）href屬性用于設置鏈接的目標。建立鏈接時，屬性“href”定義了這個鏈接所指的目標地址，也就是路徑。屬性值為URL，可以是絕對路徑也可以是相

4、對路徑。每一個網(wǎng)站都具有獨一無二的地址，英文中被稱作URL（Uniform Resource Locator），即統(tǒng)一資源定位器，同一個網(wǎng)站下的每一個網(wǎng)頁都有不同的地址，但是在創(chuàng)建一個網(wǎng)站的網(wǎng)頁時，不需要為每一個鏈接都輸入完整的地址，只需要確定當前文檔同站點根目錄之間的相對路徑關系就可以了?？赡艿闹涤薪^對URL、相對URL和錨URL。3.2.1 標記 （續(xù)） （2）target用于指定打開鏈接的目標窗口，其屬性的默認方式是原窗口，僅在 href 屬性存在時使用。 （3）name屬性用于規(guī)定鏈接的名稱。 （4）title屬性用于規(guī)定有關鏈接的額外信息，鼠標懸于該鏈接上方時顯示提示。3.2.2 絕

5、對路徑與相對路徑 在設定超級鏈接href屬性值之前，首先了解網(wǎng)站中的文檔路徑，文檔路徑分為絕對路徑、根目錄相對路徑以及文檔相對路徑等三種類型。 3.2.2 絕對路徑與相對路徑（續(xù)） 1 1絕對路徑絕對路徑 絕對路徑是包含服務器協(xié)議（對于網(wǎng)頁來說通常是http:/或ftp:/）的完全路徑，絕對路徑包含的是精確地址而不用考慮源文件的位置。但是如果目標文件被移動，則鏈接無效。創(chuàng)建外部超鏈接時必須使用絕對路徑。 絕對路徑是指資源的完整地址，包括URL的所有3個部分，形式如下： 協(xié)議：/計算機/文檔名 例如，http:/ 如果創(chuàng)建外部鏈接鏈接，在對標記的href屬性值的設定時，使該值所代表的值為為絕對路

6、徑，這樣在單擊該鏈接時就會鏈接到網(wǎng)站的外部。3.2.2 絕對路徑與相對路徑（續(xù)） 服 務文字描述URL形式WWW新浪網(wǎng)新浪FTP重慶理工大學ftp服務器重慶理工大學E-mail郵件地址寫信3.2.2 絕對路徑與相對路徑（續(xù)） 2 2相對路徑相對路徑 相對路徑又分為根目錄相對的路徑與文檔相對的路徑兩種。相對路徑適合于創(chuàng)建網(wǎng)站的內(nèi)部鏈接，一個相對路徑不包括協(xié)議和主機信息，因為它的路徑與當前文檔的訪問協(xié)議和主機相同，甚至有相同的目錄路徑，所以通常只包含文件夾名和文件名，有時甚至只有文件名。（1）根目錄相對路徑：是從當前站點的根目錄開始的路徑。站點上所有可公開的文件都存放在站點的根目錄下。和根目錄相對

7、的路徑使用斜杠以告訴服務器從根目錄開始。例如，如果一個站點的根目錄在D:Program FilesApache Software FoundationTomcat 6.0webappsROOT下，ROOT目錄下存在文件31.html文件和子目錄part3，在part3下存在子目錄1，子目錄1下存在文件32.html，文件32.html中有鏈接訪問文件31.html，那么單擊該文件的顯示的鏈接就會跳轉(zhuǎn)到文件31.html。3.2.2 絕對路徑與相對路徑（續(xù)） （2）文檔相對路徑：是指和當前文檔所在的文件夾相對的路徑。這種路徑通常是最簡單的路徑，可以用來鏈接和當前文檔處于同一文件夾下的文檔。下面舉

8、例說明。如果鏈接到同一目錄下的文件part3.html，只需要指定鏈接文件的名稱即可href=”part3.html”。 如果要鏈接上一級目錄中的文件part3.html，則要輸入“./”然后再輸入文件名href=”./part3.html”。如果要鏈接上兩級目錄中的文件part3.html，則要輸入“././”然后再輸入文件名href=”././part3.html”。如果鏈接到當前目錄的下一級子目錄web下的文件part3.html，則要輸入目錄名“web/”然后再輸入文件名href=”web/part3.html”。3.2.3 target屬性 標簽的 target 屬性規(guī)定在何處打開鏈

9、接文檔。如果在一個 標簽內(nèi)包含一個 target 屬性，瀏覽器將會載入和顯示用這個標簽的 href 屬性命名的、名稱與這個目標吻合的框架或者窗口中的文檔。如果這個指定名稱或 id 的框架或者窗口不存在，瀏覽器將打開一個新的窗口，給這個窗口一個指定的標記，然后將新的文檔載入這個窗口。 語法 3.2.3 target屬性（續(xù)）屬性值描述_blank在新窗口中打開被鏈接文檔。_self（默認） 在相同的框架中打開被鏈接文檔。_parent在父框架集中打開被鏈接文檔。_top在整個窗口中打開被鏈接文檔。framename在指定的框架中打開被鏈接文檔。3.2.4 超級鏈接的顯示效果 默認情況下，超級鏈接

10、的顏色，未被訪問的鏈接帶有下劃線而且是藍色的，已被訪問的鏈接帶有下劃線而且是紫色的，活動鏈接帶有下劃線而且是紅色的。要改變鏈接顏色，可以在中設置。 link為未訪問過鏈接顏色； vlink為已訪問過的鏈接顏色； alink為活動鏈接顏色。3.3 常見的超級鏈接應用 常見的鏈接應用，包括：l 圖像鏈接l下載鏈接l 郵件鏈接l 錨點鏈接3.3.1 圖像鏈接不只是文本可以作為超級鏈接，也可以指定圖像作為超級鏈接?；菊Z法：基本語法：語法解釋：語法解釋：href：圖像鏈接的目標URL。target：用于指定打開鏈接的目標窗口。：標記img用于指定插入到網(wǎng)頁的圖像，屬性src的值為插入圖像的地址。例子1

11、3.3.2 下載鏈接 如果希望制作下載文件的鏈接，只需在鏈接地址處輸入文件所在的位置即可。當瀏覽器用戶單擊鏈接后，瀏覽器會自動判斷文件的類型，以做出不同情況的處理。基本語法：基本語法： 鏈接內(nèi)容語法解釋：語法解釋：（1）href：下載文件的地址可以是絕對路徑或相對路徑。（2）文件的類型可以是zip文件、rar文件、pdf文件、可執(zhí)行文件。 例子3.3.3 郵件鏈接（續(xù)） 如果希望網(wǎng)頁瀏覽者往某個地址發(fā)送E-mail時，只要瀏覽者單擊E-mail鏈接時，就會在瀏覽端自動打開瀏覽器默認的E-mail處理程序，收件人的地址將會被E-mail超鏈接中的指定地址自動裝入，無需瀏覽者輸入，這時就需要創(chuàng)建電

12、子郵件鏈接。 例子 3.3.3 郵件鏈接（續(xù)）基本語法：基本語法： 描述文字 語法解釋：語法解釋：（1）href屬性值必須以mailto：開頭，表示后面為電子郵件鏈接，具體的值為電子郵件地址。（2）E-mail鏈接只有客戶端正確安裝了電子郵件軟件（如Outlook或Foxmail等）才能正常運行。（3）鏈接地址后可以添加多個參數(shù)，參數(shù)之間用“&”字符分隔。電子郵件地址參數(shù)及含義見表3-3。（4）多個電子郵件地址之間用“；”分隔。3.3.3 郵件鏈接（續(xù)）參數(shù)名說 明cc電子郵件的抄送接收人。subject電子郵件的主題。body電子郵件的內(nèi)容。3.3.4 錨點鏈接 錨點，也稱為書簽，用

13、來標記文檔中的特定位置，使用其可以跳轉(zhuǎn)到當前文檔或其他文檔中的標記位置。在網(wǎng)頁中加入錨點包括兩方面的工作，一是在網(wǎng)頁中創(chuàng)建錨點，另一個是為錨點建立鏈接。 在一些內(nèi)容很多的網(wǎng)頁中，設計者常常在該網(wǎng)頁的開始部分以網(wǎng)頁內(nèi)容的小標題作為超鏈接。當瀏覽者單擊網(wǎng)頁開始部分的小標題時，網(wǎng)頁將跳到內(nèi)容中的對應小標題上，免去瀏覽者翻閱網(wǎng)頁尋找信息的麻煩。其實，這是在網(wǎng)頁中的小標題添加了錨點，再通過對錨點的鏈接來實現(xiàn)的。 例子3.3.4 錨點鏈接 （續(xù)） （1）在同一頁面內(nèi)要使用錨點鏈接的格式： 鏈接標題 （2）在不同頁面之間要使用錨點鏈接的格式（在不同頁面中鏈接的前提是需要指定好鏈接的頁面地址和鏈接的錨點名稱）

14、： 鏈接標題 以上兩種書簽鏈接形式，鏈接到的目標為： 鏈接內(nèi)容。 3.4 圖像映射 圖像既可以作為超鏈接的源，也可以作為超鏈接的目標。圖像映射是指在同一幅圖中定義若干區(qū)域，不同區(qū)域?qū)煌某溄?，單擊不同區(qū)域可跳轉(zhuǎn)到相應頁面。其實，圖像映射就是將圖像內(nèi)的區(qū)域與一系列URL鏈接起來了，從而單擊特定區(qū)域就會把用戶帶到相應的內(nèi)容。 這里所述的為客戶端圖像映射，這和服務器端圖像映射相比，運行速度更快。 如果要建立客戶端圖像映射包括定義映射圖和使用映射圖。 定義映射圖：標記符和標記符。 使用映射圖：。 例子1 例子23.4.1 標記 定義映射區(qū)域應使用標記，在之間添加映射區(qū)域信息。語法：語法：name

15、和id屬性規(guī)定了映射的名稱和標識符。中的 usemap 屬性可引用 中的 id 或 name 屬性（取決于瀏覽器），所以應同時向 添加 id 和 name 屬性。3.4.2 標記 圖像映射指得是帶有可點擊區(qū)域的圖像， 標簽定義圖像映射中的區(qū)域。area 元素總是嵌套在 標簽中。語法語法： 屬性及含義：屬性及含義：（1）alt 屬性定義此區(qū)域的替換文本。（2）coords 定義可點擊區(qū)域（對鼠標敏感的區(qū)域）的坐標。 （3）href 定義此區(qū)域的目標 URL。（4）shape定義區(qū)域的形狀，可選值default（全部區(qū)域）、 rect（矩形）、circ（圓形）和poly（多邊形）。 3.4.3 標記的usemap屬性 標記的usemap 屬性將圖像定義為客戶端圖像映射。usemap 屬性與 ma