【HTML系列#5】href、a、target介紹與教學,一起自訂傳送門!

href a

你知道現在每個網頁都有在使用 a 標籤嗎?

無論是圖片、文字或按鈕等等,可以按下之後連到不同的網頁,這個物件基本上就使用到了 a 標籤

如果不知道怎麼使用,以下為你介紹 : HTML href、a、target 等標籤屬性用法

本篇內容包含 :

  • HTML 的 href、a、target 是什麼?
  • href、a、target 怎麼用?
  • href、a、target 的 Q&A

前端入門系列 – HTML篇

本系列會介紹與教學關於HTML最基礎的知識語法,歡迎分享與留言討論!

HTML系列#1: 【HTML系列#1】HTML是什麼?5分鐘做出簡易網頁!

HTML系列#2: 【HTML系列#2】h1~h6介紹與教學,影響SEO的重要關鍵!

HTML系列#3: 【HTML系列#3】div、p、span 介紹與教學,區塊、段落一篇搞懂!

HTML系列#4: 【HTML系列#4】br、hr、& nbsp 介紹與教學,輕鬆加上斷行、分隔線與空格!

HTML系列#5: 【HTML系列#5】href、a、target介紹與教學,一起自訂傳送門!

HTML系列#6: 【HTML系列#6】ul、ol 介紹與教學,一招搞定清單列表!

HTML系列#7: 【HTML系列#7】img 介紹與教學,一行指令豐富你的網頁!

HTML系列#8: 【HTML系列#8】table 表格介紹與教學,5 分鐘搞懂表格!

HTML系列#9: 【HTML系列#9】iframe 介紹與教學,一招輕鬆嵌入影片!

HTML 的 href、a、target 是什麼?

a 標籤

a 標籤在HTML語法當中可以說是「超連結」的語法,只要輸入a標籤,再輸入你要通往的網頁網址,就可以變成一個傳送門!

現在的網頁幾乎都會用到a標籤,我們也可以稱為「a連結」,只要看到的任何按鈕、可以點的圖片等等,基本上都是運用了a標籤


href 屬性

href 屬性是被包含在a 標籤裡面的,它也是通往其他網頁的關鍵,因為這個屬性的內容,就是要放通往目標網頁的網址

它的寫法我們在後面的用法再一起介紹!


target 屬性

target 屬性在a 標籤中可有可無,它的目的是要讓網頁被點擊開啟時,決定網頁以什麼樣的方式開啟

可以是用原本的網頁跳轉到目標網頁、開啟新分頁來跳轉到目標網頁等等,如果都不設定,預設值會選擇用原本網頁跳轉



a 標籤範例影片 (英文版)




href、a、target 怎麼用?

上述介紹這三者可能有點模糊,這邊我會一一的用程式碼以及範例做介紹!

a 標籤、href 屬性用法

a 標籤的寫法為「<a href=”目標網頁網址” >顯示的連結文字或圖片</a>

這邊做個範例給大家按按看 : 聯盟行銷大師班課程,讓我開始建立網站並且開始在網路上擁有被動收入。

上面這句話的「聯盟行銷大師班課程」,就是一個超連結通往課程介紹,順帶一提,這課程真的很優質,有空再分享心得評價!

程式碼範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <a href="https://stupidnote.com/">笨蛋雜記</a>
    
</body>
</html>
href a
a link 範例程式碼

輸出結果

a link result
出現 笨蛋雜記 超連結

點擊後會直接跳轉到本站首頁



target 屬性用法

target 屬性的寫法就是在 href 屬性之後再加上target就可以了

它的寫法為「<a href=”目標網頁網址” target=”開啟網頁的方式” >顯示的連結文字或圖片</a>

而而開啟網頁的方式最常見的2種就是 : “_blank” 和 “_self”,但通常不會寫”_self”,因為不使用target,預設就是”_self”

這邊也提供範例給大家按按看 :

程式碼範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <a href="https://stupidnote.com/" target="_blank">笨蛋雜記</a>
    
</body>
</html>
target code
_blank 範例程式碼

輸出結果

target result
點擊後多出一個目標網頁新視窗


href、a、target 的 Q&A

Q1 : a 標籤和 href 是一定要一起用嗎?

A1 :

是的。兩個是必須一起存在,才會是一個完整的超連結,而target有或沒有就沒差了


Q2 : target 還有其他屬性內容嗎?

A2 :

有的,還有一個叫做”_parent”,它是讓網頁開啟於複層框架,但這邊幾乎很少用到,所以我就沒有在文章中做介紹


Q3 : 除了href 和 target 還有其他屬性嗎?

A3 :

有的,還有一個屬性叫做「title」,它寫法也是像target那樣,加在href之後的地方都可以

它的功能就是讓大家滑鼠移到連結時,鼠標旁邊會跳出一個框框,框框裡會顯示連結替代文字

像是 : 「<a href=”目標網頁網址” target=”開啟網頁的方式” title=”這裡打上替代文字”>顯示的連結文字或圖片</a>



總結

現在的網頁上基本上都會有a標籤的存在,而a標籤對於網站SEO也扮演著重要的角色

它可以讓文章中也外部連結、內部連結等等,之後有時間也會在分享關於連結與SEO的文章

希望這篇有幫助到不知道a標籤是什麼的人,謝謝大家!



Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top