Web編程入門經(jīng)典 第2章 鏈接和導(dǎo)航
第2章 鏈接和導(dǎo)航Web 與其他媒體的實質(zhì)區(qū)別是Web 頁面可以包含了鏈接，利用鏈接可以直接轉(zhuǎn)向其他頁面（甚至給定頁面的特定部分）。鏈接通常稱為超鏈接，Web 的非凡成就與其息息相關(guān)。通過超鏈接，訪
第2章 鏈接和導(dǎo)航
Web 與其他媒體的實質(zhì)區(qū)別是Web 頁面可以包含了鏈接，利用鏈接可以直接轉(zhuǎn)向其他頁面（甚至給定頁面的特定部分）。鏈接通常稱為超鏈接，Web 的非凡成就與其息息相關(guān)。通過超鏈接，訪問者可以在各個Web 站點之間導(dǎo)航，方式是單擊頁面上的單詞、短語和圖像等。 普通的Web 站點由一組頁面組成，用戶通過超文本鏈接在各個頁面之間導(dǎo)航。這些頁面通常也含指向其他Web 站點的鏈接，以及指向所在站點的其他頁面的鏈接。
本章將介紹如何創(chuàng)建站點中不同頁面之間的鏈接，如何創(chuàng)建指向站點頁面中特定位置的鏈接，以及如何創(chuàng)建指向其他站點（稱為外部站點）的鏈接。
如同第1章中戶介紹的標記描述了文檔的結(jié)構(gòu)一樣，鏈接描述了文檔的哪些部分可以鏈接到其他文檔的相應(yīng)部分。因此，鏈接形成了不同文檔之間的相互關(guān)系。
在學(xué)習(xí)鏈接的時候，了解一些關(guān)鍵概念也是非常重要的，包括如何將站點結(jié)構(gòu)化到不同的文件夾中（文件夾也稱為目錄），如何使用相對URL 鏈接站點內(nèi)的頁面。 在本章中將介紹以下內(nèi)容：
● 如何構(gòu)造文件夾用于存放Web 站點的頁面
● 如何鏈接站點內(nèi)的不同頁面
● 如何鏈接到站點中頁面的特定部分
● 如何鏈接到其他站點
本章僅介紹如何鏈接Web 頁面，而不會介紹鏈接或嵌入其他文件機制，特別是元素（第7章中討論樣式表時將介紹該元素）或元素和
2.1 基本鏈接
為了介紹鏈接，首先查看幾個簡單的例子。一旦了解鏈接的基本概念，您將發(fā)現(xiàn)仍有許多知識需要學(xué)習(xí)。下面將逐步介紹這些知識。
利用元素可以指定鏈接。在起始標簽和結(jié)束標簽之間的文本組成鏈接的內(nèi)容，用戶可以在瀏覽器中單擊它們。下面部分將介紹如何鏈接到其他文檔和電子郵件地址。
2.1.1 鏈接到其他文檔
為了鏈接到其他文檔，起始標簽需要附帶屬性href ，href 屬性的值是鏈接頁面的地址。
,下面的示例是ch02_eg0l.html文檔的
元素。該頁面包含指向第二個頁面/upload/12/bcbuqravobf.html 的鏈接：Return to the index page.
只要/upload/12/bcbuqravobf.html 文件與ch02_eg0l.html文件處于相同的文件夾中，則在單擊“index page ”時，就會在相同的窗口中加載/upload/12/bcbuqravobf.html 頁面，并且替換當(dāng)前的ch02_eg0l.html頁面。如圖2-1所示，元素的內(nèi)容形成了鏈接。
圖2-1
注意：
這就是本章下載代碼中的鏈接的工作方式。記住，可以單擊瀏覽器中的View 菜單，然后選擇View Source選項來查看HTML 或XHTML 頁面的源代碼。
雖然可以將各種類型的元素放置在元素中，但最好盡量使鏈接簡明，并且使元素中的內(nèi)容實際地描述鏈接的目的頁面。由于元素中的內(nèi)容比其周圍的文本醒目（通常以不同的顏色顯示），所以許多人在需要進入下一個頁面時會簡單瀏覽頁面以獲得相應(yīng)的鏈接，而不會完整地閱讀當(dāng)前頁面。因此，如果頁面中所有鏈接的內(nèi)容只是“單擊此處(click here) ”，則用戶很可能不會長久地停留在該站點中，因為這些鏈接無法清楚并快速地告知他們目的頁面的信息。
注意：
許多Web 設(shè)計人員也在元素中使用圖像（下一章中將介紹相關(guān)內(nèi)容），但是在使用圖像時，必須確保圖像能夠清楚地指示鏈接的目的頁面。
如果希望鏈接到不同的站點，則可以使用下面的語法。其中指定了鏈接的目的頁面的完整URL(Uniform Resource Locator ，統(tǒng)一資源定位符) ，而不僅僅是文件名ch02_eg02.html(本章后面將詳細介紹URL) ：
Why not visit the Wrox Web site?
這個鏈接指向Wrox 的Web 站點。href 屬性的值與用戶訪問Wrox 的Web 站點時在瀏覽器中輸入的內(nèi)容相同。這種URL 稱為限定URL ，因為它包含了該Web 站點的域名。
,當(dāng)希望鏈接到相同Web 站點中的某個頁面時，可以使用稱為“相對URL ”的簡寫形式；本章的第一個示例使用的就是這種URL ，其中href 屬性的值不是以域名起始的。這樣不僅不需要輸入完整的URL ，而且具有其他優(yōu)點。
在鏈接中使用title 屬性也是良好的編程習(xí)慣，因為在大多數(shù)瀏覽器中，當(dāng)用戶將光標懸停在鏈接上時，使用title 屬性將顯示一個工具提示（在屏幕上顯示說明標題的氣泡狀圖標）；另外，對于語音瀏覽器——通常由視力受損人員使用——將會大聲讀出標題）。
title 屬性的值應(yīng)當(dāng)能夠描述鏈接的目的頁面。當(dāng)使用圖像作為鏈接時，這一點尤其重要。例如，下面給出了到Google 主頁的鏈接(ch02_eg03.html)：
Google is a very popular search engine.
圖2-2顯示了title 屬性，當(dāng)用戶將光標懸停在鏈接上時，該屬性給出了鏈接的更多相關(guān)信息。
圖2-2
需要注意的是，元素中的所有內(nèi)容都將顯示為鏈接，包括文本或圖像周圍的空格，因此最好避免直接在起始標簽和結(jié)束標簽之間使用空格。例如，下面的鏈接中具有起始和結(jié)尾空格(ch02_eg04.html)：
Why not visit the Wrox Web site ? 如圖2-3所示，鏈接中的空格也將帶有下劃線。
圖2-3
因此，最好在起始標簽和結(jié)束標簽的外部使用空格，如下所示：
Why not visit the Wrox Web site ?
當(dāng)然，在元素內(nèi)的單詞之間仍然需要使用空格，只要不在鏈接的開頭和末尾使用它們即可。
,2.1.2 鏈接到e-mail 地址
您很可能已經(jīng)看到，許多站點中的鏈接顯示e-mail 地址。當(dāng)單擊這樣的鏈接披時，將在默認的e-mail 程序中打開一封新的電子郵件，開且準備好發(fā)送電子郵件到鏈接指向的地址。
為了創(chuàng)建指向e-mail 地址的鏈接，需要使用元素的如下形式的語法： name@example.com
其中，href 屬性的值以關(guān)鍵字mailto 開頭，后面緊跟一個冒號，然后是e-mail 地址。與其他鏈接一樣，元素中的內(nèi)容將是鏈接在瀏覽器中的可見部鄰分，因此可以選擇使用如下語句：
或者，如果想讓用戶在單擊e-mail 地址之前看到該地址，可以采用如下語句：
For sales enquiries e-mail sales@example.com.
但是，使用這種技術(shù)也存在如下的缺陷：一些惡意的Web 用戶會使用小程序自動搜索Web 站點中的e-mail 地址。搜索到e-mail 地址之后，他們就會向這些地址發(fā)送垃圾郵件。 在創(chuàng)建到e-mail 地址的鏈接時，還有其他一些主要的備選方法：
● 使用e-mail 表單，從而訪問者在Web 站點上填寫該表單以發(fā)送e-mail 。接收到郵件后，可以正?；貜?fù)它，因為自動程序無法根據(jù)聯(lián)系人表單獲得,e-mail 地址。e-mail 表單的應(yīng)用需要CGI 腳本或者服務(wù)器端的腳本語言，例如ASP.net 、JSP 、PHP 、Cold Fusion和Ruby 。第5章中將給出關(guān)于e-mail 表單的示例。
● 利用JavaScript 將e-mail 地址寫進Web 頁面（第12章將介紹這方面的內(nèi)容）。這種術(shù)背后的主要思想是，在Web 上搜索e-mail 地址的程序無法讀取地址的JavaScript 版本。 前面已經(jīng)介紹如何創(chuàng)建最基本的鏈接，下面將研究關(guān)于鏈接的更具深度的主題。為了深入了解頁面之間的鏈接，您需要閱讀后面的幾頁內(nèi)容，其中將詳細解釋如何將Web 站點中的文件組織到文件夾中，并且詳細地分析URL(URL是一種地址，用于標識Web 站點上的頁面和其他資源) 。
2.2 理解目錄和目錄結(jié)構(gòu)
目錄是Web 站點中文件夾的名稱（如同硬盤中包含不同的文件夾一樣，Web 站點包含多個目錄）。通常一個Web 站點將包含多個目錄，其中每個目錄包含Web 站點的不同部分。例如，一個具有多個分部的大型Web 站點將為每個分部準備一個獨立的目錄，并且不同類型的文件（例如圖像和樣式表）通常保存在各自的特定目錄中。
如同可能將硬盤中的文件組織到單獨的文件夾中一樣，將Web 站點中的文件組織到目錄
,中非常重要，這樣就能夠更加方便地找到需要的文件，并且能夠控制所有文件?？梢栽O(shè)想一下，如果將Web 站點中使用的所有文件放置到同一個文件夾中，對這些文件的操作將會很快變得非常復(fù)雜。
圖2-4中給出了一個新站點的目錄結(jié)構(gòu)的示例，站點的每一部分具有一個獨立的文件夾，而不同類型的文件也具有獨立的文件夾。在主文件夾中有專門用于存放圖像、腳本和樣式表的文件夾。另外注意，Music 部分分別為Features 、MP3和Reviews 準備了單獨的文件夾。
另外，類似于圖2-2所示的目錄結(jié)構(gòu)能夠幫助用戶導(dǎo)航站點，而不用知道確切的文件名：并且用戶可以選取他們想要的部分進行瀏覽，例如從http://www.ExampleNewsSite.com/Business/中獲得商業(yè)新聞， 從http://www.ExampleNewsSite.com/Entertainment/Music/中獲得音樂頁面。
使Web 站點具有良好的組織結(jié)構(gòu)是非常重要的。一個小型的Web 站點可能會以令人驚訝的速度快速成長，并且包含的文件遠遠超出最初設(shè)想的數(shù)量。因此，在開始構(gòu)建任何類型的Web 站點時，都應(yīng)當(dāng)首先創(chuàng)建能夠適應(yīng)這種快速成長的優(yōu)秀目錄結(jié)構(gòu)。
在學(xué)習(xí)鏈接相關(guān)內(nèi)容的過程中了解一些用于描述目錄結(jié)構(gòu)和目錄間關(guān)系的術(shù)語是非常重要的，因此重新查看圖2-4中的目錄結(jié)構(gòu)示例：
圖2-4
● 保存整個Web 站點的主目錄稱為Web 站點的根目錄；在本示例中，根目錄是exampleNewSite.com 。
● 位于其他目錄中的目錄稱為子目錄。這里，F(xiàn)ilm 是Entertainment 的子目錄。 ● 包含其他目錄的目錄稱為父目錄。這里，Entertainment 是Arts 、Film 、Music 和TV 的父目錄。
,2.2.1 鏈接的目標位置
在本章開始部分的示例中，創(chuàng)建了到同一個目錄中不同頁面的鏈接和到不同Web 站點中頁面的鏈接。
現(xiàn)在您已經(jīng)了解了如何將站點組織到單獨的目錄中，接下來需要學(xué)習(xí)如何鏈接到當(dāng)前站點不同文件夾中的頁面——例如，如何從主頁面鏈接到Entertainment 部分中的一個頁面，該部分位于Entertainment 文件夾中。
可以在站點的每一個鏈接中使用完整的URL(完整的URL 也稱為絕對URL ，在Web 瀏覽器的地址欄中輸入的就是這種URL) ，盡管最好使用相對URL(相對URL 是一種簡寫形式，用于鏈接站點不同文件夾中的文件) 。相對URL 指定某個文件相對于當(dāng)前文件的位置。
在了解如何創(chuàng)建相對URL 以及相對URL 與絕對URL 的區(qū)別之前，您需要掌握URL 的結(jié)構(gòu)。
2.2.2 URL的組成
URL 由幾個部分組成，每一部分向Web 瀏覽器提供的信息有助于用戶找到想要的頁面。首先通過查看最常見的URL 來幫助您理解URL 的各個部分。圖2-5中所示的URL 有3個關(guān)鍵部分：模式、主機地址和文件路徑，下面的小節(jié)中將依次討論它們。
主機地址
模式
圖2-5 文件路徑
1．模式
模式標識鏈接到的URL 的類型，因而也標識了檢索資源的方式。例如，大多數(shù)Web 頁面使用超文本傳輸協(xié)議(Hypertext Transfer Protocol，HTTP) 傳遞信息，這就是大多數(shù)Web 頁面以http://開頭的原因，但是在位用網(wǎng)上銀行或者下載大型文件時，您可能也注意到了其他前綴。
表2-1列出了最常見的模式。
表2-1
,
2．主機地址
主機地址是Web 站點的地址，利用它可以找到Web 站點。主機地址的形式可以是IP 地址(4組0到255之間的數(shù)字，例如192.0.110.255) ，也可以是站點的域名（更為常見的形式），例如www.wrox.com 。
注意：
可以利用IP 地址找到任何連接到Internet 的計算機；但是，域名比IP 地址更容易記住，因此更為常用。但是，實際上所有的域名在后臺都將被轉(zhuǎn)換為保存Web 站點的計算機的IP 地址，轉(zhuǎn)換的方法是咨詢域名服務(wù)器(Domain Name Server ，DNS ) ，DNS 中包含了運行Web 站點的計算機的域名和IP 地址的目錄。
注意，WWW 實際上不是域名的組成部分，盡管它通常用于主機地址中——它與所使用的HTTP 協(xié)議無關(guān)。
3．文件路徑
文件路徑始終以正斜杠(/)開始，并且可能包含一個或多個目錄名（目錄是Web 服務(wù)器上的文件夾的別名）；每個目錄名以正斜杠字符(/)隔開，并且文件路徑可能以文件名結(jié)束。下面的Overview.html 就是一個文件名：
/books/newReleases/BeginningWebDevelopment/Overview.html
如果文件路徑中不包含文件名，則Web 服務(wù)器通常執(zhí)行以下3種操作中的一種（取決于它的配置）：
● 返回一個默認文件（對于以HTML 編寫的Web 站點，默認文件是index.html 或default.html ）
● 提供所在目錄中的文件列表
● 顯示一條消息，表明無法找到所訪問的頁面或者無法瀏覽文件夾中的文件
4．URL 的其他部分
URL 還可以包含許多不常見的其他部分。
證書用于為站點中的密碼保護部分指定用戶名和密碼。證書位于主機地址的前面，通過@符號與主機地址隔開。注意，用戶名和密碼以冒號隔開。下面的URL 中顯示了用戶名administrator 和密碼letmein ：
端口類似于Web 服務(wù)器的門。一個Web 服務(wù)器通常具有幾個服務(wù)器程序，這些服務(wù)器程序運行于同一臺機器中，每個程序使用不同的端口進行通信。例如，http://和https://默
,認情況下使用不同的端口(標準http://通常使用端口80，https://通常使用端口443) 。
端口的使用機會很多，但是如果指定端口，則應(yīng)該將其放在域名的后面，并且以冒號隔開。例如，如下地址指定了運行在8080端口上的Web 服務(wù)器：
段標識符位于文件名的后面，用于指示頁面的特定部分，瀏覽器應(yīng)該直接轉(zhuǎn)到該部分。它們通常用于長頁面中，以方便用戶快速到達頁面的特定部分，而不需要滾動整個頁面以查找該位置。
段標識符以英鎊符號#與文件名隔開，如下所示：
本章后面的部分中將詳細介紹段標識符。
路徑參數(shù)用于向服務(wù)器程序傳遞額外的信息。它們以問號(?)與URL 隔開，并且以名/值對的形式出現(xiàn)，名和值之間以等號隔開（如果沒有問號，路徑參數(shù)就相當(dāng)類似于屬性）。路徑參數(shù)通常用于從訪問者處收集信息，并向服務(wù)器上的程序傳遞信息，以便向訪問者返回所需要的頁面。這種參數(shù)通常稱為查詢字符串。
當(dāng)使用Web 頁面上的表單時，例如搜索表單或在線訂購表單，瀏覽器能夠?qū)⒂脩籼峁┑男畔⒏郊釉赨RL 中，以向服務(wù)器傳遞信息——此時用戶不需要將路徑參數(shù)輸入到URL 中。
在下面的例子中，將路徑參數(shù)searchTerm=HTML添加到URL 中，用于表明用戶搜索術(shù)語HTML ：
2.2.3 絕對URL 和相對URL
URL 用于定位Internet 中的資源。每一個Web 頁面和圖像——事實上是Internet 中的每一個文件——都具有唯一的URL ，即能夠用于找到特定文件的地址。Internet 中任意兩個文件都不會具有相同的URL 。
如果想訪問某個Web 站點中的特定頁面，需要在瀏覽器的地址欄中輸入該頁面的URL 。例如，為了獲得本章前面虛構(gòu)的新聞?wù)军c中的電影頁面，可以輸入如下URL:
這是一個絕對URL ，其中包含了用于唯一標識Internet 中某個文件所需的所有信息。 絕對URL 可能很快變得相當(dāng)長，并且Web 站點的每一個頁面可以包含很多鏈接。因此，有必要了解指向Web 站點中文件的URL 的簡寫形式：相對URL 。
相對URL 用于指示資源相對于當(dāng)前頁面的位置。例如，假設(shè)您正在查看如下虛擬新聞?wù)军c的娛樂部分的索引頁面：
然后您希望添加到每個分部的鏈接：Film 、TV 、Arts 和Music 。沒有使用每個頁面的完
,整URL ，而是可以使用相對URL 。例如：
Film/index.html
TV/index.html
Arts/index.html
Music/index.html
可以確定的是，比起輸入下面的地址，使用相對URL 會快很多：
您可能有興趣知道的是，Web 瀏覽器仍然請求完整URL 而不是縮短的相對URL 。但是，瀏覽器會將相對URL 轉(zhuǎn)換為完整的絕對URL 。
在站點中使用相對URL 的另一種關(guān)鍵優(yōu)點是，用戶可以方便地改變站點的域名或者將站點的某個分布復(fù)制到新站點中，而不需要改變所有的鏈接，因為每一個鏈接都相對于相同站點中的其他頁面。
注意：
相對ULR 只適用于相同Web 站點的相同目錄結(jié)構(gòu)中的鏈接；不能使用它們鏈接到其他服務(wù)器上的頁面。
下面的小節(jié)中將概述可以使用的不同類型的相對URL 。
1．相同目錄
如果希望鏈接到或者包含相同目錄中的資源，可以只使用該文件的名稱。例如，為了從主頁面(index.html)鏈接到“聯(lián)系我們”頁面(contactUs.html)，可以使用如下形式的相對URL:
contactUs.html
該文件位于相同的文件夾中，因此不需要指定其他任何內(nèi)容。
2．子目錄
圖2-4中的Film 、TV 、Arts 和Music 目錄都是Entertainment 目錄的子目錄。如果正在編寫Entertainment 目錄中的一個頁面，可以采用如下形式的相對URL 創(chuàng)建到子目錄的索引頁面的鏈接：
Film/index.html
TV/index.html
Arts/index.html
Music/index.html
該種相對URL 包含了子目錄名，后面緊跟一個正斜杠(/)以及希望鏈接到的頁面的名稱。 對于每一個額外的子目錄，可以只添加該目錄的名稱，并緊跟一個正斜杠(/)。因此，
,如果從站點根文件夾中的頁面（例如站點的主頁面）創(chuàng)建鏈接，則可以使用如下所示的相對URL 到達相同的頁面：
Entertainment/Film/index.html
Entertainment/TV/index.html
Entertainment/Arts/index.html
Entertainment/Music/index.html
3．父目錄
如果想創(chuàng)建從某個目錄到它的父目錄（包含該目錄的目錄）的鏈接，則可以使用“../”符號（兩個句點或圓點，后跟一個正斜杠）。例如，為了從Music 目錄中的一個頁面鏈接到Entertainment 目錄中的某個頁面，可以使用如下的相對URL:
../index.html
如果想創(chuàng)建從Music 目錄到根目錄的鏈接，則可以重復(fù)使用“../”符號：
../ ../index.html
每一次重復(fù)使用“../”符號，就會向上到達另一個目錄。
4．從根目錄
也可以指示文件相對于站點的根文件夾。因此，如果想創(chuàng)建從站點中的任意頁面到contactUs.html 頁面的鏈接，可以使用該頁面的路徑，并在路徑前面放置一個正斜杠。例如，如果contactUs.html 頁面位于根文件夾中，只需要輸入：
/contactUs.html
或者，可以使用如下形式的相對ORL 創(chuàng)建從站點的任意位置到Music 部分的索引頁面的鏈接：
/Entertainment/Music/index.html
起始部分的正斜杠表示根目錄，后面的部分是從根目錄開始的路徑。
5．默認文件
您可能已經(jīng)注意到，在許多站點中不需要實際地指定希望瀏覽的確切頁面。例如，只需要輸入域名或者域名加目錄，如下所示：
或者
這是因為許多Web 服務(wù)器允許它們的所有者在訪問者只指定目錄時向其發(fā)送默認文件。因此，如果輸入http ：//www.exampleNewsSite.com/Entertainment/，則服務(wù)器將返回Entertainment 目錄的默認文件，如果輸入http://www.exampleNewSite.com/，則服務(wù)器返回Web 站點根文件夾的默認文件（請記住，正斜杠字符可以用于指示相對于根目錄）。