梳理前端入門知識腦圖

前端是一個看似入門門檻不高，但要學好很難的領域。

前端的知識體系龐雜又鬆散，技術演進快，如果摸不清脈絡的話很容易陷入盲人摸象的困境甚至跑偏。

其實只要掌握了正確的方法，學習前端和學好前端就只是個時間問題，希望下面的回答對題主有所幫助。

1.梳理清楚知識體系框架

學習前端，不管是入門還是進階，一定都要有知識體系建設的想法。

就算是剛開始學，也一定要有這樣的意識。

前面說過，因為前端知識點多而分散，所以如果不能構建起自己對於前端的知識體系框架的認識，很容易就會不知所措，沒了方向。

現在網上關於前端知識體系的腦圖很多，但是往往過於複雜，不適合初學者。

作為一個初學者，每個人都應該自己做一份自己的前端知識體系腦圖，先有一個最基本的框架，然後在學習的過程中慢慢完善。

這樣通過和別人腦圖的對比，你也很容易知道還有那方面的知識是需要補充完善的。

這裡我給出一個簡單的模版，其實作為一個剛入門的前端新人，有這樣的大框架已經完全夠用了，不用追求大而全，學習的畏懼心理也會小很多，隨著你學習的深入，這個腦圖也會慢慢豐滿起來。

這樣看起來是不是清爽很多這樣看起來是不是清爽很多？

這樣看起來是不是清爽很多？

加群623966806免費領取前端學習資料，群里還有大神解答問題和交流

.準備和基礎的學習

要開始的時候做一些基礎工作還是必要的，比如選一個自己喜歡的編輯器啊，比如科學上網啊，比如怎麼高效的使用搜尋引擎啊，比如git啊，比markdon語法啊，這些東西都可以大幅度提升你的學習效率或編程的幸福感，所謂磨刀不誤砍柴功，你也可以把這些東西記在你的腦圖里。

接下來你就可以開始學習基礎知識啦。

HTML，CSS，Javascript這三樣真的很重要，真的很重要，真的很重要，剛開始的時候你壓根不用去管那些花里胡哨的框架，一定要把基礎打好。

框架再怎麼更新疊代，最基礎的東西還是這三樣，只要你能掌握好基礎，就等於拿到了打開前端世界的鑰匙。

不管你的前端學習到了哪個階段，對基礎知識的好奇心一定不能斷，這裡面有太多細碎的知識點，每一份spec都又臭又長，就算你已經工作兩三年，這裡面肯定都還有你不知道的東西。

好了，到這個時候你的知識體系腦圖差不多應該長成這個樣子了：

進行到這裡的時候其實又有一個坑，很多人到這兒的時候就一頭扎進去去看裡面的具體內容了，比如去看各種標籤的屬性用法啊，去看選擇器啊，這就是比較典型的沒重視知識體系框架建設導致的盲目做法。

推薦的做法是什麼樣的呢？其實很簡單，就是再去細化這些知識點的層級，理清各個知識點的脈絡，從宏觀上先對這些知識的體系和框架有一個比較清楚的認識。

加群623966806免費領取前端學習資料，群里還有大神解答問題和交流

推薦的做法是什麼樣的呢？其實很簡單，就是再去細化這些知識點的層級，理清各個知識點的脈絡，從宏觀上先對這些知識的體系和框架有一個比較清楚的認識。

就拿HTML來簡單的舉例一下：

這樣把知識點的層級關係抽象清楚，對每個小的知識點合理分類，才能讓前端知識里那些龐雜的知識點形成體系。

現在你就可以去往裡面補充些細節的東西了，你可以在腦圖上用不同的顏色標出不同的優先級，以便劃分學習的優先級並方便以後review。

現在你就可以去往裡面補充些細節的東西了，你可以在腦圖上用不同的顏色標出不同的優先級，以便劃分學習的優先級並方便以後review。

加群623966806免費領取前端學習資料，群里還有大神解答問題和交流

3.把學的東西用起來

每次學過一些小的知識點，都要想辦法把它們用起來，想清楚這些知識點的有哪些使用的場景，等到基礎知識學到一定程度了也可以反過來，先預先想好場景和要實現的功能，再去想在這些場景下面該用哪些知識，如果遇到了解決不了的問題和沒有學過的知識，去你的腦圖里把它的位置搞清楚，寫出來。

列入後續的學習計劃。

一定不要一直看，一直學，卻不在具體的場景里去用，你應該養成拿自己學到的東西做些東西解決些問題的習慣。

不斷的做出東西，解決問題，不斷給自己正向的激勵，不斷的完善自己的知識體系，一定要讓自己有成就感。