這裡先概括地跟大家講一下：HTML 就是超文字標記語言，組成網頁內容的最基本語言。你可以直接說他是網頁的骨架，網頁的圖片、文字、影片、音訊、程式都需要他引入到網頁中體現。

當然，光是 HTML 做網頁，只是有了內容，是遠遠不夠的。

從 Web 2.0 時代開始，都是盒子模型佈局法了，也就是用 Div + CSS 來實現佈局了。

CSS 就是層疊樣式表。透過樣式屬性來對標籤進行佈局規範，在不使用 table 佈局的時候，使用 CSS 樣式對網頁標籤進行對應的佈局實現才是主流的開發方式。

HTML (div)+CSS 佈局，是基礎入門的基本步驟，在這個階段，你需要學習的內容，包括有：

標籤語義化，SEO；頁面載入的流程和原理；網頁結構；盒子模型（W3C 盒子模型和 IE 盒子模型）；CSS 選擇器；CSS 佈局浮動、定位。

關於 HTML 和 CSS，我們要學到什麼地步，要怎麼學呢？

在開始階段，熟悉好佈局方法，做一個簡單的電商網頁的基本結構出來，無需考慮特效，也不需要考慮使用者互動。比如，我們可以仿照百度或者谷歌首頁，做出來一個搜尋引擎首頁。當然只是佈局和樣式，具體的互動和特效不用實現，這是一個比較簡單的練習。相對複雜一點的，比如入口網站（新浪、網易等）首頁的實現。當你可以獨立徒手完成一個複雜的網頁時，這部分內容就掌握的差不多了。推薦用文字編輯器，比如 Notepad++、Sublime 等進行練習。JavaScript

接下來是 JavaScript，這部分我個人推薦《JavaScript DOM 程式設計藝術》，雖然沒有 Head First 系列生動活潑，但勝在篇幅，這本只有大約 300 頁的技術書在浩瀚的技術類圖書海洋中算得上是薄的。

正如書中前言所說：本書是“主要是寫給 Web 設計師的”，而“不是專門寫給程式設計師的”。因此，它不會把你搞到很頭大。而且還有一個足夠吸引你的地方：那就是使用 JavaScript 可以給網頁加特效，只要對著書中的例項跟練就能看到效果了。如果你真的“對漂亮的 UI 以及各式各樣的動畫效果很感興趣”，那麼啃下這本書不算難事。

JavaScript 現在可以說是網際網路時代使用率最高的指令碼語言了，在網頁中，幾乎所有的資料渲染，特效的互動都需要利用 JavaScript。在學習前端開發的高階階段，大量使用演算法和框架的時候，依舊會大量使用 JavaScript。

在基礎階段，我們學習 JavaScript 主要掌握下面幾點：

基本關鍵字指令；基本資料型別、陣列；函式；面向物件程式設計；原型鏈、閉包；JSON；Ajax；DOM（文件物件模型原生 DOM 操作）；事件捕獲、冒泡、代理；常用函式方法；ES 5、6、7。

JavaScript 是我們學習前端開發中非常重要的一個內容，也是一個大家經常掉坑裡的難點。所以這部分我們給四周的時間。關於 JavaScript，除了上面的理論基礎，還需怎樣加強練習和鞏固呢？

其實很簡單，只要跟著書中的示例，自己實踐一遍即可。這裡需要特別注意的是：有很多同學在跟練時，採用對著書中程式碼敲程式碼的方式。這其實是效率非常低的學習方法。我個人的建議是：對於書中的示例，先看懂，理解透。然後學完本節或本章後，把書放在一邊，自己獨立動手嘗試實現那些示例。

jQuery

最後就是 jQuery 了，這塊知識我個人推薦《鋒利的 jQuery》。

這本書無需通讀，我們只要學過前面 9 個章節就可以了（依然是不到 300 頁）。實際上，第一章還有一點是 JavaScript 的知識。從某種意義上講，jQuery 實際上是對 JavaScript 的快捷實現方式。試想，沒有 jQuery 時，每次邏輯業務都需要手動寫，也就是每開發一次就要造一次輪子，很麻煩。如果能簡單一點就好了。藉助 JavaScript 的封裝特性，jQuery 應運而生。它其實就是用 JavaScript 封裝的類庫、外掛。在這部分的學習中，你可能會體會到這種便利。所以，jQuery 也是你必須要掌握的技能。那麼我們要掌握它到何種程度呢？

jQuery 語法和 JavaScript 原生語法的差異；Dom 物件和 jQuery 物件；jQuery 的入口函式和 JavaScript 的入口函式的差異；jQuery 事件的執行邏輯。

學習 jQuery，目的就是能快速的完成網頁的特效。但要記住，這本書只是 jQuery 的入門書。我們依舊留四周時間來消化它。好了，到此，前端入門知識就算結束了，這不到三個月的時間或許你會覺得有些無聊枯燥。但我要告訴你的是，這已經是通往前端大神的快捷之路了。還是那句話，對於基礎知識的把握，我們不能有一絲一毫的懈怠。不過也有個好訊息，這種無聊、枯燥的感覺或許已經結束了！

好了，到此我們總結一下初級階段的內容：

學習內容：HTML、CSS、JavaScript、jQuery；學習方法：理論學習（讀書、理解）+ 動手實踐（一個靜態網站）；學習時間：兩週（HTML、CSS）+ 四周（JavaScript）+ 四周（jQuery），總計兩個半月。進擊前端中級技能

其實在完成初級階段的學習後，我們就可以做出點東西了。完成一個電商網站的佈局，有特效的開發要求應該沒有問題。但是，移動裝置的流行席捲全球。我們的產品不能只面向傳統的 PC 使用者，更多地，應該偏向移動端。這就要 HTML5+CSS3 的組合來應對了，它可以幫我們完成多端的自適應，也就是我們常聽到的 “響應式佈局”。

所以，前端技術學習的第二階段會更加有趣，因為在這個階段裡，我們可以真的做出點完整的東西了！

中級階段我們攻克兩大技術點：HTML5 和 CSS3、Node.js。

首先我們來看 HTML5 和 CSS3。

CSS3 為響應式設計奠定了基礎。由於我們在之前有了基礎，所以這部分學習起來並不費力。這部分我個人推薦大家藉助免費的影片教程，實現快速通關。比如某培訓機構的免費影片教程，包含整個 HTML5+CSS3 的內容，如下圖所示：

這部分** 一週時間足矣**了。

說到 Node.js，它的意義就很大了。Node 讓 js 成為伺服器語言，可以完成 IO，網路通訊，資料庫操作等。可以說，掌握了 Node.js，你就可以變身為全棧工程師了！這部分我個人推薦大家藉助免費的影片教程，實現快速通關。