Jeff的隨手筆記

學習當一個前端工程師

0%

『新手日記』Day-2 HTML src和href的區別

『新手日記』Day-2 HTML src和href的區別

https://miro.medium.com/max/1000/1*3T2IBR_RZJ-P7s8tJWSYGA.jpeg

前言

在學習<a>、<link>這兩個標籤時突然發現他們連接外部資料是用href這個屬性,跟之前學到<img>所使用到的src不一樣,當下就覺得幹嘛不用同樣的這樣還要多學一個屬性><”,因為這個起因讓我稍微研究了一下

名詞解釋

href-是hypertext reference的縮寫,此屬性指定 Web 資源的位置,從而定義當前元素或當前文檔與由該屬性定義的目標錨點或資源之間的鏈接或關係。例如:<a>、<link>

src — 是Source的縮寫,此屬性只是將資源嵌入到當前文檔中元素定義的位置。例如:<img>、<script>、<iframe>

兩者差別

在Stack Overflow有這樣一段解釋:

H:Is a erence to information for the current page Page Parsing is not stopped.SRCSOURCE

所以當我們要跳轉頁面或與某文件關聯,我們會使用 href ;但如果我們要的是載入 “資源”,我們就會使用 src。根據以上的結論來解釋下面的4個問題我就覺得會非常容易:

  • To refer a CSS file: href="cssfile.css" inside the link tag.
  • To refer a JS file: src="myscript.js" inside the script tag.
  • To refer an image file: src="mypic.jpg" inside an image tag.
  • To refer another webpage: href="http://www.webpage.com" inside an anchor tag.

結語

說實在的我也不知道自己的解讀是否正確,理論的東西真的太過複雜,我只好把它變成自己的想法來解讀,中文的資料確實不多英文我又只能靠google翻譯,如有不正確的地方再麻煩指教

參考資料

stackoverflow.com