HTML頁面的載入順序
1、載入順序
<html> <head> <!-- 引用外部JS檔案 --> <script src="..........."></script> <!--引用外部css樣式 --> <link href="............."/> <style> .............. </style> <script> .............. </script> </head> <body> <script> .............. </script> </body> </html>
從上到下執行，先解析head標籤中的程式碼，
（1）head標籤中會包含一些引用外部檔案的程式碼，從開始執行就會下載這些被引用的外部檔案
當遇到script標籤的時候
瀏覽器暫停解析（不是暫停下載），將控制權交給JavaScript引擎（直譯器）
如果<script>標籤引用了外部指令碼，就下載該指令碼，否則就直接執行，執行完畢後將控制權交給瀏覽器渲染引擎
（2）當head中程式碼解析完畢，會開始解析body中的程式碼
如果此時head中引用的外部檔案沒有下載完，將會繼續下載
瀏覽器解析body程式碼中的元素，會按照head中宣告一部分樣式去解析
如果此時遇到body標籤中的<script>，同樣會將控制權交給JavaScript引擎來解析JavaScript
解析完畢後將控制權交還給瀏覽器渲染引擎。
當body中的程式碼全部執行完畢、並且整個頁面的css樣式載入完畢後，css會重新渲染整個頁面的html元素。
（3）按照之前的描述，<script>寫到body標籤內靠後比較好，
因為JavaScript 會操作html元素， 如果在body載入完之前寫JavaScript 會造成JavaScript 找不到頁面元素
但是我們經常將<script>寫到head中，body中不會有大量的js程式碼，body中的html程式碼結構會比較清晰
window.onload： 等待頁面中的所有內容載入完畢之後才會執行
$(document).ready()： 頁面中所有DOM結構繪製完畢之後就能夠執行
可以這樣理解：window.onload 和 $(document).ready()/$(function(){}); 相當於 寫在body 內 最靠後的<script> 程式碼段
2、頁面結構
（1）html
不僅可以包含文字，還可以包含圖片、連結，甚至音樂、程式等非文字元素的標記語言
（展示給使用者，不能太單調，css）
（2）css
是一種用來表現HTML的計算機語言，能使HTML頁面變得更加美觀
（要展示給使用者光漂亮是不夠的，使用者還要能夠動態的操作HTML頁面，也就是讓瀏覽器和使用者之間的互動不僅僅是使用者能瀏覽html中的內容，還要能對html頁面操作，JavaScript）
（3）JavaScript
用來給HTML網頁增加動態功能、互動行為
是一種解釋性指令碼語言（不進行預編譯）
目前我們熟悉的語言Java、JavaScript、C、C++，都屬於高階程式語言
①計算機不能理解高階語言，也就不能直接執行高階語言了
②計算機只能直接理解機器語言，所以任何語言，都必須將其翻譯成機器語言，計算機才能執行高階語言編寫的程式
③翻譯的方式有兩種，一個是編譯，一個是解釋。
1）編譯：Java語言的執行先經過編譯，但是JAVA語言的編譯不是直接編譯成計算機能識別的語言，而是編譯成JAVA虛擬機器能識別的class檔案
JAVA語言就是典型的翻譯方式為編譯的程式語言，
雖然不是編譯成計算機能直接識別的語言，但是同其他以編譯為翻譯方式的高階程式語言的原理大體上是相同的。
最明顯：C/C++，可以編譯成二進位制程式碼,以可執行檔案的形式存在（exe檔案）
都是先編譯再執行，而且是一次編譯到處執行，效率非常高。（只需要在第一次執行的時候編譯一次）
2）解釋：解釋性指令碼語言的程式不需要編譯，解釋性指令碼語言在執行程式的時候才翻譯
解釋性指令碼語言有專門的直譯器來負責解釋，不過每次都需要翻譯，效率比較低。
JavaScript 就是一種解釋性指令碼語言
④JavaScript也有自己專門的直譯器——JavaScript引擎，它存在於瀏覽器端，作為瀏覽器的一部分
一句話：html（超文字標記語言）、css（層疊 樣式表）、JavaScript指令碼語言這三樣東西在瀏覽器端相互配合、相輔相成形成了比較成熟的前端介面
（4）這三樣東西在HTML頁面中的位置
①html：貫穿整個頁面
②css：三種宣告方式
外聯樣式表：在head便籤中 用link標籤的href屬性來引用字尾名為.css的css樣式檔案
內聯樣式表：在head標籤下的style標籤中，選擇器 + 樣式宣告
內部樣式表：在標籤的style屬性中新增css樣式宣告
③JavaScript：在<script>標籤中，可以在head標籤中，也可以在body標籤中（區別一會再說）
小總結：
以上內容總結出一句話：目前為止，在整個html頁面中，可以寫html程式碼、css樣式、JS指令碼語言
位置：html貫穿整個頁面，
css可以定義在head頭標籤中，也可以在定義在html標籤的屬性中
JavaScript定義在<script>標籤中，<script>標籤既能在head標籤中定義也能在body標籤中定義
問題1：JQuery、EasyUI也可以寫在html頁面中
jQuery是一個快速、簡潔的JavaScript框架（本質上也是JavaScript）
EasyUI：類庫中都是以 .css和.js結尾的檔案。別人寫好的css樣式和JavaScript（本質上也是css和JavaScript）
所以追其根源，html頁面中就是 html、css、JavaScript
問題2：jsp中能編寫Java程式碼
jsp是特殊的Servlet，本質是Java，是Java就要執行在伺服器端，瀏覽器是不能解析Java程式碼的
為什麼用瀏覽器訪問jsp時能在瀏覽器端顯示呢?
分兩種情況：
①對於html檔案，當我們用瀏覽器訪問時能自動解析，解析完畢就會將內容展示在瀏覽器上
②對於jsp，當我們用瀏覽器訪問時，我們寫好的jsp檔案會生成.java檔案，伺服器執行JAVA檔案，會把jsp中編寫的html程式碼，傳送給瀏覽器
可以這樣理解，我們編寫的HTML檔案被瀏覽器直接解析
而我們編寫的jsp，是藉助JAVA程式碼將html程式碼發給瀏覽器，瀏覽器再解析
本質上都是瀏覽器解析html程式碼（這裡的html程式碼，包括剛才說的html、css、JavaScript）
---------------------
作者：李-進
來源：CSDN
原文：https://blog.csdn.net/m0_37550086/article/details/77513676
版權宣告：本文為博主原創文章，轉載請附上博文連結！