怎樣系統地自學前端？

12-31

目前水平是會寫靜態頁面。

「自學」是不可能太「系統」的，因為沒有人幫你把每一個階段的學習內容定義清晰。由於缺乏別人提供的反饋，你沒辦法知道自己某一階段的學習是否完成了。我一般的建議方式是，你去實體書店看看相關的書籍，那本順眼就從哪本學起，沒必要太在乎信息來源是否系統化。不同的書針對有不同背景的人寫，寫作風格也不一樣，既然沒有人針對你因材施教，你必須自己憑感覺做出正確的選擇，不要盲目使用別人的套路。

書看得差不多之後，就好好想一下你到底想通過你學會的技能做點什麼出來，最好做出來的東西能夠驗證你的學習成果，然後就去做吧。因為這不是根據考綱範圍設置的作業，肯定會涉及你不懂的知識，這會強迫你去再多學一些。至於具體多學多少，還是要看你的興趣。有些東西不僅僅是你做不出來，全世界就沒人做出來過，當然誰也不知道你會不會是第一個做出來的人。

做的時候要對自己提恰當的要求。自己對自己要求太低了就相當於作弊，沒有驗證你學習的內容。對自己要求太高的話，有可能難以向前邁進。學會一次一次地迭代，對自己提越來越高的要求。

具體到前端，我會建議如此劃分幾個學習階段：

第一階段，先把 HTML 語義理解了，並且學會 HTML 和 CSS/JavaScript 的分離。如果給你一個網頁設計稿，你能說出內容結果是怎樣，應該如何使用 HTML 描述，那就夠了。CSS 總是能做到的，不要在乎如何使用 CSS 把樣式做出來。描述清楚內容結構再去考慮 CSS。你不需要記住所有 HTML5 的標籤和屬性，有個概念就行，大家都是用到時再查的。常用的熟練之後就不需要查了，不常用的沒人會去刻意記住的。

第二階段，把 CSS 加到靜態頁面上。如果給你一個不太複雜的靜態頁面，你能用 HTML 和 CSS 做出來就可以了，而且不需要像素級精確。你不需要去背所有的 CSS 屬性和取值，熟練之後常用的自然會記住。在這個階段你會學會一些 HTML 和 CSS 之間的取捨，有時候完美的 HTML 會導致 CSS 寫不出來或極其複雜。

第三階段，學會讀簡單的 JavaScript。這有多難視乎你的編程背景，最終只要語法能看明白能理解別人寫的簡單代碼就行。為什麼要有這個階段呢？因為對於毫無編程背景的人來說這一階段可以很長，但又不像「精通 JavaScript」那麼遙不可及。這一階段的目的是讓你接下來可以理解和仿寫別人的代碼。

第四階段，學習簡單的 DOM 操作：監聽事件和改變顯示內容。無論你之後學習多麼複雜的 JavaScript，基本上觸發條件總是一個事件，而實際執行結果總會改變顯示內容。你只需要知道一些常見的 DOM 事件和常見的元素操作就夠了。還是那句話，不常用的背了也沒用。不通過背也能把別人的面試題答上來，那你才是真的實踐得足夠多了。

第四階段，學會使用一個基礎 JavaScript 庫。學 React 和學 jQuery 在這個階段其實沒區別，關鍵是要學會站在巨人的肩膀上，具體學什麼就要看你具體想做點什麼出來了。這個階段的目的是學會搭積木，相信你想做的事情積木已經提供大部分功能。你可以把你的精力集中在你想做出來的東西上。

第五階段，學點英語、學會用 Google 和 StackOverflow。完成上述四個階段後，沒有什麼前端問題是 StackOverflow 上搜不到的，遇到問題一點一點地擴充自己的知識吧。只有你動手過程中遇到問題並解決了，你才能學到新東西。

題主既然想『系統的自學』，作為一個和你年紀差不多從今年三月到九月學習半年也拿到了比較滿意的校招 offer 的非科班前端妹子，來分享一下踩過的坑。之前的經歷可以看我的這個回答 Murphy：女生學前端適合么？最近也有人來問我進度如何，可否分享一下書單之類的，在這裡寫一下吧~

我的學習路線是按照 @顏什麼都不記得適的這個答案顏什麼都不記得適：Web 前端怎樣入門？來的，最初沒想完全按照這個，畢竟是復旦大佬的路子可能不太適合我，最後卻發現讀的書還是和他推薦的基本一致，寫得真的很棒，非常感謝。接下來寫一下踩過的坑~ 然後題主可以參考一下這個坑到底值不值得入。

雖說是「系統的學習」，其實還是會「面向招聘學習」（捂臉），所以不止是閱讀書籍和編碼積累，了解前端現狀緊跟社區也很重要。我把學習積累方向大致分為四個方面：

計算機基礎
前端基礎
工程化相關及框架工具
影響力、社區貢獻

其實最後一點有點誇張啦，還是新人小白，哪裡來的影響力啊。。但是這也是努力的一個方向，畢竟如果是 github 的活躍分子，技術博客有乾貨，甚至知乎寫得好也能很加分。（我不是，正在努力中）。沒有科班的學習環境或者學長/導師引導就要自己創造，而且這種輸出式的學習對自己也是一種提升。學習順序不一定要依次來，畢竟沒有那麼多時間，而且知識都是相互聯繫的，科學上網學會搜索也能把一些知識關聯起來。

