某天,我在使用程式編輯器的時候,不知怎麼的,打了 link 按下 TAB 沒有自動帶出預設的 HTML 標籤,<link rel="stylesheet" href="">
,
於是就打出了這樣的結果,<link src="all.css" rel="stylesheet">
,
這樣當然不會載入 CSS 樣式,突然覺得我的未來一片白茫茫…
href、src 到底要用哪個?
才不會在沒有快速鍵的時候出問題!
於是我用恢復正常的 TAB 鍵,弄了一段簡易的 HTML,
其中,<link rel=”stylesheet” href=”all.css”>
與 <a href=”https://123123.123"></a>
,
它們使用了相同屬性,卻有感覺有不同的意義?
為什麼 <link>
與 <a></a>
不能用 src?
href 的全名是 “Hypertext Reference” ,通常被翻譯成”超文字引用/參考/關聯”,或是”超連結”,它可以跳轉至某個目標頁面、錨點或是與某文件關聯;
src 的全名是 “source” ,翻譯是 “資源”,
當我們要跳轉頁面、與某文件關聯,我們會用 href ;
載入 “資源”,我們會用 src,
但是,<link>
與 <a></a>
卻沒有 src 這個屬性?
若只注意 href 這個屬性,它可以是 "引用/引入/關聯" 等意義,
而 src 這個屬性則是將 ”資源” 插入/替換,<a></a>
很明確的不是要載入某個資源,它的目的是要連結到某個目標,所以 <a></a>
沒有 src屬性滿合理的,
而 <link>
則是將 CSS檔案引用/關聯進來,感覺像是將 “資源” 引用,
但是它不是 “插入/替換”。
所以,<link>
與 <a></a>
經由路徑將檔案引用/引入進來,
只不過 <a></a>
有具體行為,
順帶一提, <link>
的屬性 rel ,可以讓瀏覽器判斷它是 CSS。
那麼 <link>
與 <a></a>
有相同的屬性或許就能理解,
只是 <a></a>
的行為讓我們錯亂了?
日後若得到更好的解釋,會再更新,爬文雖然有很多類似解答,但感覺不是我想要的,於是參考這些文章,寫看看自己的,歡迎討論。
參考文章: