4-1 <a> … </a>的基本應(yīng)用

<a>是超鏈接元素，這個元素的英文全名是Anchor，可將它翻譯成“錨”，其主要目的是在單本設(shè)置的超鏈接后，可以跳到指定網(wǎng)絡(luò)節(jié)點位置。在Internet中節(jié)點的位置，也就是Internet地址，我們稱之為URL（Universal Resource Locator）。<a>元素的基本使用方式如下：

    <a href="URL"> … </a>

□ href

超鏈接的URL。

程序?qū)嵗齝h4_1.html：分別建立兩個超鏈接，使得單擊超鏈接后可以分別進入深石數(shù)字或Silicon Stone公司的網(wǎng)頁。

執(zhí)行結(jié)果 下圖是4_1.html剛執(zhí)行時的畫面。

將鼠標指針指向“深石數(shù)字”，鼠標指針變?yōu)槭中危翱谧笙陆菚谐錾钍瘮?shù)字的超鏈接地址，如下圖所示，單擊后將進入深石數(shù)字公司網(wǎng)頁。

將鼠標指針指向“Silicon Stone Education”，鼠標指針變?yōu)槭中危翱谧笙陆菚谐鯯ilicon Stone Education的超鏈接地址，如下圖所示，單擊后將進入Silicon Stone公司網(wǎng)頁。

超鏈接被瀏覽過后，超鏈接文字改成以紫色顯示。

4-2 瀏覽脈絡(luò)的設(shè)定

所謂的瀏覽脈絡(luò)（Browsing Context）是指開啟瀏覽器頁面的方式，此時我們可以在<a>元素的使用方式內(nèi)增加target屬性。

    <a href="URL" target="target_
value"> … </a>

□ target

屬性值可以是下列幾種：

_self：在目前的瀏覽頁面下顯示，這是系統(tǒng)默認值。

_blank：在現(xiàn)成的瀏覽器下新增一個瀏覽頁面。

_parent：如果目前的頁面有父層級，則在父層級頁面顯示。

_top：在目前瀏覽器的最頂端顯示。

程序?qū)嵗齝h4_2.html：采用_blank和_self重新設(shè)計ch4_1.html中的超鏈接。

執(zhí)行結(jié)果

單擊超鏈接之后，將用原來的頁面顯示深石數(shù)字公司網(wǎng)頁，如下圖所示，方法與實例ch4_1.html相同。

單擊瀏覽器窗口左上角的圖標，可以返回原來的ch4_2.html頁面。若是單擊Silicon Stone Education超鏈接，如下圖所示。

可在瀏覽器內(nèi)增加一個新的頁面來顯示Silicon Stone Education公司的網(wǎng)頁。

4-3 從一個文件跳到另一個文件

在建立網(wǎng)頁時，我們很可能為網(wǎng)頁內(nèi)容建立許多頁面，每一個頁面其實就是一個HTML文件。這一節(jié)我們將從相對路徑下各種可能狀況（4-3-1 ~ 4-3-3節(jié)）與絕對路徑（4-3-4節(jié)）兩方面說明如何在顯示一個頁面時，用超鏈接跳到另一份HTML文件頁面。

4-3-1 超鏈接的HTML文件在同一個文件夾

這是最簡單也最實用的狀況，所有的HTML文件皆在同一個文件夾。一般是用在小型網(wǎng)頁設(shè)計中。以<a>元素而言，我們可以修改使用格式如下：

    <a href="HTML-file"> … </a>

接下來的實例ch4_3.html主要以筆者計算機中的數(shù)據(jù)結(jié)構(gòu)為基礎(chǔ)，如下圖所示。

程序?qū)嵗齝h4_3.html：這個程序包含ch4_3.html、bigdata.html和photography.html等文件，同時這3個HTML文件是在同一個文件夾ch4中。主要HTML文件是ch4_3.html，程序執(zhí)行時會列出Big Data Series和Photography這兩個超鏈接，單擊Big Data Series超鏈接將進入bigdata.html文件頁面。單擊Photography超鏈接將進入photography.html文件頁面。bigdata.html文件頁面和photography.html文件頁面皆有一個Back超鏈接，單擊后可以返回ch4_3.html文件頁面。

bigdata.html

photography.html

執(zhí)行結(jié)果

如果單擊Big Data Series超鏈接，可以進入bigdata.html文件頁面。

如果單擊Back超鏈接，可以返回ch4_3.html文件頁面。下圖是另一個執(zhí)行結(jié)果頁面。

如果單擊Photography超鏈接，可以進入photography.html文件頁面。

如果單擊Back超鏈接，可以返回ch4_3.html文件頁面。

4-3-2 超鏈接的文件在子文件夾

在設(shè)計大型網(wǎng)站時，網(wǎng)頁通常是由許多的HTML文件所組成，一頁最上層的網(wǎng)頁可能有許多超鏈接，每一頁超鏈接又可能會有其他好幾個更深一層的超鏈接。為了管理這些HTML文件，網(wǎng)頁的程序設(shè)計師會將HTML文件依層次建立在不同的子文件夾內(nèi)。

在設(shè)計網(wǎng)頁時，要引用到目前文件夾的子文件夾，可以使用下列方法，這樣整個設(shè)計就簡單多了。

    <a href="subfolder/HTML-file"> … </a>

subfolder是指子文件夾名稱。下一節(jié)將介紹的實例ch4_4.html以筆者計算機中的數(shù)據(jù)結(jié)構(gòu)為基礎(chǔ)，ch4_4.html位于ch4文件夾，bigdata.html和photography.html文件在ch4文件夾下的child子文件夾中，如下圖所示。

上述數(shù)據(jù)結(jié)構(gòu)將衍生一個問題，bigdata.html和photography.html文件將如何定義超鏈接返回父文件夾ch4的ch4_4.html文件？

4-3-3 超鏈接的文件在父文件夾

若想返回父文件夾，基本上只要在連接文件前方加上“../”即可，此時<a>元素的使用格式如下：

    <a href="../HTML-file"> … </a>

程序?qū)嵗齝h4_4.html：這個程序執(zhí)行的結(jié)果和ch4_3.html相同，所以不再列出結(jié)果，在此筆者僅列出程序?qū)嵗齝h4_4.html與ch4_3.html不相同的內(nèi)容。

請讀者留意第12行與第15行超鏈接到子文件夾的語法。

bigdata.html與photography.html返回到父文件夾超鏈接的語法相同，如下所示：

4-3-4 絕對路徑

一般網(wǎng)頁設(shè)計較少使用絕對路徑，主要原因是只要未來HTML文件所在的工作文件夾有更動，相關(guān)的超鏈接就可能出錯。不過本書為了講述完整的知識，筆者在此還是舉例說明。其實在ch4_3.html的執(zhí)行結(jié)果中，當鼠標指針指向超鏈接文字時，窗口左下角的網(wǎng)址就是絕對路徑的網(wǎng)址。

使用絕對地址設(shè)定超鏈接，則<a>元素格式如下：

    <a href="file:///disk:/subfolder
… /HTML-file"> … </a>

“file:///”是絕對地址的定義格式，disk是指驅(qū)動器號。在disk和subfolder之間的“:/”符號也可以使用“|”取代。

程序?qū)嵗齝h4_5.html：使用絕對地址重新設(shè)計ch4_3.html，下面只列出程序代碼與ch4_3.html不相同的地方。

請讀者重點關(guān)注上述程序的第12和16行。