1. 計算機基礎

演算法和數據結構

我真的開始入門其實是用 Problems - LeetCode 的演算法題。按類別（數組、鏈表、樹、二分查找等）刷上十幾二十道，你應該就對數據結構想解決的問題有了大致了解。配合演算法（第四版）和 Coursea 上對應的課程 algorithms-part1 、algorithms-part2，公開課的大作業還是會有難度的，但很值得做，每個大作業都有豐富的說明和完善的測試用例。但是書後的習題都做的話就會比較漫長，自行取捨。然後試著刷一些 LeetCode medium 和 hard 的題目。

我也只是入門的水平，進階的話大牛都看演算法導論，我沒看過就不推薦了。

計算機網路

- 《圖解 HTTP》

-《計算機網路自頂向下方法》現在還在看。

操作系統、體系結構

-《Operating Systems: Three Easy Pieces》有免費的電子書：Operating Systems: Three Easy Pieces

-《CSAPP》（深入理解計算機系統）及對應的 cmu 的課程：15-213/18-218/15-513: Introduction to Computer Systems及 Lab: CS:APP3e, Bryant and O"Hallaron

十分適合看著 PPT 做做 Lab 自學，但是當然，對非科班的來說有難度。其實朋友不太推薦我讀這本，我基礎太差了，但是它的 PPT 很不錯擔心過了這學期 CMU 的課不知道下次什麼時間開放了，所以硬著頭皮在學。

編程語言

在學習 JavaScript 之後我有在學 C++，其一是因為在讀 CSAPP 的時候，需要了解一門能更接近底層的語言（這本書用的 C ），於是在看《C++ Primer》，然後也是因為 C++ 包含了很多編程範式並且前端在接觸 V8 源碼， node.js 源碼時不可避免的還是要遇到它。

目前仍在補基礎知識，很重要，但也要記得不要陷入還原論的坑出不來了。。

2. 前端基礎

推薦百度前端技術學院很適合入門，前一段時間練了幾道 2017 的任務，也很不錯。自己以前也是刷的 baidu-ife/ife。怎麼刷可以參考上面說的那位答主的回答。
書（按照我的閱讀順序）

-《JavaScript 高級程序設計》

- 《CSS 權威指南》（自己 CSS 還是用到再查比較多）

- 《JavaScript 語言精粹》

- 《CSS 揭秘》

- 《你不知道的JavaSscipt》getify/You-Dont-Know-JS

- 《JavaScript 設計模式與開發實踐》搭配圖說設計模式 - Graphic Design Patterns

認真的每本看下來敲一遍發博客上做總結，面試上的基礎問題基本上不會難倒你了。

然後還要緊跟新的標準規範，了解規範制定的流程（在面試中也被問過），比如張秋怡：如何評價 ECMAScript 2016（ES7）只新增2個特性？

後端也是需要了解的，沒有基礎的從 PHP 或者 Node.js 入門比較容易一點，Node.js 的話，我的順序：

官方文檔
深入淺出 Node.js

3. 工程化相關及框架工具

了解現代前端的一些新技術，每種技術的出現是為了解決什麼問題。比如：

JavaScript 模塊化規範及實現（ES6 module、CommonJS、Node.js 的實現等）
包管理(npm)
模塊化打包工具（webpack）
前端自動化工具（Gulp、Grunt）
前端框架（React、Vue、Angular等）
對 CSS 的拓展、編譯（Less、Sass、PostCSS 等）
對 JavaScript 的拓展、編譯（TypeScript、CoffeeScript、Babel 等）

...

要想知道為什麼有這麼多工具就要了解現代前端大致的發展史，前幾天看了一篇文寫得很通俗易懂，翻譯了一下，在這裡：萌新也能懂的現代 JavaScript 開發。框架可能在面試中被問得多一點，個人認為三大框架選一個或兩個，在項目中有實際使用過，能說清楚框架和相關全家桶的出現是為了解決什麼問題，一些核心技術和基本原理是什麼，（面試也被問過類似這個問題網上都說操作真實 DOM 慢，但測試結果卻比 React 更快，為什麼？），有針對性的看過源碼，了解不同的框架解決的痛點和差異就 OK。

4. 社區貢獻，比如：

持續跟進一個流行的組件庫，比如像 Vue 的組件庫 element，iview 等，提 issue 修 bug 發 pr。
參與某個流行項目的英文翻譯，比如框架或者工具的官網，或者像掘金翻譯計劃之類的。
寫一個組件/工具/插件發布到 npm
寫 hexo 主題（這個我還沒寫過）
妥善經營自己的博客，在一些平台有持續性輸出等等
當然也有很多其他的貢獻方式啦，在任何流行的 repo 里能貢獻代碼都很棒。比如為 Node.js 貢獻你的力量（自己目前太菜了，還做不到這個）

輸出式的學習不但對自己是一種提升，也能有機會遇到更多的大佬一起交流甚至幫你內推什麼的。

