前端三大件的學習
前言
之前做前端學習梳理的時候，總結了三塊知識。三大件+組件化、網絡基礎+性能優化、工程化。目前寫了後兩部分的筆記。今天寫第一部分的筆記。
- 網絡基礎和性能優化部分的筆記是：《前端技術架構與工程》之性能筆記
裏面性能評估模型、從URL到頁面、內存管理極限運算性能的理解能對前端的學習有指向性的作用。對代碼質量的理解十分有幫助。 - 工程化部分的筆記是：《前端技術架構與工程》之工程思維與服務支撐筆記
裏面工程思維和開發支撐的部分值得前端借鑑。對代碼規範和組件化的理解也十分有幫助。 - 編程語言部分的筆記是：《前端技術架構與工程》之編程語言筆記
裏面講的三大件對三大件的學習有指向性的作用。
最後落實到代碼的書寫上。今天梳理梳理HTML+CSS+JavaScript。
文章目錄
三大件
之前學習三大件的時候一直比較懵，說學會嗎，應該是沒學會，說沒學會吧，也能建網頁。但是隨着慢慢地學習，好像明白之前爲什麼會懵了，因爲學的內容和我想象中的內容不一樣。有兩點，一點是我想象中的網站是有後臺有交互的網站，但光學三大件做不到這些，還需要學後端（數據庫和服務器）；一點是我想象中的網站很好看，很新穎，但是隻用三大件會很難實現，還需要學習框架。不過現在總算有了整體的認識，我覺得學習前端還需要架構和後端的知識，才能清楚定位前端。
瀏覽器的知識：從URL到頁面顯示的過程（Fetch階段和Render階段）。
HTML的語義化和div、CSS的選擇器和預編譯。
JavaScript的DOM控制和靜態數據類型。
HTML5
主要講常用標籤、HTML5語義化和div、本地存儲、SSR與CSR。
- 常用標籤、HTML5語義化和div是基礎
- 本地存儲和SSR與CSR是進階
常用標籤
從前後端交互的角度可以分爲靜態標籤（我定義的）和動態標籤。靜態標籤是不涉及交互的，如h1>p>img>canvas<ul<table<a；動態標籤是交互的內容，給後臺發生信息的標籤，如input type=“text”>；
div和語義化
語義化是用除div>標籤的標籤來顯示HTML文檔，這樣的優點有許多，如清晰的頁面結構、有利於SEO、便於開發與維護；不過通常情況下還是div一把梭，用得很爽，不用擔心默認樣式。
需要UI框架就是利於div標籤和類選擇器來設計的。使用UI框架只需要在類選擇器中填寫類就可以顯示想要的效果，十分舒適。
本地存儲
在HTML4的時候本地存儲是利用cookie，並且本地不能存數據庫。在HTML5中的本地存儲是web Storage，並且可以用indexedDB存儲數據庫。
相關資料如下：（根據題目搜到，可以自行搜索類似的）
借鑑《前端技術架構與工程》之性能筆記的從URL到頁面顯示能更好理解。
淺談session,cookie,token,webStorage區別
看完這篇 Session、Cookie、Token，和麪試官扯皮就沒問題了
除了web Storage外，HTML5 中的web worker（多線程併發）、文件API、fetchAPI、通信API（webSockets）、web組件、繪製圖形canvas、多媒體相關API都是重點，但是在這就沒具體展開了，可以根據這些關鍵詞搜。我是通過《HTML5與CSS3權威指南》作爲參考，懶得去官網找了。
SSR與CSR
看《前端技術架構與工程》之編程語言筆記的HTML部分。裏面講的virtual DOM、預渲染、SEO值得借鑑。可以作爲基礎後面的部分，補充學習，便於理解MVVM框架。
CSS3
主要講CSS常用選擇器、盒子模型、響應佈局、預處理語言
- 常用選擇器、盒子模型、響應佈局是基礎
- 預處理語言是進階
選擇器+dev
CSS的class選擇器結合HTML的div標籤簡直六的一批。許多UI庫就是自己設置盒模型和響應佈局，我們去使用只需要把class填入即可。特別提高效率。如果以後熟練了，自己也設計一套自己常用的UI庫。
常用的選擇器有元素選擇器、ID選擇器、class選擇器。
CSS在HTML中的使用有外部樣式表、內部樣式表、內聯樣式表；大部分UI庫採用的就是外部樣式表，可以統一設計網站風格；內部樣式表專門設計當前HTML文檔的頁面，一般放在head中，在渲染的時候可以和HTML一起渲染；內聯樣式則是對HTML中元素的設計，專門針對一個元素。具體內容在菜鳥教程、w3cschool或MDN中找。
盒子模型
設計元素的格式。
外邊距margin：bottom、left、right、top；完全透明，起清除周圍元素的作用
輪廓outline：width、style、color；起突出元素的作用
邊框border：width、style、color、spacing、collapse；可以指定元素邊框
內邊距padding：bottom、left、right、top；完全透明，起清除邊框內樣式的作用
響應佈局
我定義的。方便記定位、浮動、flexbox、滾動條、鏈接；
定位opsition：static、relative、absolute、fixed、sticky；比如定位導航欄
浮動float：left、right、none；比如走馬燈
彈性盒子flexbox：row、column、wrap
滾動條overflow：visible、hidden、scroll、auto、inherit
預處理語言
CSS有不少缺點。如CSS沒有命名空間，選擇器中的表都是全局應用的；CSS沒有報錯基礎，只要運行後才能看到哪出錯了；各瀏覽器對CSS規範支持程度不一，爲了照顧兼容性，CSS會有大量兼容性的代碼，這使得CSS文件冗餘。
爲了彌補這些缺點，如less的預處理語言引入了變量、混合、模塊、繼承等特性，同時支持易於編寫和維護的嵌套語法。
不過預處理語法也有新的缺點，如大而全、難擴展；
最新的處理方法是CSS in JS，藉助JavaScript，使得CSS彌補了模塊體系，便於CSS的封裝和解耦，有命名空間，使得CSS有局部作用域。
JavaScript
主要講事件與輸出、數據類型、DOM、靜態類型、異步編程、ES
- 事件與輸出、數據類型、DOM是基礎
- 靜態類型、異步編程、ES6是進階
事件與輸出
既然有交互，那麼就會有事件和輸出，通常是HTML中的動態標籤輸入，然後JavaScript根據事件作出響應。這些就涉及到了JavaScript中處理的對象了。總共有四種對象（我定義的）：JS對象、BOM對象、DOM對象、HTML對象；
事件有DOM中的事件和DOM中的Event事件；輸出主要有操作DOM的document、element、attribute對象和CSSStyleDeclaration、console對象、操作BOM的一些對象。
下面這是我根據《JavaScript權威指南（第6版）》附錄摘錄的。
JS對象是JavaScript語言裏的對象，主要有number、string、Boolean、underfined、symbol、num六種基礎數據類型、array、object、function三種引用數據類型。在下面這個表中還有描述時間的date對象、描述數學公式的math對象、描述正則表達式的RegExp對象、描述報錯的Error對象。
BOM對象是瀏覽器對象模型，主要有window對象、navigator對象、screen對象、history對象、location對象、存儲對象。
DOM對象是文檔對象模型，主要有Document、Element、Attribute三個操作HTML的對象，事件對象Event、控制檯對象console、CSS樣式對象CSSStyleDeclaration、以及collection對象。
HTML對象則是HTML對象中的標籤對象，也是DOM中的一種，但是我單獨拿出來了，方便記憶，如anchor、body、button、style等。
一、JS對象
Array對象：屬性（length）方法（fill、find、pop、push）
Boolean對象：屬性（constructor、prototype）方法（toString、valueOf）
Date對象：屬性（construct）、方法（getDate、setDate、toJSON）
Math對象：屬性（PI）、方法（asin、cos、pow、sqrt）
Number對象：屬性（NaN、MAX_VALUE）方法（toString）
String對象：屬性（用數組）、方法（search、tostring）
RegExp對象：pattern、modifiers、方括號、元字符、量詞、方法（test、toString）
全局屬性：屬性（infinity、NaN、undefined）函數（decodeURI）
運算符：算數、賦值、字符串、比較、條件、邏輯、位
Error對象：屬性（name、message）
二、BOM對象
Window對象：屬性（closed、history、location）方法（alert、close、scrollto）
Navigator對象：屬性（appname、useragent）、方法（javaenabled）
Screen對象：屬性（availHeight、colorDepth、height）
History對象：屬性（length）、方法（back、forward、go）
Location對象：屬性（hash、host、href、port、search）方法（reload）
存儲對象：屬性（length）、方法（key、clear）
三、DOM對象
Document對象：屬性（document.activeElement、document.cookie）
Element對象：屬性（element.getAttribute）
Attributes對象：屬性（attr.value）
Events對象：屬性（onclick、onkeydown、onerror、onsubmit、oncopy）
Console對象：方法（clear、error、log）
CSSStyleDeclaration對象：屬性（csstext、length）方法（item、removeProperty）
Collection對象：方法（item、length、nameditem）
四、HTML對象
Anchor對象：屬性（href、name、type）
Body對象：屬性（background、link、text）、事件（onload）
Button對象：屬性（disabled、form、name、type、value）
Canvas對象：屬性（fillstyle、shadowcolor、font）、方法（fill、scale、drawimage）
Form對象：屬性（action、length、name）方法（reset、submit）、事件（onreset、onsubmit）
Image對象：屬性（align、alt、border、src）、事件（onload、onerror）
Link對象：屬性（href、type）
Script對象：屬性（async、src、text、type）
Style對象：屬性（aligncontent、background、bottom、color、font、margin）
數據類型
在ES6中，變量用let定義、常量用const定義；ES6之前是var定義。
JavaScript中，數據類型分爲基礎類型和對象類型。
基礎類型有六種：數字、布爾、字符型、underfined、null、以及ES新特性符號；
對象類型分爲自定義類型和內置類型，自定義類型是object、內置類型有六種：array、date、error、function、object、RegExp。
類型轉換、標識符命名、運算符和表達式、控制流；這些根據關鍵詞查就可以。在這我就不展開了。
DOM
文檔對象模型，是HTML和XML文檔的編程接口。雖然上面講了部分DOM的知識，但是DOM的知識有許多，是前端開發的核心。
jQuery：降低開發者操作DOM的複雜度。以優秀的DOM操作聞名。
MVVM中的virtual DOM則是大幅度降低了DOM操作，提高性能。
靜態類型
在ES6之前的JavaScript採用的是var定義的動態類型，這種類型雖然靈活，對輕量級項目有絕對積極的作用，但是設計大型項目時會有巨大影響，如和類型相關的bug一般的在測試或者生產環境中爆發，如果採用靜態類型的話，就可以在編譯環境中提前發現。TypeScript是JavaScript靜態類型編程語言，可以幫助我們寫靜態類型的JavaScript。
異步編程
異步編程的好處是併發，提高響應。ajax和node.js都有類似的思路。
ES6
是新版本JavaScript語言標準，其新特性有變量與常量、類的引入、箭頭函數；
更新地址：GitHub