html的基本結(jié)構(gòu)
<html>
<head>
<!-- 頭部中包含的標(biāo)記是頁(yè)面的標(biāo)題、序言、說(shuō)明等內(nèi)容，它本身不作為內(nèi)容來(lái)顯示，但影響網(wǎng)頁(yè)顯示的效果 -->
</head>
<body>
<!-- 顯示實(shí)際內(nèi)容 -->
</body>
</html>
①html：貫穿整個(gè)頁(yè)面
②css：三種聲明方式
- 外聯(lián)樣式表：在head便簽中 用link標(biāo)簽的href屬性來(lái)引用后綴名為.css的css樣式文件
- 內(nèi)聯(lián)樣式表：在head標(biāo)簽下的style標(biāo)簽中，選擇器 + 樣式聲明
- 內(nèi)部樣式表：在標(biāo)簽的style屬性中添加css樣式聲明
③JavaScript：在<script>標(biāo)簽中，可以在head標(biāo)簽中，也可以在body標(biāo)簽中（區(qū)別一會(huì)再說(shuō)）
目前為止，在整個(gè)html頁(yè)面中，可以寫(xiě)html代碼、css樣式、JS腳本語(yǔ)言
寫(xiě)的位置：
- html貫穿整個(gè)頁(yè)面，
- css可以定義在head頭標(biāo)簽中，也可以在定義在html標(biāo)簽的屬性中
- JavaScript定義在<script>標(biāo)簽中，<script>標(biāo)簽既能在head標(biāo)簽中定義也能在body標(biāo)簽中定義
加載順序：
<html>
<head>
<!-- 引用外部JS文件 -->
<script src="..........."></script>
<!--引用外部css樣式 -->
<link href="............."/>
<style>
..............
</style>
<script>
..............
</script>
</head>
<body>
<script>
..............
</script>
</body>
</html>
從上到下運(yùn)行，先解析head標(biāo)簽中的代碼，
（1）head標(biāo)簽中會(huì)包含一些引用外部文件的代碼，從開(kāi)始運(yùn)行就會(huì)下載這些被引用的外部文件
當(dāng)遇到script標(biāo)簽的時(shí)候，瀏覽器暫停解析（不是暫停下載），將控制權(quán)交給JavaScript引擎（解釋器）
如果<script>標(biāo)簽引用了外部腳本，就下載該腳本，否則就直接執(zhí)行，執(zhí)行完畢后將控制權(quán)交給瀏覽器渲染引擎
（2）當(dāng)head中代碼解析完畢，會(huì)開(kāi)始解析body中的代碼
如果此時(shí)head中引用的外部文件沒(méi)有下載完，將會(huì)繼續(xù)下載
瀏覽器解析body代碼中的元素，會(huì)按照head中聲明一部分樣式去解析
如果此時(shí)遇到body標(biāo)簽中的<script>，同樣會(huì)將控制權(quán)交給JavaScript引擎來(lái)解析JavaScript
解析完畢后將控制權(quán)交還給瀏覽器渲染引擎。
當(dāng)body中的代碼全部執(zhí)行完畢、并且整個(gè)頁(yè)面的css樣式加載完畢后，css會(huì)重新渲染整個(gè)頁(yè)面的html元素。
（3）按照之前的描述，<script>寫(xiě)到body標(biāo)簽內(nèi)靠后比較好，
因?yàn)镴avaScript 會(huì)操作html元素，如果在body加載完之前寫(xiě)JavaScript，會(huì)造成JavaScript找不到頁(yè)面元素
但是我們經(jīng)常將<script>寫(xiě)到head中，body中不會(huì)有大量的js代碼，body中的html代碼結(jié)構(gòu)會(huì)比較清晰
-
window.onload： 等待頁(yè)面中的所有內(nèi)容加載完畢之后才會(huì)執(zhí)行
-
$(document).ready()： 頁(yè)面中所有DOM結(jié)構(gòu)繪制完畢之后就能夠執(zhí)行
可以這樣理解：window.onload 和$(document).ready()/$(function(){});相當(dāng)于 寫(xiě)在body 內(nèi) 最靠后的<script>代碼段
Html、js的加載順序：
<html>
<head>
<script>
alert("script-head");
</script>
</head>
<body onload="alert('html-tag');">
<script>
alert("script-body");
</script>
</body>
<script>
alert("script-body-outer");
</script>
</html>
<script>
alert("script-html-outer");
</script>
輸出結(jié)果：
script-head、script-body、script-body-outer、script-html-outer、html-tag
從上面輸出結(jié)果可以明顯看到：
js在頁(yè)面裝載時(shí)執(zhí)行的順序就是其引入標(biāo)記<script />的出現(xiàn)順序，<script />標(biāo)記里面的或者通過(guò)src引入的外部JS，都是按照其語(yǔ)句出現(xiàn)的順序執(zhí)行，而且執(zhí)行過(guò)程是文檔裝載的一部分。只有全部js腳本按順序加載完畢后才開(kāi)始html標(biāo)簽內(nèi)容的加載過(guò)程。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