說明：以上這些知識我也並沒有學完，但差不多學到一半就應該足夠找到一份實習/工作了。水平有限，目前仍在努力的學習中，希望不止步於前端。有什麼錯誤歡迎來指正呀~（PS：知乎編輯器真的會把人逼瘋的收藏也要點贊喵）

借題發揮，面向即將參加校園招聘的前端新人提供一些建議：

基礎知識儲備
爭取一份實習
不斷完善自身
養成良好的習慣

視頻封面【毒雞湯勵志】日本神反轉熱血廣告，誰說人生是一場馬拉松？_廣告_廣告_bilibili_嗶哩嗶哩bilibili.com視頻

強調一下，我只是分享我自己的路，路不只一條，那下面就開始正題

1.基礎知識儲備

在校招過程中被拒絕的一個常見原因是基礎知識不紮實，讓面試官對你的潛力、學習能力評估得分較低，表現為面試官能接受你有些工具、框架沒用過，開放問題沒有回答上來，但不能接受對一些基本知識的原理不清楚。所以接下來講講基礎知識的範圍和怎麼學才算紮實。

1.1基礎知識範圍

相信很多同學在開始學習前端的時候都會看過類似的前端知識圖譜，包含的內容非常的多，但並不適合作為新人學習的指南使用。

我這裡討論的基礎知識只包涵HTML、CSS、JS、瀏覽器、網路協議。前三者作為前端基礎知識很好理解，那為什麼瀏覽器和網路協議也是基礎知識呢？因為補上這兩點才構成了完整的執行環境（node後面再談），瀏覽器作為一個複雜的整體，我們在基礎階段需要學習的是js引擎和渲染引擎的部份（了解基本概念，後續再深入），而網路協議需要了解http、https、http2.0。

1.2如何學習才算紮實？

一句話總結：帶著發展的眼光看問題，掌握知識的脈絡由點及面。當下我們談論的基本都是html5、css3、es6，那更早的版本里有什麼？未來的版本里又有什麼？為什麼？

了解這些，往小了說你可以知道每個新增api是為了解決什麼問題而誕生的，往大了說就是掌握了發展的趨勢，知道下一代的方向。

舉個例子：為什麼老一輩的前端都知道雅虎軍規，新的一代很少談起？除了雅虎沒落以外，我們應該了解軍規中相當多的優化是用於補http1.0、http1.1和早期瀏覽器的不足，而隨著https逐漸普及、瀏覽器標準化程度越來越高、前端工具的不斷發展，軍規中多條建議已經失效或被工具自動解決了。當你參照這個思路進行學習後，有兩個問題就會自然浮現

https下的優化和http有何不同？

http2.0提供的服務端推送等新功能能解決什麼樣的問題？

學習就是個不斷提出問題找到答案的過程。

理論學習必須和實際應用相結合，當你實際應用過程中遇到了問題，你又是如何解決的呢？依靠搜索引擎找到別人的經驗是我們這個時代的便利，但也養成了大家的一些壞習慣，看似了解了挺多的知識點，但這些點的學習都是來自一些非常具體的實操問題，所以有它的局限性，答案里往往也只有解決辦法而缺少原理分析，點缺少鏈接則成不了面。

面試官追問深一點或者問一些相關的問題就懵了的經驗相信不少人會有同感，怎麼解決呢？首先技術博客、社區的問答依然是很有價值的學習渠道，但我們要在過去的基礎上增加一個新環節：追根究底，把一篇文章中提到的陌生概念都做下一輪的搜索，對文章中附加的擴展閱讀都好好讀一遍，這就是努力的從一個點的學習擴展到相關的多個點，如果你還願意繼續在這個方向上學習，那這時候就適合拿出書本進行更系統的學習，把一組一組的知識點之間的黑洞補齊，這個過程反覆多次後你在個領域裡的知識絕對稱得上紮實。

2.爭取一份實習

實習的工作和工作室的項目、導師給的項目有很大的不同，在於時間和需求實現上沒有那麼多妥協，你需要在限定的時間內解決問題，並周而復始，對自律性不夠的人來說這當中的差距非常的明顯。此外，在正式的工作環境中團隊協作、與人溝通、抗壓的經歷能讓一份平面的簡歷變成一個鮮活的形象。如果有幸加入到一個優秀的團隊，還能得到專業人士的指導，解決更複雜的問題，對自身的成長來說是非常有利的。因此，只要專業對口，我建議無論如何都爭取到企業中實習而不是留在學校，擺正心態爭取在有限的實習時間裡學更多的東西。

3.不斷完善自身

在基礎知識儲備良好的情況下我們再回過頭看看之前的那張圖，為什麼會有很多看似超出前端本職工作的技能？這就和前端在一個項目組裡的角色有關了，在大多數情況下，前端是一個最終集成的角色，產品經理、設計、交互、後端的工作最終都匯總到前端，再由前端提交測試，無論測試還是線上遇到bug第一個還是找前端定位問題，所以為了溝通中贏得信任和精確定位問題（或者準確的甩鍋）前端能多掌握一些相關崗位的技能都是好事。而越來越多的技能之間建立新的聯繫就是創新力的基礎，超綱了就不再展開。

4.養成良好的習慣

