iT邦幫忙

2022 iThome 鐵人賽

DAY 11
0
自我挑戰組

從零開始自學HTML/CSS網頁設計系列 第 11

設定HTML網站的外部連結和書籤連結

  • 分享至 

  • xImage
  •  

一、設定外部連結
如果想要將網站可以連結到其他的網頁,就必須以a標籤、href屬性和target屬性框住要作為連結的文字。
1、href屬性:屬性值是連結目的地的路徑。
2、target屬性:如果屬性值指定為「_blank」,在點選連結的時候就會另開分業來載入連結的網頁。
以下就來實際操作,首先在簡介的地方加入通往預告片的連結:
https://ithelp.ithome.com.tw/upload/images/20220924/20152190Ti5xJAIItt.png
然後點選及時預覽(Live Preview)開啟瀏覽器:
https://ithelp.ithome.com.tw/upload/images/20220924/20152190vZrRDjcXKG.png
發現以a標籤框住的文字顯示為藍色底線的文字,接著點選超連結:
https://ithelp.ithome.com.tw/upload/images/20220924/20152190EU4Dnr2bAh.png
成功打開了新分頁。

二、設定書籤連結
以a標籤、href屬性框住導覽列的文字,並在欲跳轉的地方的標籤輸入id值:
https://ithelp.ithome.com.tw/upload/images/20220924/201521909Z6iZtbeK2.pnghttps://ithelp.ithome.com.tw/upload/images/20220924/20152190ORk3IJFNhu.pnghttps://ithelp.ithome.com.tw/upload/images/20220924/20152190rtwNnIqAQw.pnghttps://ithelp.ithome.com.tw/upload/images/20220924/20152190u7DVrQTrUo.png
然後點選及時預覽(Live Preview)開啟瀏覽器:
https://ithelp.ithome.com.tw/upload/images/20220924/20152190cPxCEboi03.png
點選導覽列就可以移動到輸入id值的位置。

除此之外,也可以利用a標籤和href屬性的#top屬性值來設定回到本頁開頭的連結,且因為#top是特別的屬性值,所以不需要加入id屬性,如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20220924/20152190Fg8jfp0XKi.png
然後點選及時預覽(Live Preview)開啟瀏覽器:
https://ithelp.ithome.com.tw/upload/images/20220924/20152190ghyYvhpXFu.png
點連結就可以順利回到頁首了。


上一篇
插入HTML網站圖片
下一篇
相對路徑和絕對路徑
系列文
從零開始自學HTML/CSS網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言