iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
1
Modern Web

我可以修改,所以先亂打系列 第 5

第5天:HTML-網頁間的連結

連結簡單來說,就是由一個網頁連到另一個網頁。
連結有分為以下幾種類型:

  • 不同網站之間的連結。
  • 同一個網站內,不同網頁之間的連結。
  • 同一個網頁內,不同區域之間的連結。
  • 開始一個新瀏覽器視窗的連結。
  • 可以啟動電子郵件軟體並寫信給他人的連結。

連結到其他網站

連結是用<a>元素製作,元素裏面包含了href屬性,href屬性的值就是使用者點擊後會連結到的頁面位置。
一般連結寫法如下:

<a href="連結的網址或位置">使用者點擊的文字</a>

*註:連結不一定要是html,也可以是影片或圖片,只要改上對應的檔案位置與副檔名即可。

例如:

<a href="http://www.google.com">Google</a>
<a href="http://tw.yahoo.com">Yahoo奇摩</a>

會顯示為下方
Google
Yahoo奇摩

連到同一網站的不同網頁

若是要連結到同一個網站裡的其他網站,不需要指定網域名稱,可使用稱為"相對URL"的捷徑。

相對連結及類型

也就是要連結的網頁相對於目前網頁的位置。

類型一:

如果網站中的所以檔案都在同資料夾下的話,只要使用該網頁檔名即可。

例如:

<a href="檔名.html">連結名稱</a>

類型二:

子資料夾:使用子資料夾名稱加上斜線,然後再加上檔名。

例如:

<a href="子資料夾/檔名.html">連結名稱</a>

類型三:

孫資料夾:使用孫資料夾名稱加上斜線,然後再加上檔名。

例如:

<a href="子資料夾/孫資料夾/檔名.html">連結名稱</a>

類型四:

父資料夾:使用../來表示回到目前資料夾的上一層,然後加上檔名。

例如:

<a href="../檔名.html">連結名稱</a>

類型五:
祖資料夾:再次重複../來表示你要回到上兩層,再加上檔名。

例如:

<a href="../../檔名.html">連結名稱</a>

Email連結

直接製作Email連結,點擊後會跳出電子郵件軟體並在Email位置輸入收件者地址。

<a href="mailto:電子郵件地址">連結名稱</a>

在新視窗開啟連結

使用target屬性,並將值的位置加上_blank。

<a href="連結位置" target="_blank">連結名稱</a>

連結到同網站的某部分

如果頁面很長,想要讓人可以快速點到區域位置,或是要再頁面底下加入可以跳回頁面頂端的連結等等,
就可以使用此方法來達成。
方式是使用id屬性(可使用在任何html元素上),id屬性的值必須以字母或是下滑線為開頭,不能使用數字
或是其他字元,在href的值須以#為開頭。此外,在單一網頁中兩個id屬性不能有相同的詞。
使用id屬性的方法如下面舉例:

<h1 id="top">頁首</h1>
此為在h1元素中加入id屬性並給予值
<a href="#top">回到頁首</a>
點擊此連結後會回到元素內有id="top"的位置

連結到另一個網站的特定區域

如果想連結到另一個網站的特定區域,只要連結目標網頁內有id屬性,就可以在該頁面的連結結尾處加入
相同語法。
舉例來說,如果連結的目標網站網址為 http://www.h1144777.com ,網頁中間文章的元素後面有加上
id="interlude",就可以寫成如下:

<a href="http://www.h1144777.com/#interlude">

點擊後就會跑到目標網站指定id的位置。


參考來源:
書籍:HTML&CSS 網站設計建置優化之道
網頁前端工程入門:基礎 HTML 教學 By 彭彭


上一篇
第4天:HTML-清單
下一篇
第6天:HTML-網頁圖片
系列文
我可以修改,所以先亂打30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Oo_花之舞__oO
iT邦新手 1 級 ‧ 2022-06-11 00:56:29

好文先推

我要留言

立即登入留言