只要接觸過前端，都會指導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標簽，大致程序如下：
如果你是轉行或者是在校學生，遇見有問題無法解答，可以到我的WEB前端裙，里面有我整理的最新學習路線和教程，可以跟著學，有什么不懂的地方可以隨時在里面問， 我都會幫忙解答，下面就是我的WEB前端q裙 851231348， 里面聚集了一些正在學習的初學者，裙檔案里面也有我做web前端技術這段時間整理的一些學習手冊，面試題，前端開發工具，PDF檔案書籍教程，需要的話都可以自行來獲取下載，
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物件，解決異步回呼多層嵌套的問題，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/21627.html
標籤：Html/Css
上一篇：學習
下一篇：關于BPM流程的研究