整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ
五分鐘掌握 HTML a 連結屬性的開發小技巧
前言
HTML 中的超連結是我們開發上非常常使用的標籤，所以這一篇就分享一些關於 a 連結的小技巧，減少你一直打多餘的程式碼。
超連結基本觀念
為了讓許多新朋友與新手可以快速上手，所以前面會先簡單介紹一下關於 HTML 中的超連結 (HyperLink)，而超連結可以說是基本中的基本，因此你會非常常在網頁上看到，例如：
而基本寫法如下：
1 | |
超連結也有相當多種的寫法，例如支援電子信箱的連結：
1 | |
還有支援當手機點到此連結就會自動撥通電話的連結：
1 | |
當然還有一個是 ftp 屬性，但是現在應該很少人用了，所以就不示範囉。
另外超連結還有所謂的提示訊息 title 屬性，當使用者滑鼠停在該連結時會出現一個小提示視窗
1 | |
那麼接下來就來準備介紹重頭戲，也就是超連結裡面的 target 屬性。
target
target 顧名思義就是超連結的目標屬性，它主要有以下參數
_self(預設target)_blank_parent_top
_self
首先先講講 _self 這個屬性，簡單來講就是當你點這個網址時會直接在你目前的瀏覽器分頁視窗進入到該目標，但預設的 a 連結就是這個屬性
你可以試著點下方連結，你會發現 Codepen 另一個視窗直接進入到我的部落格
_blank
_blank 這個屬性算是非常常常使用的屬性，這個屬性的功能主要是另外開啟一個視窗，通常會是為了避免使用者離開你的網頁畫面而使用這個屬性
你可以試著點以下連結，你會發現直接另開一個視窗
parent 與 top
_parent 與 _top 這兩個屬性簡單來講都是跟巢狀視窗有關係，但實際來講這兩個屬性已經很少使用了，所以就不多做說明。
統一調整 target
我們在實際開發時，往往因為 a 超連結預設是 _self 的關係，而導致我們必須每一次要另開視窗時都必須額外寫上 target 以及相關的完整連結路徑
1 | |
當頁面上的連結超多的時候就會變得很麻煩，可能會像這樣
1 | |
那麼這邊就要來介紹一個超級強大的 HTML 標籤，也就是 base。
base
base 標籤主要是用來定義頁面上所有的圖片連結與超連結屬性，而它主要會是有兩個屬性設置
hreftarget
而它主要是放在 head 中，因此你必須這樣子寫
1 | |
當你這樣子設置之後，全部的連結在預設上就會是套用 base 的屬性，因此這邊就會採用相對路徑的作法
1 | |
接下來你不論是點哪一個都會是直接連到我的部落格，而且是另開視窗的方式
當然不用擔心後面無法替換連結，只要你填寫的是一個完整的 URL 就不會吃到 base 的 href 設置
除此之外 base 的 href 還可以對應 img 的 sre 路徑
1 | |
整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ
你的支持會直接轉換成更多技術筆記
如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕
|
|
