前端

2020 年 6 月 30 日

Blogger 教學:網站錨點 HTML 建立與編輯!

已複製到剪貼板


文章重點預覽:

錨點是什麼?錨點功能介紹!

錨點(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 中所產生的效果!

分享文章

已複製到剪貼板

主題文章

查看 前端

關於看我所見

「看我所見」主題多元,分享作者的生活經歷、特殊經驗,舉凡:教育、生活、科技、3C、音樂、娛樂 ⋯⋯,我們也將持續優化,提供讀者最好的體驗!


Contacts

Ricky Chuang

看我所見

linktr.ee/5j54d93

最新文章