● 在同一篇文章中，若想要快速跳到某個段落，可以如下設定，先展示結果範例：
正文一：引用書籤一
正文二：引用書籤二
正文三：引用空白文字書籤
......
......
......
......
......
......
......
● 接下來展示程式碼：
<p>正文一：<a href="#bm1">引用書籤一</a></p>
<p>正文二：<a href="#書籤2">引用書籤二</a></p>
<p>正文三：<a href="#書籤3">引用空白文字書籤</a></p>
<p><a id="bm1">書籤一</a></p>
<p><a id="書籤2">書籤二</a></p>
<p><a id="書籤3"></a></p>
● 說明：
- 在要加入書籤的文字前後，以<a id="bm1">書籤一</a>包夾，把id=""內的文字，也就是bm1，置換為自己想要的書籤ID；紅字的部分則是要顯示的書籤文字，也可以放空白，放空白就是不顯示文字，但在那個位置還是有放一個書籤。
書籤ID可以用中文也可以用英文或數字，這邊要注意的是ID就跟身分證字號一樣，每個人的身份證字號都是不一樣的，因此在同一個網頁中，「ID也要不同，不可重複」，ID是作為「唯一識別碼」的概念，若ID重複使用，會不知道該跳到哪個ID。
○ 書籤範例1：<a id="bm1">書籤一</a>，說明：這是一個「id=bm1」的書籤，顯示的文字是「書籤一」。
○ 書籤範例2：<a id="書籤2">書籤二</a>，說明：這是一個「id=書籤2」的書籤，顯示的文字是「書籤二」。
○ 書籤範例3：<a id="書籤3"></a>，說明：這是一個「id=書籤3」的書籤，沒有要顯示的文字，也就是讀者在網頁上是看不到那個書籤的，但是作者知道那個位置有放一個書籤可以超連結過去。 - 連結到同一篇文章中的書籤，以<a href="#bm1">引用書籤一</a>包夾，把href=""內的文字，置換為前面定義的書籤id，注意id前面要多加一個#字號，才可以正確的連結。紅字部分是這個書籤連結的說明文字，以這個例子來說，我想要表達這是一個引用書籤一的連結，因此我的超連結文字是「引用書籤一」。
○ 跳至書籤範例1：<a href="#bm1">引用書籤一</a>，說明：這個連結參照到「id=bm1」的書籤，要讓讀者看到的超連結說明文字是「引用書籤一」。
○ 跳至書籤範例2：<a href="#書籤二">引用書籤二</a>，說明：這個連結參照到「id=書籤二」的書籤，要讓讀者看到的超連結說明文字是「引用書籤二」。
○ 跳至書籤範例3：<a href="#書籤三">引用空白文字書籤</a>，說明：這個連結參照到「id=書籤三」的書籤，要讓讀者看到的超連結說明文字是「引用空白文字書籤」。
● 跨頁面的書籤連結：
其實就跟一般的超連結一樣，一般的超連結是連結至指定的網址，比如說連到本部落格的這篇文章：文鳥球球看病記(羽蝨,疥癬,呼吸道發炎)，該文的網址是：https://javasparrowk.blogspot.com/2019/09/blog-post_28.html。
在該文中，我有建立一個書籤放在「20200713」的段落：
建立書籤的語法：<a id="20200713">20200713</a>
連結至該書籤的語法：<a href="#20200713">20200713 因呼吸急促就醫</a>
建立書籤的語法：<a id="20200713">20200713</a>
連結至該書籤的語法：<a href="#20200713">20200713 因呼吸急促就醫</a>
那麼，若想要從這篇文章跳到那篇文章的「20200713」書籤呢？只要把網址連結改成：原網址+#書籤id即可，也就是把網址改成這樣：https://javasparrowk.blogspot.com/2019/09/blog-post_28.html#20200713，這邊展示書籤的效果，可以看到此連結直接跳至文章中該書籤的位置。
● 延伸閱讀：
- HTML 超連結 <a> 標籤 (tag) @ Foolish程式技術
文章中有說明a href的作用
Copyright © 2021 JavaSparrowK All rights reserved.
版權所有‧謝絕轉載
沒有留言:
張貼留言
注意：只有此網誌的成員可以留言。