0 前言
HTML5+CSS+JS做手機APP越來越來流行了，所以我也在涉及這一領域。上篇blog就算是對當前市場的一個簡單介紹，這一篇主要是涉及HTML原理的，後期還會系統的討論HTML的性能和能力的問題。歡迎大家留言交流！
1 HTML簡介
HTML是一種標籤語言，含有帶不同語意的標籤，經解析後成爲網頁上顯示的內容。一般HTML（網頁，HTML Page）是在Browser中運行，並且與用戶交互。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = “UTF-8”>
<style>
button
{ color:#FF0000;
}
<style>
<script>
function show(){
alert(“hello world”);
}
</script>
</head>
<body>
<button onclick = “show();”> Click Me </button>
</body>
</html>
HTML在Browser中運行的原理，如下圖：
HTML Document包含各種資源，HTML Context是其運行環境。
2 解析HTML
首先，Browser會將HTML Document加載到內存中，解析Document的標籤語義。Document的標籤類型有兩種：系統資源類型和用戶界面類型。系統資源類型，用於描述瀏覽器、運行環境中的運行參數、樣式設置等資源。用戶界面類型的HTML標籤，用於描述顯示在網頁上的各種用戶界面控件，控件具有輸出數據給用戶或是接受用戶輸入等功能。
3 DOM對象模型
然後，Browser將HTML Document轉換爲對象模型DOM（Document Object Model），將DOM創建在運行環境裏，讓程序代碼來處理。DOM是樹狀結構的對象模型，一個HTML Document對應一個DOM對象樹。這個對象樹的節點是Document中的HTML標籤。DOM是Browser在HTML Context中提供給開發人員使用的，用來控制HTMLDocument的API。通過DOM API在DOM對象樹上對DOM節點做各種操作，都將體現在HTMLDocument上。
其原理如圖（結合上面的代碼）：
4 前端顯示的過程
最後，Browser在完成分析HTMLDocument的標籤後，會顯示在Browser上。顯示的過程，有如下2步：
（1）將HTML Document中的用戶界面類型標籤顯示在網頁上，並按照資源類型標籤所定義的CSS樣式來決定顯示外觀。
（2）用戶在進行單擊等交互事件發生時，會運行Document中資源類型標籤所定義的Javascript程序代碼。代碼中，封裝了網頁運行的程序邏輯。同時，代碼可以通過Browser所提供的DOM API去控制HTML Document。
5 結語
經過這一長串讀取、分析、顯示Document的流程，最終用戶會在Browser中顯示HTML Page。網頁提供了各種信息和服務，以此滿足用戶需求。
