摘要：復習整理有什么新特性新增語義化標簽等新增用于繪畫的元素用于媒介回放的和元素本地緩存有更好支持和是什么，文檔是什么是用來描述網頁的一種超文本標記語言，文檔也被成為網頁，它包含標簽和純文本是什么它不是標簽，它為瀏覽器提供一種信息聲明，告訴瀏覽器

復習整理 html 1.html5有什么新特性？

 新增語義化標簽
、等

? 新增用于繪畫的元素

? 用于媒介回放的video和audio元素

? 本地緩存有更好支持（localStorage和sessionStorage）

2.html是什么，html文檔是什么？

html是用來描述網頁的一種超文本標記語言，html文檔也被成為網頁，它包含html標簽和純文本

3.是什么？

它不是html標簽，它為瀏覽器提供一種信息聲明，告訴瀏覽器html是用什么版本編寫的，用來表示html的版本

4.html文檔的類型

有html、html+、html2.0、html、3.2、html4.01、xhtml 1.0、html5等

css 1.簡述flex布局

flex布局：彈性布局，設置間距相同的布局、單行單列布局的時候相當好用
display可以設置為flex、inline-flex。

設置display：flex的時候，子元素的float、clear、vertical-align屬性都將全部失效。

容器屬性：

flex-direction設置主軸的排列方向，有 row（豎直向下排列）、row-reverse（豎直向上排列）、column（垂直向右排列）、column-reverse（垂直向左排列）

flex-wrap 設置是否排列在一條線上，有nowrap、wrap和warp-reverse三個選項

flex-flow是flex-direction和flex-wrap的簡寫

justify-content定義項目在主軸上的對齊方式有 flex-start | flex-end | center | space-between | space-around

align-items定義交叉軸的對齊方式 flex-start | flex-end | center | baseline | stretch

align-content定義多跟軸線的對齊方式

項目屬性：

align-self（改項目的對齊方式）

order （項目排列順序）

flex-grow（項目放大比例）

flex-shrink（項目縮小比例）

flex-basis（在分配多余空間時，項目占據的主軸空間）

flex（flex-grow，flex-shrink，flex-basis的縮寫）

2. 簡述grid布局

? 網格布局

3. 幾種實現水平垂直居中的方法

使用display：flex，justify-content：center，align-item： center實現

確定高寬情況下
.test {

position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
}，或者
.test {
position: absolute;
margin:auto;
left:50%;
top:50%;
margin-top： -height/50；
margin-left： -width/50；
}，

不確定高寬
.test {

position: absolute;
margin:auto;
left:50%;
top:50%;
transform： translate（-50%，-50%）
}，

4. 常見塊級元素和內聯元素

塊級元素： div、form、table、p、h1-h6、dl、li、ul、ol等
內聯元素： a、strong、br、img、i、span、label、input、textarea、select等

5. position定位有哪些

? absolute（絕對定位，相對于值不為static的第一個父元素進行定位）

relative（相對定位，相對于其正常位置進行定位）
fixed（相對于瀏覽器窗口進行定位）
static（默認值，沒有定位，元素出現在正常的流中）
inherit（繼承父元素position屬性的值）
sticky（relative和fixed的結合體，當元素在屏幕內飾relative，滾出屏幕時顯示為fixed）

6. css3的新屬性

 1. transfrom（對元素進行旋轉、縮放、移動或傾斜）、animation（動畫效果）和transition（添加過渡效             果）
2. 三個邊框效果： border-radius（創建圓角邊框）、border-shadow（陰影）、border-image（使用圖片繪制邊框）
3. 文字效果新增word-wrap、text-overflow和text-shadow，以上等等

7.block、inline和inline-block的區別

display：block

block元素又叫做塊級元素，它獨占一行，多個block元素各占一行。默認情況下block元素 寬度自動填滿父元素寬度

可以設置weight和width屬性，塊級元素設置了width還是獨占一行

可以設置padding和margin屬性

display：inline
1.inline元素又叫內聯元素，不會占一行，多個內聯元素會排列在一行，一行排列不下去才會 行，，寬度隨元素的內容變化
2.設置width和weight屬性無效
3.inline元素的margin和padding屬性，水平方向上都能產生邊距效果，豎直方向上不會產生 效果

display： inline-block

內聯塊級元素擁有inline元素的多個占據同行特性和block元素的設置高度寬度特性和設置 padding和margin特性

8. display：none和visiblity：hidden的區別

? 為none的時候不占空間，為hidden的時候隱藏元素依然占據空間

? 為none的會產生回流和重繪，visiblity：hidden的時候只產生重繪

? visiblity：hidden的子孫元素設置visiblity：hidden時會失效

9. 什么是BFC， BFC用來解決什么問題

格式化上下文：特點是內部的子元素不會影響外部的元素，可以用來解決margin穿透和清除浮動

一個塊格式化上下文由以下之一創建：

