web前端入門者的知識體系包括哪些東西呢？

入門者的知識體系包括哪些東西呢，下面是個人我的見解，按照這個流程走不必定馬上成爲大牛，至少能讓入門者抓住重點一步步走下去：

1. 基本工具使用

Git/GitHub的熟練使用，編輯器(sublime、webstrom、atom、vscode)的體驗區分與使用，chrome開發調試工具的使用，Photoshop的簡單使用，FQ軟件、筆記工具、流程圖工具、思惟導圖工具的瞭解使用

1. 靜態頁面功底

doctype、亂碼、meta、字體原理、字體圖標、常見標籤的用法、HTML書寫規範、CSS選擇器使用及權重、CSS常見樣式的寫法、雪碧圖、inline-block特性與使用、line-height與vertical-align用法、盒模型種類、浮動的特性與應用(兩欄三欄佈局)、清除浮動clearfix、BFC、定位的特性與使用場景、z-index、浮動與負邊距的應用(聖盃佈局雙飛翼佈局)、常見的CSS Hack、邊框＋僞元素＋定位的應用(作三角、tooltip、繪製簡單的效果)、CSS編碼規範等。
掌握這些功底後力量上你能夠用合理規範的方式寫出任何你看的到的靜態頁面，你有底氣把本身寫的HTML CSS代碼拿給任何一個大牛來評判，給你一個頁面你會無視效果直接審查元素指出源碼中的不足並提出改進意見。

1. JS與JQuery功底

頁面渲染基本原理、白屏與FOUC、數據類型與類型轉換、引用類型與基礎類型的區別、深淺拷貝、聲明前置、函數聲明與函數表達式、字符串的各類操做、正則的各類操做、貪婪模式與非貪婪模式、日期數學函數各類操做、做用域與做用域鏈的概念與應用、閉包的概念與應用、IIFE的封裝性、setTimeout相關概念、事件冒泡捕獲機制、綁定事件的兼容性封裝、事件代理、ajax的原理與封裝、跨域的幾種方式與實現、jsonp的封裝、原生js實現常見效果的實現（懶加載、點擊加載、回到頂部、導航條、Dialog、Tab等）、jquery的語法與使用、jquery實現各類常見效果（懶加載、點擊加載、回到頂部、導航條、Modal模態框、Tab切換、各類輪播、瀑布流佈局、木桶佈局、懶加載＋ajax＋瀑布流的使用等）
作了這些後，你會對代碼的規範性和美感有必定的認識，會以寫出精簡、好看、複用性高的代碼爲目標而不是以實現效果爲目標。分析、拆解未知問題的能力有所提升，習慣於使用google搜索文檔並掌握一些搜索技巧、習慣看英文文檔、熟練使用調試工具定位錯誤解決問題，嘗試總結紀錄甚至分享心得。
到這裏，你的能力甚至能力超過一些所謂的一兩年甚至兩三年工做經驗的前端開發者。在交流羣裏慢慢的以準確、睿智的視角幫初學者解決問題。你開始發現代碼無論怎麼優化老是沒那麼滿意，你會爲別人更優雅的解決方式歎服抱怨本身太笨，你在空餘時間默默實現你在好久之前羨慕的效果，默默的開始美化本身的博客記錄心得，你開始以爲本身玩High了。對於找工做反而不急了。

1. JS進階

OOP的概念、構造函數建立對象的方式、原型與原型鏈（會畫圖）、繼承的寫法、功能模塊化的寫法、常見的設計模式（工廠、單例、發佈訂閱）、面向對象的應用（輪播組件、Tab組件、曝光組件、日曆組件、Dialog組件等）、JQurey插件的封裝、JQuery核心源碼解讀、HTTP&webserver相關知識點、CMD&AMD規範、模塊化寫法 (Requirejs或者webpack使用)、npm的使用、工程化概念與應用(gulp)、HTML5新功能、純CSS作一些有意思的特效和動畫(如按鈕、漸變特效、loading、CSS3輪播、3D輪播等)、響應式的應用(寫一個bootstrap的柵格系統)、CSS預處理等
到這裏以後，基本功已經很牢靠了，能夠去看node教程、去看ES6語法、去嘗試用express搭建個博客、去跑跑React Angular裏的Demo，在一番體驗後你清楚的知道它們的應用場景與利弊之道哪些須要深刻哪些須要瞭解。
在學的同時在去多關注些大牛博客前端社區（瞭解跟進新技術），須要找工做的能夠多作作筆試面試題（查缺補漏），若是是應屆生須要抽空補一補數據結構算法。網絡上東西太多太雜，在本身有必定判斷力以後在去吸取些精華，不然很容易陷入迷茫不知道如何入手。那些所謂的讓人眼花繚亂的新技術在基礎紮實的前提下很容易快速介入，不要捨本逐末，丟了西瓜撿芝麻。
關於看書
在無人指導的狀況下，看書是一種學習途徑。好比《JS高級程序設計》《權威指南》是前端開發者必看書籍。但對於入門的同窗來講看着費勁很難看懂、並且太枯燥很難堅持下去。個人建議是好的書籍是學習的補充，在有必定積累後能夠把書做爲查漏補缺的工具，平時偶爾翻一翻，對知識點不是很清楚能夠針對性翻一翻。書是買來看的，不是找心理安慰的，一本一本買，一本一本看。對不喜歡看書的同窗，也不要盲目跟風強迫本身作不喜歡的事失去了對前端的樂趣
關於入門學習資料
學習資料和看書同樣，不要上去就收集一大堆本身永遠都不會在看第二眼的資料（雖然裏面有不少精華）。 HTML CSS能夠從MDN看起CSS | MDN  。 在學習的時候 內心必定有個知識體系脈絡圖，參考我上面寫的知識體系。一個知識點一個知識點的去學習去查找，若是這個資料沒有在去google下一個資料，這個時候不少大牛的博客不少推薦資料才真的對你有價值，不至於本身在一些可有可無的地方浪費大量時間和精力而不自知。
 推薦下我本身建立的web前端資料分享羣606721798，這是web前端學習交流的地方，無論你是小白仍是大牛，小編都歡迎，不按期分享乾貨，包括我整理的一份適合零基礎學習web前端的資料和入門教程。 

轉載於猿2048:➼《web前端入門者的知識體系包括哪些東西呢？》