習慣的力量是巨大的，而好的習慣能給別人相信你的力量。接下來我談一些對程序員來說的好習慣：

習慣於每日精進，隔一段時間都回過頭看看自己以前的項目，用更短時間是否能完成，完成的方法是否更優雅？當答案為否時，檢討這段時間裡自己的表現。
習慣於著眼未來，無論再忙都減少一些肝遊戲、看視頻的時間來想想未來的挑戰，同樣隔一段時間看看自己所做的事情有沒有是為未來而做的。
習慣於為自己的想法寫代碼，從小事做起，通過技術改善自己的生活，無論是爬蟲、自動化腳本、app、智能家電……都可以，為了解決別人的問題你已經學的夠多了，為自己做點事。
習慣於現在開始，想做的事情不要等這個項目做完再說，記住最初的衝動而不是過程中的困難。

我來單說系統的學習 JavaScript，因為這也是我一直在思考的問題，我認為至少有以下幾個階段：

1. ECMAScript 語法的學習。

推薦閱讀《JavaScript高級程序設計》第三版的第 1 頁至第 192 頁，這部分只涉及 ECMAScript 的語法，目的在於了解 JavaScript 這門語言本身。

推薦至少閱讀兩遍以上，然而即便閱讀了兩遍，依然會對於其中的諸多概念感到困惑，具體包括原型、原型鏈、靜態作用域和動態作用域、執行上下文棧、變數對象、作用域鏈、this、執行上下文、閉包、按值傳遞、apply、call、bind、new、arguments、創建對象、繼承、隱式類型轉換。

如果對這些概念沒有較為深入的了解，請不要接著往下學習，那如何判斷對這些概念的了解是屬於深入的呢？其實也很簡單，你到掘金或者 segmentfault 以這些關鍵詞搜索相關文章，找到高收藏、高點贊量的文章，如果對這些文章講的概念，能清楚的明白，就算是達標了。如果沒有，應該就這些關鍵字搜索相關文章深入學習。

關於這個部分，我想推薦下我的博客中的深入系列 15篇：mqyqingfeng/Blog ，也許會有所幫助。

2. underscore 源碼的閱讀。

我們學習了 JavaScript 語言本身，接下來應該是加強對於 JavaScript 這門語言的使用，我推薦閱讀 underscore 的源碼，相比 jQuery，lodash，更加適合新人閱讀。重點通過使用 JavaScript 完成一些功能點的這個過程熟練使用 JavaScript 的同時，克服對於語言和源碼的恐懼。

此外，之所以不立刻就去學習 DOM、BOM，是因為 DOM 和 BOM 帶來的視覺效果的心理激勵遠比實現一個數組去重效果要多得多，很容易讓人沉溺其中，而忽略了對於語言本身的修鍊。

3. DOM 和 BOM 的學習。

如果再不學習這塊，估計都按耐不住了……

這一部分依然推薦閱讀《JavaScritp高級程序設計》，內容從第 193 頁到第 443 頁，我覺得關於 DOM 的講解，高程和權威指南各有千秋，比如對於 clientTop、offsetTop、scrollTop 等與距離相關的屬性的講解，高程通過示意圖更加形象，在事件方面，權威指南寫了多個事件類型的多個示例代碼，如果讀者能跟著權威指南實現這一個一個的效果，一定收益良多。

在閱讀完 DOM、BOM 的內容後，事實上這一階段才剛剛開始，接下來是學著去寫原生組件。

或者參考一些好的文章，或者參考 Github 上一些高 star 的項目，自己從零實現實現這些效果，這些效果包括但不止：輪播圖、回到頂部、滾動時固定在頂部、懶載入、預載入、下拉刷新、上拉載入、瀑布流實現、移動端手勢庫、拖動……

實現這些效果，會幫助你全方位的了解 DOM 的各類事件。

不知道為什麼，我又想推薦下自己造的一些輪子…… mqyqingfeng/Wheels

在這個階段結束前，希望你已經發布自己造的一些輪子，以及參照輪子的實現過程中至少明白 EventEmitter (自定義事件)以及如何以面向對象的方式組織代碼。

4. ES6 的學習

最新的 ECMAScript 語法是肯定需要學習的，尤其是現在的大環境已經普通使用 ES6。

這個部分，其實能推薦的書籍並不多，有兩本，阮一峰老師的《ES6標準入門》以及 NICHOLAS C. ZAKS 的《深入理解ES6》，這位也是高程的作者。

閱讀完後，希望你能在以後的項目在儘可能滿足業務需求的情況下使用 ES6 的語法書寫代碼。

5. 框架的選擇

現在主流的數據驅動的框架，有 React、Vue、Angular，對這些框架稍稍了解以後，選擇一個最喜歡的框架學習和使用，最好能在業務開發中用到。

此外，不要與人爭論框架好與壞，都是好框架。

學習完基本使用後，希望你能學著深入了解技術棧中的各項技術。以 React 技術棧為例，了解 React 實現的原理，造一個類 React 的簡易框架，閱讀 Redux、React-redux、React-router 等庫的源碼……在這個過程中，明白一個框架的優秀之處。

6. 設計模式

