文章重點預覽:
錨點是什麼?錨點功能介紹!
錨點(Anchor)就字面上來講就是船錨所在的位置,所以在各種平台上,如果有圖像來代表錨點功能的話,都會使用 ⚓️ 船錨來表示。
錨點:單向功能
在網頁上面,錨點是單向指向的功能,意思就是說,假設:可以從 A 錨點連結至 B 點,但點擊 B 點並不會回到 A 錨點。突然想到,或許很多網頁上面,一旁的回到頂部按鈕,可能在網頁設計背後的程式碼也就是錨點的概念(?
錨點:網頁程式設計語法
在網路上有很多文章分享教學如何寫錨點的程式,也有很多的程式語言可以使用錨點功能,包含:HTML、Java⋯⋯。下面的章節會教如何在 Google Blogger 中,使用 HTML 來撰寫錨點。
Blogger 新改版:內建錨點功能
前陣子 Google 的 Blogger 更新了文章撰寫頁面,也算是一個小改版,讓作者在文章撰寫上更為方便,也多了一個醒目的功能:「建立/編輯錨點」。就位在上方第四欄的第一個功能,和建立/編輯網址擺在一起。
Blogger 內建「錨點」功能的問題
有經營 Blogger 網站的人,如果好奇使用了內建的錨點新功能,一定會一頭霧水,搞不清楚到底怎麼使用,也沒辦法真正實現錨點的功能。
我一開始就是這樣,在改版前就一直很想使用錨點的功能,所以改版後發現有內建錨點功能後,就興高采烈的嘗試,最後卻一直無法搞定,所以只好上網 Google 來學習錨點的使用方法,最後才成功的在 Blogger 中使用了錨點的功能,也想順便來撰寫一篇文章分享我所學到的,也把錨點方法記錄下來,之後忘了怎麼使用,還可以回來複習~複習~
在 Blogger 上正確的使用「錨點」
Blogger 上錯誤的內建「錨點」功能
如果直接使用 Blogger 中內建的「建立/編輯錨點」時,點選右上角的「HTML 檢視」,就會發現 Google 是如何撰寫「建立/編輯錨點」的功能。
進入後,之前如果是選取「OO」來建立錨點,並將錨點命名為「1」,你會發現在 HTML 檢視模式裡,是這樣撰寫的:
<a href="#" id="1" name="1">OO</a>
但這其實是錯的錨點程式寫法!
自行改正「錨點」HTML 程式語言
這裡我們一樣用錨點 A 連結到標題 B 來解釋,錨點 A 和標題 B 所撰寫的 HTML 程式語法是不同的,如果我們將錨點命名為「1」,正確的 HTML 程式語法會是:
- 錨點 A:
<a href="#1">A</a>
- 標題 B:
<a id="1" name="1">B</a>
這時我們會發現其實只要將 Google 自動產生的錨點 HTML 程式碼,做了一點點的更改,就能產生功能正常無誤的錨點了!
在 Blogger 中試試「錨點」的效果!
本文章也使用了錨點的功能,在一開頭就有文章目錄,可以點擊看看:錨點在 Blogger 中所產生的效果!