幾年前寫過一篇博文 《新手理解HTML、CSS、javascript之間的關系》，沒想到網上出現了不少轉載，當時沒有太用心，里面的很多內容有待商榷，這里發布重新發布一篇。
網頁主要有三部分組成，結構(HTML)、表現(CSS)、行為(Javascript)。
一、HTML、CSS、JavaScript簡介和分工
1、什么是HTML（超文本標記語言 Hyper Text Markup Language），HTML 是用來描述網頁的一種語言。
2、CSS(層疊樣式表 Cascading Style Sheets),用來定義如何顯示 HTML 元素，語法為：selector {property：value} (選擇符 {屬性：值})
3、JavaScript是一種腳本語言，其源代碼在發往客戶端運行之前不需經過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行
對於一個網頁，HTML定義網頁的結構，CSS描述網頁的樣子，JavaScript定義網頁的行為，打個比喻，HTML就像 一個人的骨骼、器官，而CSS就是人的皮膚，有了這兩樣也就構成了一個植物人了，加上javascript這個植物人就可以對外界刺激做出反應，可以思考、運動、可以給自己整容化妝（改變CSS）等等，成為一個活生生的人；如果說HTML是肉身、CSS就是皮相、Javascript就是靈魂。沒有Javascript,HTML+CSS是植物人，沒有Javascript和CSS是個毀容的植物人；如果說HTML是建築師，CSS就是干裝修的，Javascript是魔術師。
怎么把這三者聯系在一起呢，這是我們前端的工作，假設我們的HTML文檔這樣寫的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>網頁標題</title> <link rel="stylesheet" type="text/css" href="./mycss.css" /> <script type="text/javascript" src="./myjs.js"></script> </head> <body> <p>這是一個段落</p> </body> </html>
這是一個最簡單的HTML文檔，文檔告訴瀏覽器說：瀏覽器啊，我遵循W3C標准XHTML1.0過渡版本規范（文件類型聲明），請用這個標准解析我,我采用的編碼是utf-8,我的標題是:網頁標題，描述我的模樣的樣式表是我同級的mycss.css文件，與我有關的javascript代碼在我同級的myks.js文件中，我的內容有一個段落，段落的內容是“這是一個段落”。
到這里，我們不得不說說 瀏覽器了，前端不了解瀏覽器就好像農民不了解自己的地一樣，前端程序猿土地就是瀏覽器了。 在瀏覽器能控制的領域，如果你只能完成頁面布局的工作，而把事件綁定，前端驗證，數據交互交給后端，無異於割地求饒， 由於這是篇入門文章，這里只講瀏覽器為我們能做些什么，瀏覽器工作原理以后再說。
瀏覽器（web browser）
通俗的說瀏覽器用於通過網址（URL）來獲取並顯示Web網頁的一種軟件工具,最早的web瀏覽器是創建於1991年的WorldWideWeb，后來改名為Nexus，之后出現了各類瀏覽器，直到1994年，網景公司（Netscape）發布了Navigator瀏覽器0.9版，這是歷史上第一個比較成熟的網絡瀏覽器，隨后的1995年微軟推出了IE瀏覽器，從此掀起了瀏覽器大戰，微軟采取操作系統捆綁IE瀏覽器，最終獲得壓倒性勝利，戰爭失利的Netscape在之后被收購、合並、解散。之后一段時間IE獨領風騷，之后被Opera，Safari，Firefox，Chrome陸續瓜分掉一些市場份額，改變了一家獨大的局面。
當一個用戶輸入一個正確的網址，按下回車鍵，盡忠職守的瀏覽器經過一系列的工作（DNS解析->建立TCP連接->發起HTTP請求->接受服務器響應，得到html代碼），千辛萬苦地在互聯網的某一台服務器上請求到了一個html文檔，並下載該文檔關聯的資源（如css文件，圖片，js文件），之后瀏覽器調動自己手下的一個部門：渲染引擎，把頁面繪制出來， 讓另一個部門：js引擎來解釋javascript代碼。
瀏覽器所渲染和解釋的代碼，html、css和javascript是由前端編寫的，換言之前端程序猿編寫的代碼最終是要交給瀏覽器執行；由於瀏覽器的種類很多，前端要保證大部分主流瀏覽器對你的代碼都能按你的想法正確的解析和執行，這是個很繁瑣的工作，幸好出現了一個W3C組織(萬維網聯盟,創建於1994年), 大部分現代瀏覽器都遵從W3C規定的標准解析網頁。
W3C標准規定了三個方面的標准：
1、結構化標准（HTML，XML） 2、表現標准（CSS） 3、行為標准（ECMAScript）
大部分瀏覽器執行這些標准的時候比較寬容，寬容的程度又有所不同，所以前端在編寫網頁的過程中要一定要遵從W3C標准。
二、HTML、CSS、JavaScript發展
1、HTML的版本歷史
超文本標記語言（第一版）——在1993年6月作為互聯網工程工作小組（IETF）工作草案發布（並非標准）：
HTML 2.0——1995年11月作為RFC 1866發布，在RFC 2854於2000年6月發布之后被宣布已經過時
HTML 3.2——作為 W3C 標准發布於 1997 年 1 月 14 日
HTML 4.0——作為一項 W3C 推薦，HTML 4.0 被發布於 1997 年 12 月 18 日
HTML 4.01（微小改進）——作為一項 W3C 推薦，HTML 4.01 發布於 1999 年 12 月 24 日
XHTML 1.0——作為一項 W3C 推薦，XHTML 1.0 發布於 2000 年 1 月 20 日，XHTML 1.0是一種在HTML 4.0基礎上優化和改進的的新語言，目的是基於XML應用。
HTML 5——W3C 於 2008 年 1 月 22 日發布 HTML 5 工作草案，html5的最新草案2010 年 6 月 24 日發布的，IE9以上Chrome,Firefox,Safari,Opera支持。
HTML6 展望,HTML6 規范還未正式發布。
目前我們只需要學習XHTML和HTML5，因為現在能看到的大部分網頁是使用XHTML或者HTML5這兩個版本的， XHTML 與 HTML 4.01 幾乎是相同的，HTML從最初發展到XHTML的過程中變得更加的嚴謹，更加的靈活，與CSS結合的更好。
HTML5
它是對HTML5的一次重大的修改，雖然HTML5 標准還在制定中，但不能阻礙其勢不可擋的腳步，特別是移動端開發的大量普及，相信html5很快就會取代xhtml,不管是移動端還是pc端成為html應用的主流版本。但是對於前端切圖狗來說，html5可能僅僅意味着更多的語義化標簽，更加精簡的代碼，更加嚴謹的結構與表現分離，HTML5的精髓在哪呢？這個得單獨說一下，請見《HTML5的入門與深入理解》
2、CSS的版本（Level）
1996年W3C正式推出了CSS1；
1998年W3C正式推出了CSS2；
CSS2.1是W3C現在正在推薦使用的；
CSS3最新的 CSS 標准,IE9以上Chrome,Firefox,Safari,Opera支持。
如果說HTML的發展是一個不斷修改的過程，那么CSS的發展就是一個不斷補充的過程，所以在使用CSS的時候，不需要像HTML那行申明使用的標准，高版本的瀏覽器認識高版本的CSS定義，低版本的瀏覽器略過不認識的CSS定義。不管什么版本，CSS的語法很簡單，選擇器：{屬性：屬性值}，所以火爆的CSS3無外乎是擴展了選擇器和屬性。
CSS3新增的選擇器和屬性請見《CSS3新增的選擇器和屬性》
3、JavaScript的前世今生
JavaScript一種直譯式腳本語言，它的解釋器被稱為JavaScript引擎，是瀏覽器的一部分，即：JavaScript是由客戶端的瀏覽器解釋執行的。
遙想1994年網景公司（Netscape）在發布了Navigator之后，急於解決瀏覽器與用戶交互這個問題，在1995年在網景公司高層的要求下，Javascript之父Brendan Eich只用了10天的時間發明了livescript, 由於網景高層是java的粉絲，或者說為了抱上當時熱炒的java的大腿，LiveScript更名為javascript。
Javascript1995年5月定稿，12月推向市場，立刻被廣泛接受，全世界的用戶大量使用。不得不說，這是個奇跡，奇跡的產生的根源是Brendan Eich嗎？並不是，Brendan Eich對自己的作品並不滿意，根源來自於迫切的需求，世界太需要用戶能夠與瀏覽器互動了。但是，有過項目開發經驗的人都知道 ，對后期的維護來說將是災難性的，雪上加霜的是，1996年8月，微軟宣布推出自己的腳本語言Jscript；11月，為了壓制強勢的微軟，網景公司決定申請Javascript的國際標准；1997年6月，第一個國際標准ECMA-262正式頒布。
瀏覽器與用戶相互的迫切需要下，javascript發展的太快了，兩年的時間，從開發到固化，Javascript的規范還沒來及調整。相比之下，C語言問世將近20年之后，國際標准才頒布。 由於這些歷史的原因Javascript有很多缺陷，但是JavaScript在前端的地位已經無可替代。
通常說的JavaScript 由核心（ECMAScript）和瀏覽器給JS提供的API（Web API）構成，這些API中最基礎和著名的就是DOM（文檔對象模型）和BOM（瀏覽器對象模型）,直到現在還有人說JavaScript=ECMAScript+DOM+BOM，其實現代瀏覽器為JS提供了很多API，除了DOM和BOM，還有用於從服務器獲取數據的API，如XHR，Fetch,用於客戶端存儲的API，如：cookie,localStorage,用戶數據管理的API，如IndexedDB，繪制和操作圖形的API，如Canvas,地理定位API,音頻和視頻API等等。
ECMAScript(JavaScript語言的標准)的版本
ECMAScript 1.0——1997年6月，第一個國際標准ECMA-262正式發布
ECMAScript 2.0——1998年6月發布
ECMAScript 3.0——1999年12月發布，，成為JavaScript的通行標准，得到了廣泛支持。標志着 ECMAScript 成為一種真正的編程語言。
ECMAScript 4.0—— 2008年7月，各方分歧太大，ECMA開會決定，中止ECMAScript 4.0的開發。
ECMAScript 3.1—— 2008年7月對ES3有些增強，沒有ES4那么激進
ECMAScript 5.0—— 2009.12發布， 同時發布JavaScript.next(ES 6.0)，瀏覽器支持：Internet Explorer 9*，Firefox 4，Chrome 13，Safari 5.1**，Opera 11.60
ECMAScript 5.1—— 2011.06發布，成為ISO國際標准，這個規范在所有現代瀏覽器中都相當完全的實現了。
ECMAScript 6——2015年6月正式發布，ECMAScript 6(ES6)的發展速度非常之快，但現代瀏覽器對ES6新特性支持度不高，所以要想在瀏覽器中直接使用ES6的新特性就得借助別的工具來實現。 可以使用babelES6代碼完美地轉換為ES5代碼，所以我們不用等到瀏覽器的支持就可以在項目中使用ES6的特性。