前端知识点梳理（一）
一、HTML
1. meta標(biāo)簽
記住2個(gè)屬性：name和http-equiv
- name：描述網(wǎng)頁(yè)
HTML中的meta標(biāo)簽及其使用方法
二、CSS
1. css實(shí)現(xiàn)水平居中的幾種方式
css實(shí)現(xiàn)水平居中的幾種方式
一、 行內(nèi)
二、已知寬高塊級(jí)元素（三的特例）
三、未知寬高塊級(jí)元素
top、left、right、bottom設(shè)置為0，用于實(shí)現(xiàn)居中，填滿父容器
未知寬高：是不知道寬高而不是沒(méi)有。實(shí)例
css3：父元素display：flex；子元素：margin：auto；好用，有兼容問(wèn)題
flex布局，兼容寫(xiě)法
帶有box放后寫(xiě)：
.box{display: -webkit-flex; /* 新版本語(yǔ)法: Chrome 21+ */display: flex; /* 新版本語(yǔ)法: Opera 12.1, Firefox 22+ */display: -webkit-box; /* 老版本語(yǔ)法: Safari, iOS, Android browser, older WebKit browsers. */display: -moz-box; /* 老版本語(yǔ)法: Firefox (buggy) */display: -ms-flexbox; /* 混合版本語(yǔ)法: IE 10 */ }.flex1 { -webkit-flex: 1; /* Chrome */ -ms-flex: 1 /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ }2. css偽類(lèi)
css偽類(lèi)（:before和:after）
在指定的元素內(nèi)容（而不是元素本身）之前或者之后插入一個(gè)包含content屬性指定內(nèi)容的行內(nèi)元素
*1. 自適應(yīng)兩欄布局的4種方式
先決條件：
* {margin: 0;padding: 0; } html, body {height: 100%; } .left {height: 100%; } .right {height: 100%; }一類(lèi)：左浮動(dòng)，右三變體
①margin-left：左寬100px
②右浮動(dòng)float: right計(jì)算右寬width：calc(100% - 100px); 注意：運(yùn)算符號(hào)左右必須有空格
③右邊創(chuàng)建BFC
二類(lèi)：左定位，右三變體
- 左：display: absolute; left: 100px;
三類(lèi)：table布局
原理：子元素寬度之和等于父元素的寬度；如果有子元素未設(shè)置寬度，那么占據(jù)剩余所有寬度。如果子元素設(shè)置的寬度相加不等于100%，默認(rèn)按子元素個(gè)數(shù)比例均分父元素寬度。
注意：
四類(lèi)：flex布局
同table，要想讓自適應(yīng)占滿容器寬度，容器body必顯式width: 100;
或者body不設(shè)寬高，為什么呢？
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}body {display: flex;}.left{width: 200px;height: 100px;background-color: skyblue;}.right{flex: 1;height: 100px;background-color: pink;}</style> </head> <body><div class="left"></div><div class="right"></div> </body> </html>*2. 自適應(yīng)三欄布局的種方式
一類(lèi)：左浮動(dòng)+右浮動(dòng)+中間不作為
二類(lèi)：左中右定位，中間設(shè)置left right
三類(lèi)：flex布局，中間flex:1
四類(lèi)：表格布局
五類(lèi)：網(wǎng)格布局
三、JS
1.this指向
哪個(gè)對(duì)象調(diào)用函數(shù)，函數(shù)里面的this指向哪個(gè)對(duì)象
this指向總結(jié)
箭頭函數(shù)中的this指向問(wèn)題詳解
總結(jié)：
1. apply和call簡(jiǎn)單來(lái)說(shuō)就是會(huì)改變傳入函數(shù)的this，this指向括號(hào)里的參數(shù)；
2.setTimeout等window對(duì)象方法，參數(shù)若是普通函數(shù)，內(nèi)部this指向window；參數(shù)若是箭頭函數(shù)，則繼承外部的環(huán)境。
2.js變量
2.1 js變量類(lèi)型與聲明
1）全局變量 / 局部變量2）顯示聲明 / 隱式聲明3）變量提升 / 函數(shù)提升第一種聲明方式：使用var關(guān)鍵字+變量名在函數(shù)外部聲明就是全局變量;在函數(shù)內(nèi)部則為局部變量；
第二種聲明方式：沒(méi)有使用var關(guān)鍵字聲明，直接給變量名賦值，不管是在函數(shù)內(nèi)部還是外部都是全局變量；
第三種聲明方式： 使用window全局對(duì)象來(lái)聲明，全局對(duì)象的屬性對(duì)應(yīng)也是全局變量；
在js函數(shù)中局部變量?jī)?yōu)先于全局變量
2.2 let
let定于的全局變量，不會(huì)變成window對(duì)象的屬性
JavaScript中的let關(guān)鍵字
上面定義一個(gè)全局變量name，接下來(lái)的func（）函數(shù)中使用let定義了同名的name變量，此時(shí)局部變量name會(huì)覆蓋全局變量，但是由于使用let定義的變量不會(huì)提前裝載，因此func（）函數(shù)在使用let定義局部變量之前訪問(wèn)name變量會(huì)導(dǎo)致錯(cuò)誤–如果將func（）函數(shù)中的let改成var關(guān)鍵字定義，則會(huì)輸出undefined，再輸出局部變量name的值。
2.3 ES5變量提升
. js變量提升
注意： 當(dāng)全局變量跟局部變量重名時(shí)，局部變量的scope會(huì)覆蓋掉全局變量的scope，當(dāng)離開(kāi)局部變量的scope后，又重回到全局變量的scope。
1、所有申明都會(huì)被提升到作用域的最頂上
2、同一個(gè)變量申明只進(jìn)行一次，并且因此其他申明都會(huì)被忽略；（如果局部和全局變量重名，優(yōu)先使用局部變量）
3、函數(shù)聲明的優(yōu)先級(jí)優(yōu)于變量申明，且函數(shù)聲明會(huì)連帶定義一起被提升；函數(shù)表達(dá)式函數(shù)不可提前執(zhí)行（會(huì)報(bào)錯(cuò)），但會(huì)作為變量提升
如果函數(shù)聲明和變量申明使用的是同一個(gè)變量名稱，函數(shù)聲明優(yōu)先級(jí)高于變量聲明的優(yōu)先級(jí)。
我們習(xí)慣將var a = 2;看做是一個(gè)聲明，而實(shí)際上javascript引擎并不這么認(rèn)為。它將var a和a = 2看做是兩個(gè)單獨(dú)的聲明，第一個(gè)是編譯階段的任務(wù)，而第二個(gè)則是執(zhí)行階段的任務(wù).
這意味著無(wú)論作用域中的聲明出現(xiàn)在什么地方，都將在代碼本身被執(zhí)行前首先進(jìn)行處理，可以將這個(gè)過(guò)程形象地想象成所有的聲明（變量和函數(shù)）都會(huì)被“移動(dòng)”到各自作用域的最頂端，這個(gè)過(guò)程被稱為提升。
2.4 類(lèi)型轉(zhuǎn)換
2.4.1 規(guī)則總結(jié)
以下是總結(jié)，記不住的話拿本子多抄幾遍吧。
JS類(lèi)型轉(zhuǎn)換規(guī)則總結(jié)
1. Number(mix)函數(shù)
特例在于：
- Number(null) = > 0
- Number(false) = > 0
- 復(fù)雜數(shù)據(jù)類(lèi)型
2. parseInt(string, radix)函數(shù)
- （1）忽略字符串前面的空格，直至找到第一個(gè)非空字符
- （2）如果第一個(gè)字符不是數(shù)字符號(hào)或者負(fù)號(hào)，返回NaN
- （3）如果第一個(gè)字符是數(shù)字，則繼續(xù)解析直至字符串解析完畢或者遇到一個(gè)非數(shù)字符號(hào)為止
- （4）如果上步解析的結(jié)果以0開(kāi)頭，則將其當(dāng)作八進(jìn)制來(lái)解析；如果以x開(kāi)頭，則將其當(dāng)作十六進(jìn)制來(lái)解析
- （5）如果指定radix參數(shù)，則以radix為基數(shù)進(jìn)行解析
3. 變量.toString(radix)
變量類(lèi)型除undefined、null
4.Boolean(mix)函數(shù)
以下值會(huì)被轉(zhuǎn)換為false（6種數(shù)據(jù)類(lèi)型）：false、空字符串、0、NaN、null、undefined，其余任何值都會(huì)被轉(zhuǎn)換為true。
2.4.2 刷題
1.關(guān)系運(yùn)算符
- 當(dāng)比較運(yùn)算符（>大于號(hào)）兩邊都是字符串時(shí)，按照字符串對(duì)應(yīng)的Unicode編碼轉(zhuǎn)為數(shù)字，進(jìn)行比較；
- undefined和null組合互等：
- NaN(2等或3等)NaN都為false
js面試題大坑——隱式類(lèi)型轉(zhuǎn)換
3.函數(shù)
js創(chuàng)建函數(shù)的3種方法
1） 函數(shù)聲明 ：常用function sum () { }
2） 函數(shù)表達(dá)式 : var sum = function () { }
3） 函數(shù)構(gòu)造法 ：var sum = new Function(‘x’,‘y’,‘return x + y ;’)
3*.事件
1.定時(shí)器與點(diǎn)擊事件
剖析setTimeout和click點(diǎn)擊事件的觸發(fā)順序
2.事件循環(huán)
JS事件循環(huán)
事件循環(huán)優(yōu)先級(jí)
執(zhí)行順序：同步任務(wù)>微任務(wù)>宏任務(wù)
微任務(wù)：
promise的.then里的內(nèi)容
宏任務(wù)：
定時(shí)器
3.事件委托
4. 閉包
4.1 常見(jiàn)例子
*. for循環(huán)下，加入點(diǎn)擊事件顯示for的i值卻總是獲取最后的值
for(var i=0;i<5;i++){var input = document.createElement("input");input.value = "顯示";input.type = "button";input.οnclick=function(){alert("此時(shí)的值："+i);}document.getElementById("a").appendChild(input);}原因分析：
由于點(diǎn)擊操作是在for循環(huán)完成后才進(jìn)行的，而從i的作用域考慮，for循環(huán)完后的i已經(jīng)是5了，所以無(wú)論點(diǎn)擊哪個(gè)按鈕，顯示的只會(huì)是i的最后一個(gè)值5。
具體解析參考一：
在for循環(huán)中var和let的區(qū)別
參考二：
JS中for循環(huán)變量作用域
js循環(huán)給li綁定事件實(shí)現(xiàn) 點(diǎn)擊li彈出其索引值 和內(nèi)容
<script>//1. 用外層函數(shù)包裹要保護(hù)的變量和內(nèi)層函數(shù)function outer(){var i=1;//2. 外層函數(shù)返回內(nèi)層函數(shù)對(duì)象到外部return function(){console.log(i++);}}//3. 調(diào)用外層函數(shù)獲得內(nèi)層函數(shù)對(duì)象var getNum=outer();//getNum:function(){ console.log(i++); }getNum();//1getNum();//2i=1;getNum();//3getNum();//4 </script>如果有人問(wèn)你這個(gè)問(wèn)題，編寫(xiě)一個(gè)輸入一個(gè)字符串并逐次返回字符。 如果給出了新字符串，則應(yīng)該替換舊字符串，類(lèi)似簡(jiǎn)單的一個(gè)生成器。
function generator(input) {var index = 0;return {next: function() {if (index < input.length) {index += 1;return input[index - 1];}return "";} }}執(zhí)行如下：
var mygenerator = generator("boomerang"); mygenerator.next(); // returns "b" mygenerator.next() // returns "o" mygenerator = generator("toon"); mygenerator.next(); // returns "t"在這里，作用域扮演著重要的角色。閉包是返回另一個(gè)函數(shù)并攜帶數(shù)據(jù)的函數(shù)。上面的字符串生成器適用于閉包。index 在多個(gè)函數(shù)調(diào)用之間保留,定義的內(nèi)部函數(shù)可以訪問(wèn)在父函數(shù)中定義的變量。這是一個(gè)不同的作用域。如果在第二級(jí)函數(shù)中再定義一個(gè)函數(shù)，它可以訪問(wèn)所有父級(jí)變量。
4.2 閱讀
閉包
4.3 應(yīng)用場(chǎng)景
閉包應(yīng)用場(chǎng)景
5.js如何實(shí)現(xiàn)類(lèi)的繼承
js如何實(shí)現(xiàn)類(lèi)的繼承
6.js的new操作符做了哪些事情
js的new操作符做了哪些事情
7.JS基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型的區(qū)別及深淺拷貝
JS基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型的區(qū)別及深淺拷貝
8. ES6常用語(yǔ)法總結(jié)
ES6常用語(yǔ)法總結(jié)
9.promise
promise 例子很形象生動(dòng)
10.原生ajax+封裝ajax+使用方法
原生ajax+封裝ajax+使用方法
11.git常用命令
git常用命令
12.垃圾回收機(jī)制
js的垃圾回收機(jī)制 可達(dá)性
什么是垃圾：
一般來(lái)說(shuō)沒(méi)有被引用的對(duì)象就是垃圾，就是要被清除， 有個(gè)例外如果幾個(gè)對(duì)象引用形成一個(gè)環(huán)，互相引用，但根訪問(wèn)不到它們，這幾個(gè)對(duì)象也是垃圾，也要被清除。
四、優(yōu)秀博文
看到一個(gè)很好的團(tuán)隊(duì)，把其中不錯(cuò)的文章記錄下來(lái)：
ES6十大特性
flex彈性布局
命名規(guī)范
自適應(yīng) > 響應(yīng)式
響應(yīng)式布局三要點(diǎn)：
1、流式布局 Liquid Layout
2、Media Query
3、viewport
自適應(yīng)與響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
《抓緊面試前的寶貴時(shí)間 快速搞定前端初級(jí)JavaScript面試》學(xué)習(xí)目錄
總結(jié)
以上是生活随笔為你收集整理的前端知识点梳理（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ajax 提交 .net ispostb
- 下一篇： IDEA设置护眼色