4-1 <a> … </a>的基本應用

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

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

□ href

超鏈接的URL。

程序實例ch4_1.html：分別建立兩個超鏈接，使得單擊超鏈接后可以分別進入深石數字或Silicon Stone公司的網頁。

執行結果 下圖是4_1.html剛執行時的畫面。

將鼠標指針指向“深石數字”，鼠標指針變為手形，窗口左下角會列出深石數字的超鏈接地址，如下圖所示，單擊后將進入深石數字公司網頁。

將鼠標指針指向“Silicon Stone Education”，鼠標指針變為手形，窗口左下角會列出Silicon Stone Education的超鏈接地址，如下圖所示，單擊后將進入Silicon Stone公司網頁。

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

4-2 瀏覽脈絡的設定

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

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

□ target

屬性值可以是下列幾種：

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

_blank：在現成的瀏覽器下新增一個瀏覽頁面。

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

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

程序實例ch4_2.html：采用_blank和_self重新設計ch4_1.html中的超鏈接。

執行結果

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

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

可在瀏覽器內增加一個新的頁面來顯示Silicon Stone Education公司的網頁。

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

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

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

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

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

接下來的實例ch4_3.html主要以筆者計算機中的數據結構為基礎，如下圖所示。

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

bigdata.html

photography.html

執行結果

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

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

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

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

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

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

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

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

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

上述數據結構將衍生一個問題，bigdata.html和photography.html文件將如何定義超鏈接返回父文件夾ch4的ch4_4.html文件？

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

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

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

程序實例ch4_4.html：這個程序執行的結果和ch4_3.html相同，所以不再列出結果，在此筆者僅列出程序實例ch4_4.html與ch4_3.html不相同的內容。

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

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

4-3-4 絕對路徑

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

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

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

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

程序實例ch4_5.html：使用絕對地址重新設計ch4_3.html，下面只列出程序代碼與ch4_3.html不相同的地方。

請讀者重點關注上述程序的第12和16行。