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 | 鏈結的 URL | Yes |
| 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> 常見用法
HTML a tag 的用法總體來說分別為:
- 一般超連結
- 頁面錨點
- 點擊 call API 紀錄
- 開電話 ro 開 Email
- 下載檔案
超連結
HTML <a> 最常被使用的就是超連結，不管是連到某個頁面，或是站內頁面互聯，又或著是連至一個檔案。
Example 1 : 超連結
<a href="seanacnet.com">
前往首頁
</a>執行結果如下:
前往首頁<a> 超連結還會常與 target 屬性搭被使用。
超連結 a – 另開分頁/開新分頁/視窗
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 的常見用法，如果你想問而其他屬性的用法呢，也可以詢問，會另外再作介紹。
發表迴響