重新認識HTML，CSS，Javascript 之node-webkit 初探，cssnode-webkit
今天我們來系統的、全面的 瞭解一下前端的一些技術，將有助於我們寫出 更優秀的 產品 出來。
什麼是HTML？
HTML 是用來描述網頁的一種語言。
HTML 包含一些根節點，子節點，文本節點，屬性節點，組成，
它通過一系列預定義標籤來描述網頁結構，如： <title>This is title</title> ，這個表明該網頁的標題是 This is title。
什麼是CSS？
CSS 指層疊樣式表 (Cascading Style Sheets)，它描述瀏覽器顯示如何顯示html元素。
看下面代碼，瀏覽器 將會 以 20px綠色字型 顯示 p標籤中的文本節點
p { font-size: 20px; color: green; }
這些html元素 、css樣式 是由W3C組織制定規範；
然後由不同瀏覽器實現，所有你會看到 同一個網頁 頁面，通過不同的 瀏覽器查看，顯示會有一些差別。
下面圖片是說明 瀏覽器 如何解析 html 和 css的:
html 就是一個文字檔，
1、瀏覽器通過http 請求 伺服器，把html文檔 下載下來
2、把html解析成dom樹，同時提供dom介面，方便其他程式設計語言操作dom樹，如：javascript
3、下載並，解析css樣式規則
4、把樣式規則依附在html元素上（以css選取器作為依賴）
5、渲染dom樹
6、顯示
為什麼說html，css，javascript 是 跨平台的？
html，css，javascript 其實 就是 一個文字檔，然後通過瀏覽器 不同的引擎 去 解析相應的 代碼 來 執行，
所以 只有 實現某個 平台 下 的 瀏覽器就行了 ，就可以在 這個平台上 使用 這個 Web Project，聽起來 是不是 覺得 頓悟了。
而java 跨平台 的原理 則是 ，把 java源檔案 翻譯成 與 平台無關的class檔案，然後通過 JVM 去 載入 執行。
值得一提的是 JVM 也是 一個 規範， 使用廣泛的JVM 是 Java HotSpot ，如果你能力夠強的話，可以基於openjdk
來 開發 自己的jdk ，來實現jdk層級的 最佳化。
如此分析，是不是覺得HTML、CSS、Javascript 很可愛，它其實就是一個規範，
現在HTML5 、CSS3 ,EcmaScript6 提出很多 新的 特性，概論，如果一旦 瀏覽器得到了更好的 支援，那就移動Web開發 將成為 主流， 而 android，ios ，這類原生的程式 將會慢慢 的減少。
想象一下，通過瀏覽器，就可以實現所有的請求，比如 聊天 ，看視頻，上網方式 將會變得非常 優美，不是麼。
好吧，接下來 說一下 node-webkit，我的理解是 它是一個nodejs引擎+ webkit 引擎。
通過nodejs引擎 解析 js ，而通過 webkit 引擎 解析 html 、 css ，所以在網頁中可以嵌入 nodejs 的代碼 。
有些html 、 css、js的經驗的話， 會很平滑的過渡，來開發一些東西。
那我們來 掀起node-webkit的蓋頭來 吧。
開啟nw.exe 來看看
乍一看 ，就是 Google瀏覽器啊，好吧，來點乾貨吧。
index.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>what's node-webkit?</title> <style> h1 { color: red; } p { font-size: 20px; color: green; } </style> <script> console.log('當你看到這段文字，說明這段代碼被nodejs引擎，解釋，執行了'); console.log(this); </script></head><body><h1>This is a nw app.</h1><p>它是一個nodejs引擎+ webkit 引擎 </p></body></html>
{ "name": "nw-frist", "version": "0.0.1", "main": "index.html"}
第一圖 是用 nw 去執行 ，第二圖是在Google Chrome 中查看，
可以看出 ，效果 是一樣的。
好吧，來添加點不一樣的。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>what's node-webkit?</title> <style> h1 { color: red; } p { font-size: 20px; color: green; } </style> <script> console.log('當你看到這段文字，說明這段代碼被nodejs引擎，解釋，執行了'); console.log('this : ', this); console.log('global : ', global); </script></head><body><h1>This is a nw app.</h1><p>它是一個nodejs引擎+ webkit 引擎 </p></body></html>
這意味著node-webkit javascript 運行環境 是 nodejs，
那 我們就可以在 html script標籤中 使用 nodejs 進行 編程，包括，讀取本地檔案，進行網路請求，訪問本地硬體裝置。。。等等 ，這是不是 意味著可以用來 開發 本地程式 ？答案 當然是 true ，而且可以 跨平台 ，就如 上面分析的一樣。我們可以使用html5 、css3 開發 非常優美，互動更棒的 本地 web app ，有大量的 nodejs 包 和 js lib 使用， 試想一下 用 c++ ， vb ，Python 開發一個 漂亮的本地程式，要自訂 一些 組件， 那是多麼 麻煩。
有時間我們將通過 node-webkit，寫一個 檔案瀏覽器，來實踐一下 ，這些技術是 怎麼 結合 的？
以上 純屬個人 見解。
第一階段：前台工程師
1 入門：學html。
2 進階：學css。
3 中級：學javascript。
4 進階：活學活用這三者結合，這一步需要大量的實踐。
5 高手：建議學一下jQuery，是javascript操作html和css的利器。
6 終極：建議學一下PS和Flash，如果javascript學的好，再順便學一下Action Script
第二階段：.Net 後台工程師
1 初級：資料庫基礎：Access
2 入門：資料庫SQLServer以及查詢語句
3 中級：VB.Net或C#基礎
4 進階：ASP.Net操作資料庫，以及資料庫預存程序的編寫
5 高手：AJAX結合前後台
6 終極：熟悉作業系統中的組件，建議學習MVC、WCF等
第三階段：J2EE後台工程師
與第二階段類似，過程中你會覺得和C#如同雙胞胎一樣接近
以上是我走過的路，當然不一定適合你，推薦一篇文章：《程式員箴言》，很早以前看過的，或許網上有，你會成為優秀的程式員的！
Html，Javascript，Css是什？
HTML（Hypertext Markup Language）。HTML是一種規範，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。網頁檔案本身是一種文字檔，通過在文字檔中委任標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁檔案，然後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編製者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對於不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。
Javascript，JavaScript是一種基於對象和事件驅動並具有相對安全性的用戶端指令碼語言。同時也是一種廣泛用於用戶端Web開發的指令碼語言，常用來給HTML網頁添加動態功能，比如響應使用者的各種操作。它最初由網景公司的Brendan Eich設計，是一種動態、弱類型、基於原型的語言，內建支援類。JavaScript是Sun公司的註冊商標。[1] Ecma國際以JavaScript為基礎制定了ECMAScript標準。JavaScript也可以用於其他場合，如伺服器端編程。完整的JavaScript實現包含三個部分：ECMAScript，文件物件模型，位元組順序記號。
CSS（Cascading Style Sheet）可譯為“層疊樣式表”或“階層式樣式表”，它定義如何顯示 HTML 元素，用於控制Web頁面的外觀。通過使用CSS實現頁面的內容與表現形式分離，極大提高了工作效率 。樣式儲存在樣式表中，通常放在<head>部分或儲存在 外部CSS檔案中。作為網頁標準化設計的趨勢，CSS取得了瀏覽器廠商的廣泛支援，正越來越多的被應用到網頁設計中去。
看了上面東西，你可能會暈，其實這三個東西就是之製作網頁的三種技術。一時間也無法能夠讓你明白它具體是什麼，如若有興趣，可以到www.xyhtml5.com看看，這個網站是介紹html5的，html5是html的最新版本，要瞭解，當然要瞭解最新的！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