相信這個時候的你，早已經熟練的進行項目開發，在項目開發中，保證自己的代碼優雅，健壯，可維護性高是對自己也是對同事的負責任。推薦閱讀《JavaScript設計模式與開發實踐》，相信你看到這裡的內容，一定有種似曾相識的感覺，在過往的源碼閱讀中，一定或多或少的有所接觸，明白設計模式，讓它更好的指導你進行開發。

7. 演算法

我遠沒有到達這個部分，但我相信演算法在後期一定是非常重要的存在，不清楚，就不推薦了。

8. 更多

一定還有更多的東西，需要學習……

最後，做完這所有的學習至少需要 2 年以上的時間，甚至會更多更多，相信你肯定不會真的花 2 年時間只學習 JavaScript，所以我假設的是題主一定會先找到工作，然後在工作之餘系統的學習 JavaScript，所以對於 jQuery，webpack，移動端開發之類的就不提了，相信你在工作中一定會學習到這些內容。

此外，不得不說，這樣的學習路線，也很適合已經工作一段時間，對於 JavaScript 依然有不安定感的人。

最後再推薦一些個人受益良多的書籍：

1. 《你不知道的 JavaScript》上中兩卷都已有售

2. 《JavaScript 忍者秘籍》

3. 《單頁 Web 應用 JavaScript 從前端到後端》

4. 《JavaScript DOM 編程藝術》第 2 版

對了，MDN 是你重要的夥伴。

還有，如果可以的話，希望你在梳理自己知識的同時，能夠將其分享出來，在與大家交流的過程中一定受益匪淺。

最最後，我也在路上，與君共勉，我的博客：https://github.com/mqyqingfeng/Blog

(感覺我在知乎不是潛水，就是在推薦自己的博客……哈哈)

姑且理解為系統地自學前端，因為計算機的基礎要等到前端學到一定的時候再去學，而不是一開始就學。

前端主要分 HTML，CSS 和 JavaScript，想系統，那麼這三樣都要抓好。樓主能寫靜態頁面，我認為 HTML 暫時可以先放一放，CSS 需要完全掌握 W3Help - 兼容性 - 知識庫裡面的內容，到這一步完全可以應對工作並且會對 CSS 有一個很好的認識。

但是現在直接看這裡面的東西肯定很懵，我在知乎用戶：二八原則中的css？里給出了完整的學習指南，樓主不妨試試看，某一本書看不懂的話，就看前面的那一本，至少第一本 CSS設計指南 (豆瓣) 是不難的。

JavaScript 是重頭戲，這部分的學習時間會拉得比較長，每個人的經驗也不太一樣，我個人認為有兩點需要避免。

不要看《JavaScript DOM 編程藝術》，原因我在知乎用戶：已經學完 HTML/CSS 但是完全看不懂JavaScript 教程怎麼辦？里說了
除非工作中需要用到 3 個框架，否則不要過早學習。

JavaScript 零基礎看 Head First HTML5 Programming（中文版），然後... 沒有然後了，因為的確沒有梯度合適的書，當然找一兩本過渡也是可以的，代碼風格不要太糟糕就好。

到最後還是要看 JavaScript高級程序設計（第3版） (豆瓣)，閱讀指南在這裡，這本書很厚，可能需要反覆看。具體要花多久的時間掌握因人而已，邊看書邊實踐項目，遇到問題來知乎提問，總體來看是可以加快這個過程的。

學到這一步的時候，需要進一步學習什麼心裡也有數了，比如框架、HTTP、Node 等，中間遇到問題就來知乎提問，不要閉門造車。

單說 JavaScript 吧。

最好的 JavaScript 入門介紹文章，我首推重新介紹 JavaScript（JS 教程）。MDN 出品，必定精品。

其次是看書，推薦《JavaScript 高級程序設計》，別被「高級」兩個字嚇到了，其實英文是Professional JavaScript for Web，這個適合入門。然後再看看《JavaScript DOM 編程藝術》。

鄭重聲明：這裡只是一份流水賬，或許對你什麼幫助都沒有。個人觀點，切勿模仿，勿入歧途，概不負責！

《前端從入門到放棄的流水賬》

首先要有心裡準備：

前端變化真的太快了。不管從語言本身來說還是從層出不窮的類庫和框架來說，快的讓人不敢相信，知識保鮮期明顯較短，你需要不斷的學習和實踐應用。

其次是明白前端到底是幹什麼的：

早年只要會把設計稿製作成網頁就是前端，當然自嘲的說法叫切圖仔、美工，JS攻城獅，大多數是業務實現。如今你光說業務實現都不好意思說自己是前端，大多數討論的都是工程化，模塊化，組件化，開發模式...，但是前端工作的重心還是負責實現視覺和交互效果，完成業務邏輯。其核心價值在於不斷追求用戶體驗。

Web前端開發技術主要包括三個要素：HTML、CSS 和 JavaScript

HTML基礎：

是簡單的標記語言，最需要理解是 HTML 語義化，其重要性可以閱讀：http://www.css88.com/archives/1668 。如今還有一個非常重要的是 & 元素中的一些標籤及屬性，可以很有效的增強頁面的可用性。參考：http://www.css88.com/archives/8052

CSS基礎：

