src可以在HTML5出現(xiàn),src是html5中用于設(shè)置元素映射url的屬性;src屬性在html5中是source的縮寫(xiě),是來(lái)源的意思,可以作為媒體元素“HTNLDediaElement”的媒體資源映射URL,例如“<img src="img文件路徑">”、“<script src="js路徑">”。
本教程操作環(huán)境:windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
HTML5 src屬性
src 屬性是source的縮寫(xiě),意思為來(lái)源,一般作為媒體元素 HTNLDediaElement 的媒體資源映射URL。例圖片、腳本的資源路徑:
<img src="image/demo.png"> <iframe src="inner.html"> <script src="demo.js"></script>
src 加載媒體資源時(shí)時(shí)阻塞式的,頁(yè)面的其他資源會(huì)暫停處理,這就是為什么一般吧 script 腳本標(biāo)簽放在文檔末尾加載的一個(gè)原因。
擴(kuò)展:
href 是 Hypetext Reference 的縮寫(xiě),意思為超文本引用,由于是非媒體資源,外部引用,也就是頁(yè)面無(wú)需呈現(xiàn)出來(lái)的資源,所以加載這種資源的時(shí)候是非阻塞式的。例 link 和 a 標(biāo)簽:
<link rel="stylesheet" src="style/demo.css"> <a href="./demo">demo</a>
總結(jié)來(lái)說(shuō)就是,src 是媒體資源路徑的映射,是阻塞式加載,href 是超鏈接,是非阻塞式的。
我們可以理解為媒體資源是需要實(shí)實(shí)在在顯示在頁(yè)面上的,是DOM結(jié)構(gòu)中的實(shí)實(shí)在在的數(shù)據(jù),因此會(huì)阻塞加載,而超鏈相當(dāng)于一個(gè)屬性,一條引用,并不需要把真實(shí)的資源呈現(xiàn)到頁(yè)面上,也就無(wú)需阻塞頁(yè)面加載了。
值得注意的一問(wèn)題就是,js腳本并不是媒體資源,也不是DOM需要的數(shù)據(jù),為什么 js 腳本要用 src 而 css 就可以用 href 呢?實(shí)際上,這是設(shè)計(jì)之初的決定,可能設(shè)計(jì)者認(rèn)為js腳本的執(zhí)行會(huì)改變頁(yè)面,也就是改變DOM,當(dāng)然需要隨著頁(yè)面一起加載,而 css 只是頁(yè)面樣式,并不會(huì)改變 DOM ,也就屬于超鏈接了,從這層含義理解,就知道是否阻塞頁(yè)面和引用的資源大小無(wú)關(guān)了,而是和是否實(shí)際改變了頁(yè)面 DOM 有關(guān)。
(學(xué)習(xí)視頻分享:css視頻教程、html視頻教程)