src可以在HTML5出現(xiàn)，src是html5中用于設(shè)置元素映射url的屬性；src屬性在html5中是source的縮寫，是來源的意思，可以作為媒體元素“HTNLDediaElement”的媒體資源映射URL，例如“<img src="img文件路徑">”、“<script src="js路徑">”。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。

HTML5 src屬性

src 屬性是source的縮寫，意思為來源，一般作為媒體元素 HTNLDediaElement 的媒體資源映射URL。例圖片、腳本的資源路徑：

<img src="image/demo.png"> <iframe src="inner.html"> <script src="demo.js"></script>

src 加載媒體資源時時阻塞式的，頁面的其他資源會暫停處理，這就是為什么一般吧 script 腳本標(biāo)簽放在文檔末尾加載的一個原因。

擴(kuò)展：

href 是 Hypetext Reference 的縮寫，意思為超文本引用，由于是非媒體資源，外部引用，也就是頁面無需呈現(xiàn)出來的資源，所以加載這種資源的時候是非阻塞式的。例 link 和 a 標(biāo)簽：

<link rel="stylesheet" src="style/demo.css"> <a href="./demo">demo</a>

總結(jié)來說就是，src 是媒體資源路徑的映射，是阻塞式加載，href 是超鏈接，是非阻塞式的。

我們可以理解為媒體資源是需要實實在在顯示在頁面上的，是DOM結(jié)構(gòu)中的實實在在的數(shù)據(jù)，因此會阻塞加載，而超鏈相當(dāng)于一個屬性，一條引用，并不需要把真實的資源呈現(xiàn)到頁面上，也就無需阻塞頁面加載了。

值得注意的一問題就是，js腳本并不是媒體資源，也不是DOM需要的數(shù)據(jù)，為什么 js 腳本要用 src 而 css 就可以用 href 呢？實際上，這是設(shè)計之初的決定，可能設(shè)計者認(rèn)為js腳本的執(zhí)行會改變頁面，也就是改變DOM，當(dāng)然需要隨著頁面一起加載，而 css 只是頁面樣式，并不會改變 DOM ，也就屬于超鏈接了，從這層含義理解，就知道是否阻塞頁面和引用的資源大小無關(guān)了，而是和是否實際改變了頁面 DOM 有關(guān)。

（學(xué)習(xí)視頻分享：css視頻教程、html視頻教程）