主要你需要知道很多基礎概念，比如盒子模型，媒體查詢，響應式布局，塊，內聯，層疊，選擇器優先順序，css reset，等等。css2.1和css3規範中每個屬性的屬性值，默認值都需要了解，包括兼容性。等高級一點你需要了解CSS對性能方面的影響，比如某些屬性在 CSS 動畫或通過JS修改時，會觸發瀏覽器的 layout/reflow、paint、composite 等。

JavaScript基礎：

JavaScript涉及的東西就比較多了，你需要了解 Javascript 的原理機制。變數的作用域，閉包，函數的定義環境與執行環境，this 上下文，原始值和引用值，變數和函數提升(Hoisting) ，原型鏈，繼承，BOM、DOM事件模型，事件委託，單線程和非同步...太多了。當然還有語言本身的對象和方法等等，還有最新的ES6+。

以上是入門基礎，很多人雖然能做項目完成工作，但是對於這些基礎肯能了解不多，這樣往往很容易觸碰到天花板。個人認為作為一個前端開發工程師，這些基礎概念，基本知識都應該很好的掌握。雖然學習概念性東西有點枯燥，但是當你真正了解這些的時候，你會覺得學什麼都得心應手，融匯貫通。前端的大門也隨之為你敞開。

框架：

如今做項目基本都用前端框架和類庫，炙手可熱的 React、Vue，Loadsh等都應該學一點。根據項目需要深入學習。

前端工具：

前端工具也是很重要的一塊，項目腳手架，NPM包管理，Webpack打包，Babel轉譯器，PostCSS及相關的插件等等都應該了解。當然還有調試工具 http://www.css88.com/doc/chrome-devtools/ ，還有七七八八的API管理，文檔工具等等。

瀏覽器原理：

了解渲染樹構建、布局及繪製相關原理。

前端性能：

了解影響前端性能的關鍵因素，往往不在於的代碼。當然還是要了解代碼的性能。

圖書和社區：

真正認真的看完看懂本好書，從面上學習前端相關知識。一些博客文章是從點上學習前端，很難看到整個知識體系的面。認真閱讀相關文檔，80%的問題都能在文檔中找到。

作為提升建議了解一下計算機原理,網路協議,後端知識。

最後給一句忠告：一入前端深似海！

我只想說，真的不要指望幾個月就能學會，除非有經驗的大佬指導，不然效率會很低，不要問我為什麼。

只想說，說簡單的，不是已經掌握的，就是完全沒入門的。

系統的學習最靠譜的還是啃書啊

CSS的學習可以從《CSS權威指南》開始，通讀後輔以大量靜態頁面訓練，做到手寫常用CSS屬性，熟練使用常用布局。

繼而可以去看下CSS2.1標準，尤其是『8 Box Model』、『9 VFM』、『10 VFM detail』3個章節，理解下margin collapsing、BFC、IFC、層疊上下文等概念，對實際使用中的遇到的常見問題以及解決方法加以標準上的印證。

譬如印證下以下問題：

IFC中行內元素間空白字元導致行內元素間間隙，font-size:0或者壓縮代碼解決；

IFC行內元素間默認baseline對齊引起的行框高度計算問題，display: block;或者vertical-align:top解決；

BFC閉合浮動以及解決margin摺疊計算；

浮動擠掉行框寬度造成文字環繞以及實現多列適應布局；

層疊上下文的z-index計算規則；

等等等等。

然後是新式布局Flexbox、Grid，Flexbox移動端可以完全使用了，Grid還要給終端實現和硬體升級時間。

CSS動畫的可以配合《WebKit技術內幕》一起學習，《內幕》書中有詳細講解渲染的主要步驟layout/reflow、paint、composite，對CSS具體屬性的動畫會影響不同階段，譬如元素幾何位置相關的屬性margin/padding/width/height/border-width等影響layout/reflow階段。讀完會對渲染以及動畫性能優化有深入理解。

《CSS秘密花園》也可以讀下，學習下CSS的奇技淫巧。

JS相關的推薦三本書：《JavaScript高級程序設計》、《JavaScript權威指南》、《ES6標準入門》

深入理解下執行上下文、作用域、原型鏈、繼承、變數對象、閉包、this、隱/顯式轉換、堆棧變數訪問、BOM、DOM事件模型/事件委託、文檔坐標系統page/client/offset/scroll、Ajax及跨域等概念。

以及ES6的一些新特性如Promise、Generator、async/await、Iterator、塊級作用域、解構賦值、默認參數、箭頭函數等等等等。

基礎夯實可以去看下源碼，如jquery的DOM操作封裝、Ajax封裝、Zepto的touch模塊以及hammerjs移動端事件封裝、Underscore高級函數（偏函數、柯里化、記憶函數、節流、防抖等）實現等等。

搞定之後就去項目中實操吧，MVC velocity同步渲染、前端靜態化、hybrid、js-native等開發模式都嘗試去吧，ng/vue/react擼一個去玩吧。

Web開發必然少不了HTTP協議，推薦《HTTP權威指南》、《圖解HTTP》。