1)根元素或其它包含它的元素
2)浮動元素 (元素的 float 不是 none)
3)絕對定位元素 (元素具有 position 為 absolute 或 fixed)
4)內聯塊 (元素具有 display: inline-block)
5)表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
6)表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
7)具有overflow 且值不是 visible 的塊元素，
8)display: flow-root
9)column-span: all 應當總是會創建一個新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。

10.盒子模型有哪些，如何設置

iE盒子模型： 內容（content+padding+border）+邊界margin 高寬包含padding和border

標準盒子模型： content+padding+border+邊界margin 高寬指的是content

通過box-sizing：content-box設置標準盒子模型，box-sizing：border-box設置ie盒子模型

11.css選擇器有哪些

選擇器有id選擇器、元素選擇器、屬性選擇器、類選擇器、后代選擇器、子元素選擇器、相鄰兄弟選擇器、偽類和偽元素。

12.清除浮動的四種方式

在浮動的元素樣式中加入clear：both

在浮動元素下面插入清除浮動的塊級元素

給浮動元素設置偽類，偽類樣式設置display為block，clear：both

設置BFC（格式化上下文），如浮動父元素設置overflow：auto

13.如何用css實現一個三角形

? 定義一個div元素，讓它的內容高寬為0，通過border來實現

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}

以上css樣式通過設置底部border邊為紅色，其他邊為透明色，實現了一個底部寬40，高20的紅色的三角形

js 1. addEventListener的第三個參數的作用

指定事件是否在捕獲或者冒泡階段執行，true為在捕獲階段執行，false默認，在冒泡階段執行

2.什么是事件冒泡，什么是事件捕獲

事件冒泡指事件從發生的目標開始，沿著文檔逐層向上冒泡，到documnent為止，事件捕獲則相反，從documnet開始，沿著文檔向下，直到目標事件為止，

3.如何阻止事件冒泡和事件捕獲

ie下設置e.cancelBubble = true，在符合w3c的瀏覽器設置e.stopProgation()阻止事件冒泡，也可以通過preventDefault阻止默認行為，因為事件處理的默認行為就是冒泡或者通過return false

使用stopImmediatePropagation() 阻止事件捕獲，需要注意的是stopImmediatePropagation() 也能阻止事件冒泡，調用后，不僅父類元素冒泡被阻止，同時該元素綁定的同類事件也會執行

4.typeof返回的數據類型

string、number、boolean、undefined、object、function

5.列舉三種強制類型轉換和2種隱式類型轉換

強制（parseInt、parseFloat、number）

隱式（== ===）

6.split（） join（）區別

前者將字符串切割成數組形式，后者將數組轉為字符串

7. ajax請求get和post方法的區別

get主要是獲取資源，post請求服務器端資源

get傳輸數據通過url，post通過http的post機制，將要傳輸的數據放在請求實體中發送給服務器

get傳輸數據量小，post傳輸數據量大

get不安全，post安全性較高

get只能支持ASCII字符傳輸，傳遞中午字符會亂打；post支持標準字符集，可以傳遞中文字符

8.call、apply和bind的區別

call和apply都可以改變this的指向，區別在于傳入apply的第二個參數是一個數組，call后面是對象

bind后面的參數也是對象，但是bind不會立即執行

9.ajax請求時，如何解析json數據

使用JSON.parse()把json數據轉化為js對象，使用JSON.Stringify()把js對象轉化為json字符串

10.閉包是什么，有什么特性

閉包就是能夠讀取函數內部變量的函數，使得函數不被GC回收，如果過多使用，就會造成內存泄露

11.添加 刪除 替換 插入到某個節點的方法

創建新節點

createElement（） // 創建一個具體元素

createTextNode（） // 創建一個文本節點

添加、移除、替換、插入

appendChild（） // 添加

removeChild（） // 移除

replaceChild（） // 替換

insertBefore（） // 插入

12.document onload和doucment ready的區別

onload是在結構和樣式、外部js及圖片加載好后執行js，ready是在dom樹創建完成后就執行，是jquery里面的方法

13.函數聲明和函數表達式的區別

函數聲明在js解析時就會進行函數提升，因此在同一作用域中，不管函數聲明在哪定義，該函數都可以調用，函數表達式只有在執行到那一塊后，才可以調用

14. null和undefined的區別

? null表示‘空’的對象，轉化為數值是0，undefined是一個表示無的原始值，轉化為數值是NAN，

? 變量為聲明，默認是undefined，null表示尚不存在的對象

? undefined表示為未初始化的變量返回的值，null表示一個尚不存在的對象返回的值，undefined可以看做空的變量，null看做空的對象

15. new操作符干了什么

創建了一個空對象。

把所創建的空對象的_ proto _指向構造函數的prototype

執行構造函數中的代碼，構造函數中的this指向對象

返回該對象（除非構造函數中返回一個對象或者函數）

16.實現深度克隆

JSON.parse(JSON.stringify());

17.什么是同源策略

它是瀏覽器的一種約定，腳本只允許訪問同一站點的資源，協議相同，域名相同，端口號相同，就是同一站點

在瀏覽器中，