完整版的知識結構圖大概

這么長
總之就是挺長的，但是放上來整體你們肯定看不清，今兒誠筑說小編就給你們截圖分著說web前端開發除了htm、css和js之外，還有哪些東西需要你一步一步去掌握。
1.**層

這個圖要從下往上看，為何？——因為下面是上面的基礎；
首先，我們需要一定的理論知識，你都需要一定的理論知識，每一種程序開發，都避免不了。第二，有了這些理論知識我們就可以編碼了，但是，沒有人能抵擋住第三方框架和類庫的誘惑，例如jquery；第三，有了這些理論知識和協助我們的類庫框架，我們就可真正的編碼了。大家可能以為編碼開發不就是寫代碼嗎，還有啥？——這里面道道多著呢；**，開發程序的目的，最終是為了能**、穩定的運行在相應的環境中，這其中又有哪些事情需要我們去做？
2.第二層

他把理論分為了軟知識和硬知識，
軟：各個程序開發中都用到的，算是基本功、內功，例如數據結構、算法、設計模式、面向對象等等
硬：直接用于本程序開發的，我們web前端開發所需要的硬知識其實都包含在三個標準里面：http標準、W3C標準和ECMA標準；


3.第三層（忽然發現用這個分層有點弱智）

**是框架bootstrap不用再過多解釋了吧，從github上的排名也能看出道道來。甚至連我們公司的UI設計師，都從bootstrap上截圖作為素材。fontAwesome是全****大的圖標系統。相比于css制作圖標來說，這個要好很多倍，不管是開發、效率還是維護上。icomoon.io能讓我自定義選擇自己的圖標文件。requirejs和seajs這種模塊定義系統，也一定是你系統中不可或缺的。
4.（算了不寫第四層了）

編碼開發
5.運行開發環境

瀏覽器環境下，最重要的兩點是：web安全和性能優化。
差不多就這個樣子了，所以說其實它很長啊，需要學習的東西還是很多，任重道遠。（總覽）


資訊來源：天津Web前端培訓，前端體系揭秘