詳細理解下請求報文/響應報文、請求方法（get/post/options/put/delete等）、常用首部、狀態碼、MIME類型、cookie secure/httponly、tcp握手及慢啟動、並行請求持久連接以及管道化優化、跨域options嗅探、強緩存以及協商緩存相關欄位等等概念。

HTTPS SSL層利用對稱非對稱加密結合實現數據加密傳輸。

HTTP2.0的單一TCP鏈接、二進位幀以及首部壓縮、多路復用、服務端推送等優化。

設計模式相關的在於代碼解耦，提高可維護性、可擴展性等，前端常用的不多，常用的如觀察者、工廠、單例等等。

個人感覺前端還是蠻有意思的技術工種，很適合妹子啊。

最後，約么？

幫我看孩兒, 我來教你, 從入門到精通 =v=

自學一門技術之前，最好先了解了解這門技術的前景和發展，是否真的是自己想要的。

最關鍵是搞清楚這門技術或該領域涉及的廣度和深度，以避免眼光看得不夠遠，耽誤了自己。

換句話說，會寫一點靜態頁面就想學前端，相當於學會了四則運算就想當數學家一樣。

忠言逆耳，只願題主能聽得進去。

你可以諮詢我啊，不過，我是付費諮詢的，（50元一個半小時，主要提供前端宏觀諮詢），首先，你要問自己學前端幹什麼？是玩一玩還是想靠它謀生，如果是玩一玩，那還諮詢什麼，不用諮詢。如果是工作，那就要思考了，你只能靠你自己，別人說的再多都不如你自己實踐一遍，還有你連前端門都沒入，何來系統學習一說，不可能系統的，（舉個例子，我說我想要造火箭，問如何系統學習造火箭，這難道不搞笑嘛，我應該先把火箭相關的知識搞透摸熟，最後才可能系統，轉到前端，你應該把html，css，js前端相關技能熟悉，最後才能系統思考，系統學習，不知道我的意思你明白沒有？否則，不是曹沖稱象，而是盲人摸象），只有你學的時間足夠長，才有系統一說。接下來你應該學習js或者jQuery，做一些小效果，感受一下前端是怎麼回事兒。我的微信 13145870132，你要是願意諮詢就諮詢，還有我不建議你學前端，因為前端現在人太多了，多到天上掉下一塊石頭就能砸死一個前端！

前端技術表面上琳琅滿目實際上精髓的部分也就那麼多，把它們學會了也就系統了，多加練習，事半功倍。假以時日，必能能成為前端的佼佼者。

前端只需要會 html,css,javascript 就可以找工作了，你只需要學它們的精髓部分，其它的部分當你遇到的時候稍作搜索就能學會了

學習html+css的時候能夠回答以下問題

如何橫著布局

如何豎著布局

如何定位

如何將以上結合來完成各種各樣的布局

學習javascript

學會常用數據類型（布爾，數組，數字，字元串，對象），分支控制，循環、遞歸，函數 js中很多東西都是通過函數進行抽象封裝的重點學習下

去coderwars中刷題來鞏固基礎

對dom的增刪改查

以上都學個差不多了就可以做一些基本的工作了，剩下的就是對工作領域內的知識學習和通用知識學習，工作領域內的工作中學習，通用的主要包括以下幾個

http協議的了解

編程思想: 這個需要終身練習。學習別的語言思維才能純潔（因為Js比較亂，人也亂，資料也亂，流派也亂），推薦：scheme js的設計內涵就是scheme, haskell 純粹的函數式思維，java 面向對象

數據結構：重點學習線，樹部分的數據結構演算法部分無需花太多精力，我們的程序精華都是通過數據來表現的，如何組織數據決定了整個程序的好快

26天學通前端開發

看看這個，可能對你有幫助。

其實多少天能學會因人而異，如果只會寫一點靜態頁面，那26天是絕對不夠掌握前端的，但是可以參照我學習路徑一點點學習。

JavaScript書籍測評

學習前端，JavaScript是重中之重，這裡有一些推薦書籍，可以參考著看看。

自學的話，除了看書和來參加我的培訓班，其它任何辦法都別想達到系統，尤其是看網上亂七八糟的文章和收藏鏈接。。。

甚至我有時覺得，前端的東西，你不看上兩三本經典書目，一樣達不到系統

至於網上那些學習路線，等你發現被坑了的時候已經晚了

手機無法寫的更詳細，但修真院在前端教學上已經非常系統了。

整體的學習分成三大階段，第一階段叫做技能學習，包括css的15個任務和的15個任務。

第二階段叫團隊訓練，主要通過組隊完成復盤項目，來熟悉項目開發流程，規範，約束，交流，性能，交付標準，發布流程。

第三階段叫風險控制，通過真實項目，強化需求理解力，介面定義，需求變更風險，以及如何在約定的時間裡完成項目。

這三個階段是計算機學習的通用階段，所以也是前端學習必經之路。

那麼單純多前端的學習包括哪些階段呢？

css分成三大階段，對應凝氣期的前期，中期和後期。

前期是html和CSS的基礎知識，主要是布局，屬性，清除浮動，自適應等。

中期是響應式，複雜的頁面，簡單的css動畫，性能優化等。

後期是bootstrap，less或sass等，重點是理解開源框架的設計理念，使用場景。

