4-4 同一個HTML文件中的超鏈接

有時可能所建立的網頁內容分常豐富，一個HTML文件就需涵蓋好多內容，此時可以考慮在這個HTML文件內建立幾個書簽，這樣只要單擊這些書簽超鏈接，即可跳到書簽地址。這時的<a>元素格式如下：

    <a href="#mybookmark"> … </a>

上述mybookmark是我們自行定義的書簽名稱，接著在同一個HTML文件內目標書簽位置使用id屬性設定mybookmark，這樣才可定義完成超鏈接。id屬性是一種全局屬性，可以在許多元素內使用，為了凸顯書簽，通常可以將它使用在<hn>標題標記內。下列是將超鏈接設定為“Big Data”，書簽名稱是“Big Data Series”的程序片段。

    <a href="#Big Data">Big Data</a>
    …
    …
    <h3 id="Big Data">Big Data
Series</h3>

經上述設定后，當單擊Big Data超鏈接，就可以跳到Big Data Series書簽所在位置。

注 過去在HTML4.01版，<a>標記內可以使用name屬性來設定書簽名稱，HTML5已經不支持了，改用id屬性。

程序實例ch4_6.html：同一個文件中超鏈接的應用。

執行結果 程序執行時可以看到兩個超鏈接，分別是Big Data和Data Analyst。

單擊Big Data超鏈接可以跳到Big Data Series書簽，讓此書簽數據跳到窗口最上方，如下圖所示。

單擊Return Top超鏈接可以跳到Top書簽，窗口顯示頁面最頂端。

如果這時單擊Data Analyst超鏈接，窗口內容將移至Data Analyst Series書簽，如果這個書簽內容或其后面的內容夠多，則這個書簽將在窗口畫面最上端顯示。否則只是將窗口卷動到最下方，如下圖所示。

當然，若是單擊Return Top超鏈接可以跳到Top書簽，窗口顯示頁面最頂端。這個程序設計的幾個重點如下：

（1）第9行設定Top書簽區塊，供Big Data Series書簽區塊和Data Analyst Series書簽區塊在單擊Return Top時可以返回。

（2）第13行設定Big Data超鏈接，目的是可以跳至Big Data Series書簽區塊。

（3）第14行設定Data Analyst超鏈接，目的是可以跳至Data Analyst Series書簽區塊。

（4）第17行到23行是設定Big Data Series書簽區塊。

（5）第25行到31行是設定Data Analyst Series書簽區塊。