iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
1
Modern Web

~網頁入門~系列 第 10

Day10 – HTML(6) – 超連結、網頁書籤

在上一篇我把參考資料用超連結的方式給大家看,你們會不會好奇,要如何在網頁中放上超連結呢?今天我們就來講講超連結的使用方式吧!

首先,要使用超連結,你需要的是<a>標籤。

它的寫法如下 :

<a href="url">link text</a>

下面接著介紹裡面會用到的屬性吧!

href屬性

href屬性用來指定連接的目標位址<a>標籤的起始標籤與結束標籤中間則是放顯示在網頁上給瀏覽的人點擊的文字,例如 :
https://ithelp.ithome.com.tw/upload/images/20190926/20120959DutWaZmmIC.jpg

點擊下方文字即可到FB首頁
https://ithelp.ithome.com.tw/upload/images/20190926/20120959l2sLLlIKsT.jpg

除了可以用文字來做連結,圖片也可以放入連結
https://ithelp.ithome.com.tw/upload/images/20190926/20120959EfK5UMeeir.jpg

點擊下方圖片一樣可以到FB首頁
https://ithelp.ithome.com.tw/upload/images/20190926/201209591Af28Eor3V.jpg

title屬性

另外,如果放上title屬性,當鼠標移到圖片或文字上時,title的提示文字就會顯示出來,例如 :
https://ithelp.ithome.com.tw/upload/images/20190926/201209599JQMyXNq6B.jpg

https://ithelp.ithome.com.tw/upload/images/20190926/20120959A0cYbIwKMA.jpg

target屬性

若是想要設定連結要開啟的目標,可以加入target屬性。

blank是讓原本的視窗保留,另外開啟新分頁顯示連結網頁。
https://ithelp.ithome.com.tw/upload/images/20190926/20120959YOBAbZSjeV.jpg

parent則是直接在原本的頁面開啟連結網頁。
https://ithelp.ithome.com.tw/upload/images/20190926/20120959Spio5ppMM2.jpg


本地連結

上面的範例使用了絕對 URL(完整的網址),我們也可以使用相對 URL 來指定本地的連結

我在同一個 test 資料夾中新增一個 test02 的 html 頁面,並在 test01 中新增一個連結指向它
https://ithelp.ithome.com.tw/upload/images/20191010/20120959GQe709jJoR.jpg

<a href="./test02.html">到第二個頁面</a>

https://ithelp.ithome.com.tw/upload/images/20191010/20120959dwTpobSe0E.jpg

點一下連結就能進入到 test02 的頁面囉~
https://ithelp.ithome.com.tw/upload/images/20191010/20120959q4MXElfLIo.jpg

創建書籤

如果你的網頁很長,可能就會需要用到網頁書籤,它可以讓你在點擊書籤連結後,將頁面滾動到你要的位置。

首先,你要先創建書籤,可以在標籤上給它一個 id,如下 :
https://ithelp.ithome.com.tw/upload/images/20190926/20120959CFlYx0LJzl.jpg

接著建立一個連結,將位址指向你想前往的書籤的 id (呼叫 id 時前面加上 #)
https://ithelp.ithome.com.tw/upload/images/20190926/20120959a1YJ6yATgq.jpg

當你按下書籤連結 ”To Chapter 7”
https://ithelp.ithome.com.tw/upload/images/20190926/201209599NeOCgpTvb.jpg

頁面就會滾到第七章的位置了~
https://ithelp.ithome.com.tw/upload/images/20190926/201209596FOCCMBaJf.jpg

是不是很方便呀~


上一篇
Day09-HTML(5) – CSS樣式 Styles
下一篇
Day11-HTML(7) – Class與Id
系列文
~網頁入門~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言