a(HTML) - ［▌▣］

a(HTML)

<a>: The Anchor element - HTML: HyperText Markup Language | MDN

anchor

屬性

2020-05-12 The Security Vulnerabilities of The Target="_Blank" Attribute

2024-10-25 Why does target=”_blank” have an underscore in front? | Kyrylo Silin

HTML attribute: rel - HTML: HyperText Markup Language | MDN

noreferrer

在送出的HTTP請求標頭上不加上HTTP參照位址

noopener

阻止連結後的網站使用window.opener

nofollow

告訴網路爬蟲不抓取連結的頁面

$ rel="noreferrer noopener nofollow"

2024-07-23 別タブへのリンク記述「target=”_blank”とrel=”noopener noreferrer”」の見直しを - 株式会社真摯

現在加上target="_blank"後，瀏覽器就會自動帶上rel="noopener"的操作，不需另外追加

noreferrer則有可能會對來源解析造成障礙

例如在同網站內的其他頁面開啟客戶服務頁面時，會喪失是從哪個頁面前來的資訊

只應該在明確確定不把參照位置傳送給目的網站時才使用

2025-08-03 A Few Things About the Anchor Element’s href You Might Not Have Known - Jim Nielsen’s Blog

href到底可以放哪些值？

協定連結

統一資源識別碼方案

協定相對連結

href="//"

href="#:~:text=foo"

除此之外的

href="#"

移動到文件最上方

如果沒有id為top的元素，#top也會移動到頁面最上方

在PDF頁面內，#page[num]可以移動到特定頁面，例如file.pdf#page42

href=""

重新載入目前頁面，保留查詢字符串，但移除URI片段的可選片段部分(雜湊字串)

例如

/path/和/path/#foo都會變為/path/

/path/?id=foo和/path/?id=foo#bar都會變為/path/?id=foo

href="."

重新載入目前頁面，並移除查詢字串和雜湊字串

需確認你的URL含有結尾斜線，否則可能出現意料外的重新導向行為

/path會導向/

/path/才會導向/path/

更精確一點來說，比較像是「根據URL結構，載入目前目錄的預設index頁面」

href="?"

重新載入目前頁面，並移除查詢字串和雜湊字串，但保留?字元本身

和href="."不同，有無結尾斜線並不重要，路徑會原樣保留

href="data:"

檔案內容

href="video.mp4#t=10,20

媒體片段

連到音訊或影片檔案的特定區間

不開啟分頁直接下載內容

code:javascript

const download = (jsondata) => {

const data = JSON.stringify(jsondata)

const filename = 'download.json'

const type = 'application/json'

const file = new Blob(data, { type });

const url = URL.createObjectURL(file);

const a = document.createElement('a');

a.href = url;

a.download = filename;

a.click();

setTimeout(() => {

URL.revokeObjectURL(url);

}, 0);

}

缺點：用於串連請求時，快取會儲存在記憶體上，以及無法從瀏覽器的UI上看到下載進度

替代方案