Sponsored Links

HTML錨點超鏈接製作

發表日期:2020 Mar 22

在網頁內使用錨點超鏈接(anchor links)

錨點超鏈接是網頁製作中其中一種非常重要的工具,錨點超鏈接可以在同一篇文章的某一點跳至文章的其他位置,又或者從本頁跳轉到不同網頁的頁面,方便讀者快速而有效率地找到所需資料,網頁製作人也可以將重要的資料優先展示在讀者眼前,透過錨點超鏈接的功用令雙方在短時間內接收到良好的效果。

錨點超鏈接有以下兩種使用方法,先以HTML(Hyper Text Markup Language )方法顯示:

在同一篇冗長的文章中使用時,可以使用這一對錨點超鏈接

錨點超鏈接< a href=”#”>< /a>

錨點的目標< a id=””>< /a>

如何使用上述的錨點超鏈接,用一個現實生活的例子作比喻,方便大家容易記憶。

有一天,三個好朋友Peter ,Paul和Mary 一齊去同一個地方釣魚,大家坐在不同的位置,落釣鉤的深度也不同,收獲也不同,Peter釣到一條大魚(big fish),Paul釣到一條章魚(octopus), Mary釣到一隻龍蝦(lobster)。

用這個情景套入HTML

< a href=”#big fish”>Peter< /a>

< a id=”big fish”>< /a>Peter

< a href=”#octopus”>Paul< /a>

< a id=”octopus”>< /a>Paul

< a href=”#lobster”>Mary< /a>

< a id=”lobster”>< /a>Mary

也可以使用這一對錨點超鏈接向上轉移

錨點超鏈接< a href=”#”>< /a>

錨點的目標< a id=””>< /a>

用另一個現實生活的例子作比喻,三個好朋友Peter ,Paul和Mary 一齊去行山,因為體力強弱的程度不同,起點也不同,但大家相約在同一個山頂終點站等待。

用這個情景套入HTML

< a href=”#top of the hill”>Peter< /a>

< a href=”#top of the hill”>Paul< /a>

< a href=”#top of the hill”>Mary< /a>

< a id=”top of the hill”>< /a>top of the hill

如果使用錨點超鏈接的次數頻密,就直接在網頁內安裝外掛,這樣會更有效率,請參考圖片示範。

如果想從某一頁跳轉到另一頁可以將該網址加在錨點超鏈接內,如下面例子。

< a href=”https://eijo1314enjoytravel.com/japan-rental-car/”>日本中部地方自駕遊</a>

如果想更清楚地指明到該網頁的那一個部份,可以用#指明要去的位置便可以,如下面例子。

< a href=”https://eijo1314enjoytravel.com/japan-rental-car/#day 10″>日本中部地方自駕遊</a>

< a id=”day 10″></a>day 10

直接用外掛加入錨點超鏈結,請參考圖片示範。

FOOD IN JAPAN

Camping in Tsing Yi Park 青衣公園露營 鄰近青衣城

Sponsored Links

Sponsored Links