只要接觸過前端，都會指導web前端的知識主要由三部分組成：分別為靜態html，樣式css，動態javascript（簡稱js）這三大部分組成。其三部分組成的一個體系的複雜程度不亞於其他一門技術的複雜程度。當然對於跟我一樣厲害的那些web前端來說那就是小菜一碟，但是很多人都只學了表面，基礎部分，很多重要的知識，深入部分都是被忽視了！其實這也就導致了部分前端開發工作者學了前端，但是卻找不到工作，有工作但是工資少的現象！
現在為大家一一解刨Web前端知識體系結構，在阿里從事了6年的全棧，也是從前端慢慢成長過來的，也想跟很多小夥伴說一句：付出與收穫是成正比的！
TextOne：首先最最最基礎的部分html部分
1、常見的BOM對象
BOM（Browser Object Mode）瀏覽器對象模型，是Javascript的重要組成部分。它提供了一系列對象用於與瀏覽器窗口進行交互，這些對象通常統稱為BOM。
window窗口對象。它表示整個瀏覽器窗口，主要用來操作瀏覽器窗口。同時， window對象還是 ECMAScript 中的 Global 對象，因而所有全局變量和函數都是它的屬性，且所有原生的構造函數及其他函數也都存在於它的命名空間下。
document 即文檔對象，也是window對象的一個屬性。整個HTML代碼解析完以後，會生成一個由不同節點組成的樹形結構，俗稱DOM樹，document
用於描述DOM樹的狀態和屬性，並提供了很多操作DOM的API。
history 主要針對瀏覽器的歷史，頁面前進>>入棧，頁面返回<<出棧。
location 對象用於獲得當前頁面的地址url並把瀏覽器重定向到新的頁面。
navigator提供了與瀏覽器有關的信息。userAgent是最常用的屬性，用來完成瀏覽器判斷。
screen 主要用來獲取用戶的螢幕信息，比如螢幕的寬高，可用寬高等。
2、DOM 文檔對象模型
Document Object Model，簡稱DOM，是w3c組織推薦的處理可擴展置標語言的標準編程接口。它是一種與平台和語言無關的應用程式接口(API),它可以動態地訪問程序和腳本,更新其內容、結構和www文檔的風格(目前,HTML和XML文檔是通過說明部分定義的)。文檔可以進一步被處理，處理的結果可以加入到當前的頁面。DOM是一種基於樹的API文檔，它要求在處理過程中整個文檔都表示在存儲器中。另外一種簡單的API是基於事件的SAX，它可以用於處理很大的XML文檔，由於大，所以不適合全部放在存儲器中處理。
3、事件機制
事件是用戶與頁面交互的基礎，到目前為止，DOM事件從PC端的 滑鼠事件(mouse) 發展到了 移動端的 觸摸事件(touch) 和手勢事件(guesture)，touch事件描述了手指在螢幕操作的每一個細節，guesture 則是描述多手指操作時更為複雜的情況。
DOM事件流（event flow ）存在三個階段：事件捕獲階段、處於目標階段、事件冒泡階段。
事件捕獲：通俗的理解就是，當滑鼠點擊或者觸發dom事件時，瀏覽器會從根節點開始由外到內進行事件傳播，即點擊了子元素，如果父元素通過事件捕獲方式註冊了對應的事件的話，會先觸發父元素綁定的事件。
事件處理 ：當到達目標元素之後，執行目標元素綁定的處理函數。如果沒有綁定監聽函數，則不做任何處理。
事件冒泡：與事件捕獲恰恰相反，事件冒泡順序是由內到外進行事件傳播，直到根節點。
dom標準事件流的觸發的先後順序為：先捕獲再冒泡，即當觸發dom事件時，會先進行事件捕獲，捕獲到事件源之後通過事件傳播進行事件冒泡。不同的瀏覽器對此有著不同的實現，IE10及以下不支持捕獲型事件，所以就少了一個事件捕獲階段，IE11、Chrome 、Firefox、Safari等瀏覽器則同時存在。
4、HTML渲染過程
瀏覽器加載 html 文件以後，渲染引擎會從上往下，一步步來解析HTML標籤，大致過程如下：
5、本地存儲
通過本地存儲（Local Storage），web 應用程式能夠在用戶瀏覽器中對數據進行本地的存儲。
在 HTML5 之前，應用程式數據只能存儲在 cookie 中，包括每個伺服器請求。本地存儲則更安全，並且可在不影響網站性能的前提下將大量數據存儲於本地。
與 cookie 不同，存儲限制要大得多（至少5MB），並且信息不會被傳輸到伺服器。
6、瀏覽器緩存機制
瀏覽器緩存機制是指通過 HTTP 協議頭裡的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)等欄位來控制文件緩存的機制。
另外有兩種特殊的情況：
手動刷新頁面(F5)，瀏覽器會直接認為緩存已經過期(可能緩存還沒有過期)，在請求中加上欄位：Cache-Control:max-age=0，發包向伺服器查詢是否有文件是否有更新。
強制刷新頁面(Ctrl+F5)，瀏覽器會直接忽略本地的緩存(有緩存也會認為本地沒有緩存)，在請求中加上欄位：Cache-Control:no-cache
(或 Pragma:no-cache)，發包向服務重新拉取文件。
7、History
用戶訪問網頁的歷史記錄通常會被保存在一個類似於棧的對象中，即history對象，點擊返回就出棧，跳下一頁就入棧。 它提供了以下方法來操作頁面的前進和後退：
window.history.back( ) 返回到上一個頁面
window.history.forward( ) 進入到下一個頁面
window.history.go( [delta] ) 跳轉到指定頁面
8、HTML5離線緩存
HTML5離線緩存又叫Application
Cache，是從瀏覽器的緩存中分出來的一塊緩存區，如果要在這個緩存中保存數據，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
9、Web語義化 和 SEO
Web語義化是指使用語義恰當的標籤，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜尋引擎都容易理解。
SEO是指在了解搜尋引擎自然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜尋引擎中關鍵詞的自然排名，獲得更多的展現量，吸引更多目標客戶點擊訪問網站，從而達到網際網路營銷及品牌建設的目標。
搜尋引擎通過爬蟲技術獲取的頁面就是由一堆 html 標籤組成的代碼，人可以通過可視化的方式來判斷頁面上哪些內容是重點，而機器做不到。
但搜尋引擎會根據標籤的含義來判斷內容的權重，因此，在合適的位置使用恰當的標籤，使整個頁面的語義明確，結構清晰，搜尋引擎才能正確識別頁面中的重要內容，並予以較高的權值。比如h1~h6這幾個標籤在SEO中的權值非常高，用它們作頁面的標題就是一個簡單的SEO優化。
TextTwo：就是我們的css樣式部分了
1、CSS選擇器
CSS選擇器即通過某種規則來匹配相應的標籤，並為其設置CSS樣式，常用的有類選擇器、標籤選擇器、ID選擇器、後代選擇器、群組選擇器、偽類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。
2、CSS Reset
HTML
標籤在不設置任何樣式的情況下，也會有一個默認的CSS樣式，而不同內核瀏覽器對於這個默認值的設置則不盡相同，這樣可能會導致同一套代碼在不同瀏覽器上的顯示效果不一致，而出現兼容性問題。因此，在初始化時，需要對常用標籤的樣式進行初始化，使其默認樣式統一，這就是CSS
Reset ，即CSS樣式重置，比如：*{margin:0,padding:0} 就是最簡單CSS Reset， 關於CSS重置請參考：
Neat.css
3、盒子布局
盒子模型是CSS比較重要的一個概念，也是CSS 布局的基石。
常見的盒子模型有塊級盒子(block)和行內盒子(inline-block)，與盒子相關的幾個屬性有：margin、border、padding和content
等，這些屬性的作用是設置盒子與盒子之間的關係以及盒子與內容之間的關係。其中，只有普通文檔流中塊級盒子的垂直外邊距才會發生合併，而行內盒子、浮動盒子或絕對定位之間的外邊距不會合併。另外，box-sizing
屬性的設置會影響盒子width和height的計算。
4、浮動布局
設置元素的 float 屬性值為 left 或
right，就能使該元素脫離普通文檔流，向左或向右浮動。一般在做宮格布局時會用到，如果子元素全部設置為浮動，則父元素是塌陷的，這時就需要清除浮動，清除浮動的方法也很多，常用的方法是在元素末尾加空元素設置clear:both，
5、定位布局
設置元素的position屬性值為 relative/absolute/fixed，就可以使該元素脫離文檔流，並以某種參照坐標進行偏移。其中，releave
是相對定位，它以自己原來的位置進行偏移，偏移後，原來的空間不會被其他元素占用；absolute
是絕對定位，它以離自己最近的定位父容器作為參照進行偏移；為了對某個元素進行定位，常用的方式就是設置父容器的poistion:relative，因為相對定位元素在不設置
top 和 left 值時，不會對元素位置產生影響；fixed
6、彈性布局
彈性布局即Flex布局，定義了flex的容器一個可伸縮容器，首先容器本身會根據容器中的元素動態設置自身大小；然後當Flex容器被應用一個大小時（width和height），將會自動調整容器中的元素適應新大小。Flex容器也可以設置伸縮比例和固定寬度，還可以設置容器中元素的排列方向（橫向和縱向）和是否支持元素的自動換行。有了這個神器，做頁面布局的可以方便很多了。注意，設為Flex布局以後，子元素的float、clear和vertical-align
屬性將失效。
7、CSS3 動畫
CSS3中規範引入了兩種動畫，分別是 transition 和 animation，transition
可以讓元素的CSS屬性值的變化在一段時間內平滑的過渡，形成動畫效果，為了使元素的變換更加豐富多彩，CSS3還引入了transfrom
屬性，它可以通過對元素進行 平移(translate)、旋轉(rotate)、放大縮小(scale)、傾斜(skew)
等操作，來實現2D和3D變換效果。transiton 還有一個結束事件
transitionEnd，該事件是在CSS完成過渡後觸發，如果過渡在完成之前被移除，則不會觸發transitionEnd 。
animation 需要設置一個@keyframes，來定義元素以哪種形式進行變換，
然後再通過動畫函數讓這種變換平滑的進行，從而達到動畫效果，動畫可以被設置為永久循環演示。設置 animation-play-state:paused
可以暫停動畫，設置 animation-fill-mode:forwards
可以讓動畫完成後定格在最後一幀。另外，還可以通過JS監聽animation的開始、結束和重複播放時的狀態，分別對應三個事件
8、BFC
BFC是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面元素。比如：內部滾動就是一個BFC，當一個父容器的overflow-y設置為auto時，並且子容器的長度大於父容器時，就會出現內部滾動，無論內部的元素怎麼滾動，都不會影響父容器以外的布局，這個父容器的渲染區域就叫BFC。
9、CSS Hack
早期，不同內核瀏覽器對CSS屬性的解析存在著差異，導致顯示效果不一致，比如 margin
屬性在ie6中顯示的距離會比其他瀏覽器中顯示的距離寬2倍，也就是說margin-left:20px;在ie6中距左側元素的實際顯示距離是40px，而在非ie6的瀏覽器上顯示正常。因此，如果要想讓所有瀏覽器中都顯示是20px的寬度，就需要在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號，以達到應用不同的CSS樣式的目的，這種方式就是css
hack， 對於ie6中的margin應用hack就會變成這樣：.el {margin-left:20px;_margin-left:10px}
TextThree：javascript動態方面js部分
1、基礎語法
Javascript 基礎語法包括：變量聲明、數據類型、函數、控制語句、內置對象等。
在ES5 中，變量聲明有兩種方式，分別是 var 和 function ，var用於聲明普通的變量，接收任意類型，function用於聲明函數。另外，ES6 新增了 let、const、import 和 class等四個命令，分別用以聲明 普通變量、靜態變量、模塊 和 類 。
JS數據類型共有六種，分別是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了Symbol 類型。其中，Object 是引用類型，其他的都是原始類型(Primitive Type)。
原始類型也稱為基本類型或簡單類型，因為其占據空間固定，是簡單的數據段，為了便於提升變量查詢速度，將其存儲在棧(stack)中(按值訪問)。為了便於操作這類數據，ECMAScript
提供了 3 個 基本包裝類型 ：Boolean、Number 和 String
。基本包裝類型是一種特殊的引用類型，每當讀取一個基本類型值的時候，JS內部就會創建一個對應的包裝對象，從而可以調用一些方法來操作這些數據。
2、函數原型鏈
JS是一種基於對象的語言，但在ES6 之前是不支持繼承的，為了具備繼承的能力，Javascript 在 函數對象上建立了原型對象prototype，並以函數對象為主線，從上至下，在JS內部構建了一條 原型鏈 。原型鏈把一個個獨立的對象聯繫在一起，Object則是所有對象的祖宗， 任何對象所建立的原型鏈最終都指向了Object，並以 Object 終結。
3、函數作用域
函數作用域就是變量在聲明它們的函數體以及這個函數體嵌套的任意函數體內都是有定義的。因此， JS中沒有塊級作用域，只有函數作用域
，這種設計導致JS中出現了 變量提升 的問題。簡單來說就是，將變量聲明提升到它所在作用域的最開始的部分，為了解決變量提升帶來的副作用，ES6新增了let 命令來聲明變量，let 所聲明的變量只在 let 命令所在的代碼塊內有效，所以不存在變量提升問題。
4、this 指針
this 指針存在於函數中，用以標識函數運行時所處的上下文。函數的類型不同，this指向規則也不一樣：對於普通函數，this始終指向全局對window對於構造函數，this則指向新創建的對象；對於方法，this指向調用該方法的對象。另外，Function對象也提供了call、apply和 bind 等方法來改變函數的 this 指向，其中，call 和 apply 主動執行函數，bind一般在事件回調中使用，而 call 和 apply的區別只是參數的傳遞方式不同。
5、new 操作符
函數的創建有三種方式，即 顯式聲明、匿名定義 和 new Function()
。前面提到，JS中的函數即可以是函數，也可以是方法，還可以是構造函數。當使用new來創建對象時，該函數就是構造函數，JS將新對象的原型鏈指向了構造函數的原型對象，於是就在新對象和函數對象之間建立了一條原型鏈，通過新對象可以訪問到函數對象原型prototype中的方法和屬性。
6、閉包
通俗來講，閉包是一個具有獨立作用域的靜態執行環境。和函數作用域不同的是，閉包的作用域是靜態的，可以永久保存局部資源，而函數作用域只存在於運行時，函數執行結束後立即銷毀。因此，閉包可以形成一個獨立的執行過程，關於閉包更
7、單線程和異步隊列
JS中的 setTimeout 和 setInterval 就是典型的異步操作，它們會被放入異步隊列中等待，即使 setTimeout(0)
也不會被立即執行，需要等到當前同步任務結束後才會被執行。
8、異步通信 Ajax技術
Ajax是瀏覽器專門用來和伺服器進行交互的異步通訊技術，其核心對象是XMLHttpRequest，通過該對象可以創建一個Ajax請求。Ajax請求是一個耗時的異步操作，當請求發出以後，Ajax提供了兩個狀態位來描述請求在不同階段的狀態，這兩個狀態位分別是 readyState 和 status
status 用於描述服務端對請求處理的情況，200 表示正確響應了請求，404 表示伺服器找不到資源，500 代表伺服器內部異常等等。
Ajax對象還可以設置一個timeout 值，代表超時時間，切記：timeout 只會影響
readyState，而不會影響status，因為超時只會中斷數據傳輸，但不會影響伺服器的處理結果。 如果 timeout 設置的不合理，就會導致響應碼
status 是200，但 response里卻沒有數據，這種情況就是伺服器正確響應了請求，但數據的下載被超時中斷了。
為了防止XSS攻擊，瀏覽器對Ajax請求做了限制，不允許Ajax 跨域請求伺服器，只允許請求和當前地址同域的伺服器資源。但不限制腳本和標籤發送跨域請求，比如
script 和 img 標籤，因此可以利用腳本跨域能力來實現跨域請求，即JSONP 的原理。
JSONP雖然可以解決跨域問題，但只能是get請求，並且沒有有效的錯誤捕獲機制，為了解決這個問題，XMLHttpRequest Level2 提出了
CORS 模型，即 跨域資源共享， 它不是一個新的API，而是一個標準規範，當瀏覽器發現該請求需要跨域時，就會自動在頭信息中添加一個 Origin
欄位，用以說明本次請求來自哪個源。伺服器根據這個值，決定是否同意這次請求。
隨著移動端的快速發展，Web技術的應用場景正在變得越來越複雜， 關注點分離 原則在系統設計層面就顯得越來越重要，而XMLHttpRequest 是
Ajax 最古老的一個接口，因而不太符合現代化的系統設計理念。因此，瀏覽器提供了一個新的 Ajax 接口，即 Fetch API ，Fetch
API 是基於Promise 思想設計的，更符合關注點分離原則。
9、模塊化
歷史上，Javascript 規範一直沒有模塊(module)體系，即無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。在 ES6
之前，為了實現JS模塊化編程，社區制定了一些模塊加載方案，最主要有 CMD 和 AMD 兩種，分別以commonjs 和 requirejs為代表。ES6
在語言標準的層面上，實現了模塊化編程，其設計思想是，儘量靜態化，使得編譯時就能確定模塊的依賴關係，即編譯時加載，而CMD和AMD是在運行時確定依賴關係，即運行時加載。
10、Node.js
Node.js 是一個基於 Chrome V8 引擎的 JavaScript
運行環境，它的運行不依賴於瀏覽器作為宿主環境，而是和服務端程序一樣可以獨立的運行，這使得JS編程第一次從客戶端被帶到了服務端，Node.js在服務端的優勢是，它採用單線程和異步I/O模型，實現了一個高並發、高性能的運行時環境。相比傳統的多線程模型，Node.js實現簡單，並且可以減少資源開銷。
10、ES6
ES6 是 ECMAScript 6.0
的簡寫，即Javascript語言的下一代標準，已經在2015年6月正式發布了，它的目標是讓JS能夠方便的開發企業級大型應用程式，因此，ES6的一些規範正在逐漸向Java、C#等後端語言標準靠近。ES6
規範中，比較重大的變化有以下幾個方面：
新增 let、const 命令 來聲明變量，和var 相比，let
聲明的變量不存在變量提升問題，但沒有改變JS弱類型的特點，依然可以接受任意類型變量的聲明；const
聲明的變量不允許在後續邏輯中改變，提高了JS語法的嚴謹性。
新增解構賦值、rest語法、箭頭函數，這些都是為了讓代碼看起來更簡潔，而包裝的語法糖。
新增模塊化，這是JS走向規範比較重要的一步，讓前端更方便的實現工程化。
新增類和繼承的概念，配合模塊化，JS也可以實現高復用、高擴展的系統架構。
新增模板字符串功能，高效簡潔，結束拼接字符串的時代。
新增Promise對象，解決異步回調多層嵌套的問題。
點擊【右上角，關注 子瑜說IT 】持續更新IT資訊以及web前端開發教學
6年阿里雲全棧工程師福利：網頁製作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，分享給每一位對編程感興趣的小夥伴，每晚8點講解web前端技術！
獲取方式：