紀錄工作經驗、相關知識,解決技術相關問題。

HTML

HTML a tag – 超連結常見用法整理

html a tag

html a tag

HTML <a> tag

HTML a tag,最常用於網頁的超連結中,但你知道除了超連結,<a>還有其他用法嗎?

HTML <a> 元素又有 Anchor 的意思,意味著建立一個通往某地的連結。

HTML <a> tag 屬性與說明

<a> 在 HTML 4 中有許多屬性,但在 HTML 5 中已經有不少淘汰了,記得在使用上不要使用到淘汰的,已經淘汰的屬性,說明就不多贅述,以下是整理表:

<a>屬性說明支持 HTML 5
href連結路徑Yes
charset淘汰
coords淘汰
download下載檔案大多適用
注意 Opera
不支援 : IE
href鏈結的 URLYes
href=”#id-name”錨點Yes
hreflang語言/語系Yes
name淘汰
ping追蹤 URL
多筆已空格區隔
大多適用
注意 Firefox
不支援 : IE
referrerpolicy發送訊息預設 no-referrer-when-downgrade
不支援 : IE, Safari
rel與鏈結的關係
多筆已空格區隔
Yes
rev淘汰
shape淘汰
target如何開啟連結Yes
type鏈結類型Yes
html a tag 屬性整理表

HTML <a> 常見用法

HTML a tag 的用法總體來說分別為:

  • 一般超連結
  • 頁面錨點
  • 點擊 call API 紀錄
  • 開電話 ro 開 Email
  • 下載檔案

超連結

HTML <a> 最常被使用的就是超連結,不管是連到某個頁面,或是站內頁面互聯,又或著是連至一個檔案。

Example 1 : 超連結

<a href="seanacnet.com">
   前往首頁
</a>

執行結果如下:

前往首頁

<a> 超連結還會常與 target 屬性搭被使用。

超連結 – 另開分頁/視窗

HTML a tag 另開,只需將 target 設定為 _blank 即可。

Example 2 : 超連結另開

<a href="seanacnet.com" target="_blank">
   另開一個首頁
</a>

執行結果如下:

另開一個首頁

a 頁面錨點

錨點的使用,需要搭配 HTML 中的 id ,也就是說,你希望在哪個地方有錨點,就必須在該處插入id,例如下方 HTML:

Exapmle 3 : a 錨點

<html>
  <head></head>
  <body>
    <header>
      <!-- 這是一個錨點 -->
      <a href="#a2">移動到內容二</a>
    </header>

    
    <main>
      <div id="a1">
        內容 1...
      </div>

      <div id="a2">
        內容 2...
      </div>

      <div id="a3">
        內容 3...
      </div>
    </main>
  </body>
</html>

如上面的 HTML 一樣,使用錨點的方式是以 # 開頭,後面接上你要去的 id 名稱。

當你需要使用錨點時,你只需將id 埋設好,再將帶有 #的 id 填入在<a> 的 href 屬性中即可。

點擊 HTML a tag 連結 call API 紀錄

點擊 <a> 連結,同時發送紀錄給指定URL or API,用到 ping 屬性。

HTML a tag 中的 ping 屬性,可以同時使用多組,使用多組 url 時,請用空格隔開。

這項功能在廣告追蹤、頁面版位功能追蹤很常見,不過一般製作者較少用到,大多比較可以再大型網站、購物網站、廣告公司提供的廣告 code中看到。

Exapmle 4 : a ping

假設我們再點擊連結時,需要去 ping 三個 URL , 分別為 ex.com/api/1, ex.com/api/2 , ex.com/api/3,在超連結中需這樣設定:

<a href="seanacnet.com" ping="ex.com/api/1 ex.com/api/2 ex.com/api/3">

開電話 ro 開 Email

這兩個算老功能了,直接看範例。

Example 5 : 開啟電話功能

<a href="tel:8860900000000">

Example 5 : 開 Email

<a href="email:ex@test.com">

下載檔案

下載檔案需在 a 中加入 download 屬性。

Example 6 : 開 Email

<a href="test.com/file.pdf" download>

結論

以上就是 HTML a tag 的常見用法,如果你想問而其他屬性的用法呢,也可以詢問,會另外再作介紹。

發表迴響