js的部分同樣是分成三大段。

第一階段是js基本語法，dom交互，頁面跳轉，表單驗證等純前端內容，包括jquery。

第二階段是和後端的介面交互，包含http，json，介面定義，ajax，跨域等。

第三階段是spa框架體系，推薦angularjs1入手，vue，react等都不成問題。

這就是技能學習的系統學習。

以上僅僅能獨立

首先，認清一點，前端是不難的。

樓主會編寫靜態頁面，那麼默認樓主的HTML，CSS基礎沒有問題，

想要往前進一步，就要學習賦予頁面邏輯和靈魂的JavaScript了，

編程語言里，相對最簡單的就是JS了，

如果順利的話，你完全可以花費四個月的功夫，拿下這門語言，並可以熟練的跟HTML和CSS配合寫出一些不錯的東西了。

這裡推薦犀牛書，也就是(javascript權威指南)，裡面的錯誤是有，但是對於小白很友好，認真的看，不難看懂裡面的東西，非常推薦新入門JS的沒事翻一翻。

然後就是慕課網，十年的慕課，做的已經很成熟了，裡面的前端路徑感覺還是很系統的，可以花點小錢，鞏固一下自己的知識。

到這裡，已經是個偽前端了，就是基礎打牢了。

之後可以進入第二階段

前端有非常非常多好用的框架，不掌握這些，是沒有辦法快速的進行開發的，所以你需要多去看看最新的框架，熟悉，要做到需要哪個框架都可以很快的上手拿過來用。

前後台對接，一般的後台會幫你調用介面，但是保不齊你會遇到什麼不可預知的狀況，所以理所應當的你需要知道一點後台和資料庫的知識，資料庫起碼的增刪改查要知道。

一般的前端需要實現設計師設計的效果，如果不是在大廠工作，很有可能你們的設計師不是很成熟導致提供給你的設計圖，交互邏輯或者切片文件很不規範，有很多時候你需要自己處理設計源文件，所以基礎的PS/Sketch的軟體操作知識，要知道一點。

第三階段

學學數據結構吧，了解一下演算法的知識。這個階段基本做出來的東西功能效果都能實現了，所以接下來你需要知道如何去優化，提高運行能力，減少伺服器壓力，嘗試著搭建和完善一個屬於自己的前端庫，想用什麼直接拿自己寫的去用，試試造個輪子。

到這個階段你需要進入開源社區多和友人們愉快的玩耍，上上github，看看Star多的，最近很火的其他人分享出來的東西，學學別人的思想，至此，在我的理解上，就是一個合格的前端啦。

前端不難，認真點的投入時間，你就能學會它！

希望對你有幫助

建議問自學的最好帶著以下幾點：

- 願意拿出的時間有多少

- 全職 or 邊工作/上學

- 是否有資金參與培訓班

- 想學到那種程度（能找到工作/找到一份不錯的工作/躋身一二三線）

只說「我想自學xxx怎麼辦」。自身情況描述的如此敷衍，還指望別人用心的長篇大論告訴你？

別學了，沒前途。

你還這麼小，不如學點有前途的

自學這個話題我還是可以答一下。

大學是電子商務。去年年底學校安排實習，我沒有參加，留校。一邊做臨時的工作，一遍自學前端。六月份拿畢業證，六月底出來找工作。簡歷投了不少，真正面試的只有幾家，最後七月中旬入職，純技術公司。

會寫靜態頁面已經不錯了。我主要推薦，還是看書。可以搭配看視頻或者其他教程，但主要一定要看書。因為我其實都是看視頻和教程過來的，實際看教程或者視頻其實就是在刷api，一天看幾個小時，再寫會兒代碼。但這樣收益很低，現在回頭看，對我幫助最大的，一個是《Javascript dom編程藝術》當然，我沒有全書看完，只看了前半部分，後面跳躍看的。但我基本是通過它了解js可以做什麼，是什麼。另一個是《精通css》，對我頁面布局的幫助很大，這兩本書都很簡單，入門級別都可以看。

另外還推薦《Javascript 高級程序設計》，雖然我也沒看完，只看了一部分。但js語言的很多東西都在這書裡面，你網上看的書裡面肯定也有。所以這本書多翻翻沒壞處。前期書的話就推薦這三本，HTML和CSS以及JS都了解會用了之後，做做Demo，寫個個人博客之類的。在自己做demo的時候就可以用用Jquery，但一定還是主要學習JS。

學習要點的話，HTML做到基本標籤都了解，知道有這麼個標籤，記不住沒關係。CSS掌握常用基本屬性，了解盒模型，定位。能夠通過這些實現常用布局。CSS3動畫效果如果覺得自己學的好，可以去玩玩，不然可以先放放。等工作用到了再看也來得及。

Javascript要求就比較高了~

基本概念：語法、變數、語句、函數、操作符、基本類型、作用域
常用操作：事件、this、、BOM、DOM、AJAX
高階一點的：原型、閉包、遞歸、垃圾回收、設計模式…

能掌握上面前兩條知識，找份工作就沒什麼問題了。相信你在工作中會成長的很快，到時候你也不需要再來知乎提問，因為你已經知道怎麼學習了。