href、src 到底要用哪一個?

Vic Sun
Sep 1, 2019

--

某天,我在使用程式編輯器的時候,不知怎麼的,打了 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> 的行為讓我們錯亂了?

日後若得到更好的解釋,會再更新,爬文雖然有很多類似解答,但感覺不是我想要的,於是參考這些文章,寫看看自己的,歡迎討論。

參考文章:

  1. SRC和HREF之間的區別
  2. 空元素與非空元素
  3. 為什麼加載 JavaScript 使用 src,加載 CSS 使用 href?
  4. 為什麼沒有 <style src=””></style> ?

--

--