參考
博客
資料
- 1、HTML 5 教程
- 2、CSS3 教程
- 3、JavaScript 教程
收費小冊
前端面試之道
注：某大佬這本收費小冊干貨很多，有些參考其中的問題，就不列答案了。
寫在前面的話
因為一些特殊原因在家待了很久，博客和github都很久沒有更新了。
這段時間，代碼寫的比較少，但是看了不少書。
因為博主不是科班出身，在家的幾個月把科班的一些書籍都學習了一遍，比如《數據結構》，《計算機組成》，《計算機網絡》，《操作系統》，下次有機會，可以把看一些書籍和前端的一些結合來講，
現在主要是待業在家，准備出去找工作，因為疫情原因，先對當前的知識做個整理。
這些整理，只針對於自身的一些問題。
也有自己覺得一些重要，以及一些感悟的地方。
針對自己的查漏補缺
一、html部分
常見行內元素標簽：a、br、code、em、img、input...
常見塊級元素標簽：div、p、dl、dt、form、h1~h6...
新特性
- 用於繪畫的 canvas 元素
- 用於媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支持
- 新的特殊內容元素，比如 article、footer、header、nav、section
- 新的表單控件，比如 calendar、date、time、email、url、search
知識欠缺點
- HTML 5 拖放
- HTML 5 Canvas
- TML5 內聯 SVG
- HTML 5 應用程序緩存
- HTML 5 Web Workers
- HTML 5 服務器發送事件
自己認為重要的一些部分
- HTML5 Input 類型
- HTML5 表單元素
- HTML5 表單屬性
1、HTML5 表單屬性，這個感覺很重要
新的 form 屬性：
- autocomplete
- novalidate
新的 form 屬性：
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required
HTML 事件屬性（重要）
想了想，這部分還單獨列出來好了，因為在日常開發中，使用到的概率也比較高
| 屬性 | 值 | 描述 |
|---|---|---|
| onafterprint | script | 文檔打印之后運行的腳本。 |
| onbeforeprint | script | 文檔打印之前運行的腳本。 |
| onbeforeunload | script | 文檔卸載之前運行的腳本。 |
| onerror | script | 在錯誤發生時運行的腳本。 |
| onload(很常用) | script | 頁面結束加載之后觸發。 |
| onmessage | script | 在消息被觸發時運行的腳本 |
| onpagehide(很常用) | script | 當窗口隱藏時運行的腳本。 |
| onpageshow(很常用) | script | 當窗口成為可見時運行的腳本。 |
| onresize | script | 當瀏覽器窗口被調整大小時觸發。 |
| onstorage | script | 在 Web Storage 區域更新后運行的腳本。 |
| onunload | script | 一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）。 |
Form 事件（重要）
| 屬性 | 值 | 描述 |
|---|---|---|
| onblur (很常用) | script | 元素失去焦點時運行的腳本。 |
| onchange(很常用) | script | 在元素值被改變時運行的腳本。 |
| oncontextmenu | script | 當上下文菜單被觸發時運行的腳本。 |
| onfocus(很常用) | script | 當元素獲得焦點時運行的腳本。 |
| onformchange | script | 在表單改變時運行的腳本。 |
| onforminput | script | 當表單獲得用戶輸入時運行的腳本 |
| oninput(很常用) | script | 當元素獲得用戶輸入時運行的腳本。 |
| oninvalid(很常用) | script | 當元素無效時運行的腳本 |
| onselect | script | 在元素中文本被選中后觸發。 |
| onsubmit(很常用) | script | 在提交表單時觸發。 |
此外還有
- Keyboard 事件
- Mouse 事件（這塊也用的比較多，篇幅原因就不展開列舉了，可以自行查看些html5的教程）
- Media 事件
還有一個比較重要的部分就是video/audio的事件的屬性使用了
HTML 5 視頻/音頻參考手冊。
使用原生寫的時候，做類似的h5活動頁，就很有必要參考這塊了。
小結：
隨着幾大框架的使用，html5中很多屬性的直接應用會變的越來越少，被各種封裝，之前公司做的活動頁
也大都是用vue或者react框架下去制作，然后掛在一個路由下面。
可能在傳統公司的使用還是很多，像一些互聯網公司面試，問這方面的面試題都很少了。
撐死了就隨便問些新特性啊，行塊元素啊，媒體，緩存之類的。
二、css部分
1、盒模型（這個面試10次會問到8次）
box-sizing: content-box(默認)----指的是標准模型（本身內容寬高度+邊框和內邊距）
box-sizing: border-sizing-----指的是IE模型（本身內容的寬高度）
2、flex布局（記得有次面試平安的時候，問的很細，也比較重要）
具體參考Flex布局教程：語法篇
3、css選擇器
因為比較基礎，好像問的比較少了，最早的時候還是會問些后代選擇器和子選擇器之類的。
4、display的值（這個經常問！！！）
5、清浮動（*）
6、posiiton的值：（和display一樣，也經常問，這樣基礎的應該都要掌握）
7、CSS3新特性
- 過渡
- 動畫
- 形狀轉換
- 選擇器
- 陰影
- 文字陰影: text-shadow: 2px 2px 2px #000;(水平陰影，垂直陰影，模糊距離，陰影顏色)
- 盒子陰影: box-shadow: 10px 10px 5px #999
- 邊框
- 背景
- 文字
- 漸變
- 彈性布局、柵格布局、多列布局
- 媒體查詢
8、Sass、Less、Stylus區別
感覺這個問題的即使回答不完全，好像也不是很重要，只要用過其中一種預處理預言，面試官都覺不會在這個問題上糾結太久
9、字體
之所以單獨列出來，是因為我們很多圖標都開始采用字體的形式，例如阿里字體。
注：自身欠缺的知識點
- 動畫（太多的業務代碼，導致對動畫效果的要求不斷的降低）
- 陰影
- 漸變
- 背景（背景用的好的話，真的會有妙用，可惜自身掌握的也不太好。）
小結：
css一直都重要，特別是布局排版，還有一些兼容部分。
不管哪次面試，css都是必不可少的環節
熟練掌握基本的css，在日常的開發會少很多坑
比如還有什么1像素的問題之類的，都是要在不斷的采坑中，慢慢成長的。
隨着css3特性的不斷強大，能夠代替js做不少動畫，好好使用，也會有不錯的效果。
面試之前，應該也要好好把整個css部分，再過一遍
三、js部分
1、js基本數據類型（面試問的概率超高，應該算是基礎吧）
undefined、number、string、null、boolean+object ES6新增Symbol
2、var、let、const 三者的區別什么？
var 存在變量提升，而 let、const 則不會。
var 的全局聲明的變量會掛載到 window 上，而其他兩者不會。
let 和 const 的作用基本一致，后者聲明的變量不能再次賦值
注：有面試官會問你const的聲明對象常量，能不能更改對象中的值，建議自己去實現下。。。
2、原生ajax（以前問的很多，現在框架增多，很多都是請求庫，這個反而問的不怎么多了）
如何創建Ajax
XMLHttpRequest對象的工作流程
==========兼容性寫法===========
var xmlHttp = null;
if(window.XMLHttpRequset) {
// IE7+,Firefox,Chrome,Safari,Opera
xmlHttp = new XMLHttpRequset();
}
else {
// IE5,IE6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
兼容性處理
事件的觸發條件
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
responseText、responseXML
}
}
事件的觸發順序
======================注意=================
如果是POST請求則需要添加頭
xmlHttp.setRequestHeader("Content-type": "application/x-www-form-urlencoded")
3、深拷貝，淺拷貝（很常見）
4、Promise的理解和實現（如果現場要求手寫一個promise比較難，我也只能說說思路，這點也比較欠缺誒）
5、繞不開的閉包問題（問的概率一半一半）
6、原型鏈
7、map, filter, reduce的作用和區別
8、微任務和宏任務（有次面試網易的時候，有問到，這塊要掌握好了，對Event Loop的了解會有很大的收獲）
小結：
js這部分向來都是問的最多的這塊，隨着es6的普及，很多次面試都會問es6的東西了。當然es5本身也是
需要掌握的更加扎實。
而且后續的使用vue，react等框架，也離不開js的支撐，所以js是務必最需要重視的一塊
下一篇博文的地址：3年多前端菜雞的面試及知識梳理（二）
總結
對html部分和css的部分掌握的還算良好，js卻很長時間，因為業務代碼的關系，后期一直沒有得到良好
的發展，也沒有形成自己的知識體系。
因為篇幅有限，這期就先寫這么多，后續的話，應該是更新
工程化，HTTP，vue，react，幾個框架，
再往后，也有可能對小程序呀，app之類的，對自身的情況做個總結。