五分鐘掌握 HTML a 連結屬性的開發小技巧

發表於 2021-10-10 分類於 HTML

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

HTML 中的超連結是我們開發上非常常使用的標籤，所以這一篇就分享一些關於 a 連結的小技巧，減少你一直打多餘的程式碼。

前言

HTML 中的超連結是我們開發上非常常使用的標籤，所以這一篇就分享一些關於 a 連結的小技巧，減少你一直打多餘的程式碼。

超連結基本觀念

為了讓許多新朋友與新手可以快速上手，所以前面會先簡單介紹一下關於 HTML 中的超連結 (HyperLink)，而超連結可以說是基本中的基本，因此你會非常常在網頁上看到，例如：

超連結

而基本寫法如下：

1	<a href="/">這是超連結的文字</a>

超連結也有相當多種的寫法，例如支援電子信箱的連結：

1	<a href="mailto:">開啟電子信箱</a>

還有支援當手機點到此連結就會自動撥通電話的連結：

1	<a href="tel:+12345678">點我打電話</a>

當然還有一個是 ftp 屬性，但是現在應該很少人用了，所以就不示範囉。

另外超連結還有所謂的提示訊息 title 屬性，當使用者滑鼠停在該連結時會出現一個小提示視窗

title

1	<a href="/" title="是 Ray 不是 Array">這是超連結的文字</a>

那麼接下來就來準備介紹重頭戲，也就是超連結裡面的 target 屬性。

target

target 顧名思義就是超連結的目標屬性，它主要有以下參數

_self (預設 target)
_blank
_parent
_top

_self

首先先講講 _self 這個屬性，簡單來講就是當你點這個網址時會直接在你目前的瀏覽器分頁視窗進入到該目標，但預設的 a 連結就是這個屬性

你可以試著點下方連結，你會發現 Codepen 另一個視窗直接進入到我的部落格

_blank

_blank 這個屬性算是非常常常使用的屬性，這個屬性的功能主要是另外開啟一個視窗，通常會是為了避免使用者離開你的網頁畫面而使用這個屬性

你可以試著點以下連結，你會發現直接另開一個視窗

parent 與 top

_parent 與 _top 這兩個屬性簡單來講都是跟巢狀視窗有關係，但實際來講這兩個屬性已經很少使用了，所以就不多做說明。

統一調整 target

我們在實際開發時，往往因為 a 超連結預設是 _self 的關係，而導致我們必須每一次要另開視窗時都必須額外寫上 target 以及相關的完整連結路徑

1	<a href="/index.html" target="_blank">部落格網址</a>

當頁面上的連結超多的時候就會變得很麻煩，可能會像這樣

<a href="/index.html" target="_blank">部落格網址首頁</a>
<a href="/learnexp/20200112/1752686187/" target="_blank">欠人教訓的提問 & 發問</a>
<a href="/learnexp/20210710/1926104502/" target="_blank">創造被動收入之前的準備與理財入門 </a>
<a href="/links/" target="_blank">更多資訊</a>

那麼這邊就要來介紹一個超級強大的 HTML 標籤，也就是 base。

base

base 標籤主要是用來定義頁面上所有的圖片連結與超連結屬性，而它主要會是有兩個屬性設置

href
target

而它主要是放在 head 中，因此你必須這樣子寫

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <base href="/" target="_blank">
  <title>是 Ray 不是 Array</title>
</head>

當你這樣子設置之後，全部的連結在預設上就會是套用 base 的屬性，因此這邊就會採用相對路徑的作法

<base href="/" target="_blank">
<a href="/index.html">部落格網址首頁</a>
<a href="/learnexp/20200112/1752686187/">欠人教訓的提問 & 發問</a>
<a href="/learnexp/20210710/1926104502/">創造被動收入之前的準備與理財入門 </a>
<a href="/links/">更多資訊</a>

接下來你不論是點哪一個都會是直接連到我的部落格，而且是另開視窗的方式

當然不用擔心後面無法替換連結，只要你填寫的是一個完整的 URL 就不會吃到 base 的 href 設置

除此之外 base 的 href 還可以對應 img 的 sre 路徑

1
2
3

<base href="" target="_blank">

<img src="/images/octocat.jpg" height="100" alt="是 Ray 不是 Array">