頁內超連結的原理
在 HTML 中可以在元素中使用 id 識別碼屬性來標示特別的內容,
因為 id 識別碼屬性 在頁面中有索引的特性,
所以同一頁的HTML元素中用過的id識別碼只能出現一次, 不能重複。
所以在元素設定 id 識別碼,彷彿就是在同一頁面中加入書籤,使用者也 就能利用這個書籤找到特定的位置。
頁內超連結的設定方式
例如,要在 <h2> 元素加入 id 識別碼屬性「ch01」方式如下:
<h2 id="ch01">Ch01</h2>
如此一來,同頁中其他的元素就不能再設定以「ch01」來設定 id 識別碼屬性。
也因 為這個特性,當超連結使用「#id 識別碼」當作連結目標時,
整個頁面就會捲動到該 元素所在的頁面位置。
例如,要設定連結到 id 識別碼屬性為「ch01」方式如下:
<a href="#ch01"> 前往 Ch01</a>
回到最上方的頁內超連結
另外一點要注意,若是設定頁內超連結所設定的 id 識別碼如果並不存在該頁中,
整個頁面會捲動到頁面的最上方。因此許多人都利用這個特性在超連結設定「#top」 的連結,
因為頁面上沒有這個id 識別碼,所以整個頁面就會捲動到頁面的最上方。
頁內超連結不是只有本頁才能設定,也可以設定由他頁連結到本頁 的頁內超連結。
例如想要設定連結到 <index.htm> 頁面中 id 識別碼 屬性為「link_map」處,
方式如下: <a href="index.html#link_map"> 連結地圖 </a> 如此就能順利連結。
文章標籤
全站熱搜
留言列表