摘要：前言屆校招陸陸續(xù)續(xù)開(kāi)始了，整理了一些高頻的面試題。標(biāo)簽提供給頁(yè)面的一些元信息名稱(chēng)值對(duì)，有助于。開(kāi)啟缺點(diǎn)一個(gè)是不支持，另一個(gè)是一旦子元素的大小超過(guò)父容器的大小，就會(huì)出顯示問(wèn)題。用于設(shè)置或檢索元素的縮放比例，值為即使用元素的實(shí)際尺寸。

2019屆校招陸陸續(xù)續(xù)開(kāi)始了，整理了一些高頻的面試題。

1. 什么是？

DOCTYPE是html5標(biāo)準(zhǔn)網(wǎng)頁(yè)聲明，且必須聲明在HTML文檔的第一行。來(lái)告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。

文檔解析類(lèi)型有：

BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁(yè)面。（如果沒(méi)有聲明DOCTYPE，默認(rèn)就是這個(gè)模式）

CSS1Compat：標(biāo)準(zhǔn)模式，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁(yè)面。

2. meta標(biāo)簽

提供給頁(yè)面的一些元信息（名稱(chēng)/值對(duì)），有助于SEO。

屬性值：

name：名稱(chēng)/值對(duì)中的名稱(chēng)。author、description、keywords、generator、revised、others。 把 content 屬性關(guān)聯(lián)到一個(gè)名稱(chēng)。

http-equiv：沒(méi)有name時(shí)，會(huì)采用這個(gè)屬性的值。content-type、expires、refresh、set-cookie。把content屬性關(guān)聯(lián)到http頭部

content ： 名稱(chēng)/值對(duì)中的值， 可以是任何有效的字符串。 始終要和 name 屬性或 http-equiv 屬性一起使用

scheme ： 用于指定要用來(lái)翻譯屬性值的方案

3. HTML語(yǔ)義化

用正確的標(biāo)簽做正確的事情。

html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器，搜索引擎解析；

即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；

搜索引擎的爬蟲(chóng)也依賴(lài)于HTML標(biāo)記確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;

使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

4. 常見(jiàn)的瀏覽器內(nèi)核

Trident內(nèi)核：IE,MaxThon,TT,The Word,360,搜狗瀏覽器等。

Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等；

Presto內(nèi)核：Opera7及以上。[現(xiàn)為：Blink]

Webkit內(nèi)核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

5. 簡(jiǎn)單介紹對(duì)瀏覽器內(nèi)核的理解

主要分成兩部分：渲染引擎和JS引擎。

渲染引擎：將代碼轉(zhuǎn)換成頁(yè)面。負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等）、以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶(hù)端以及其他需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。

JS引擎：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。

最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分得很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。

6. HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？

新特性：

(1) 用于繪畫(huà)的canvas元素；

(2) 用于媒介回放的video和audio元素；

(3) 對(duì)本地離線(xiàn)存儲(chǔ)有更好的支持，localStorage長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除；

(4) 語(yǔ)意化更好的內(nèi)容元素，比如header,nav,section,article,footer；

(5) 新的表單控件：calendar,date,time,email,url,search；

(6) 新的技術(shù)webworker,websockt、Geolocation；

移除元素：

(1) 純表現(xiàn)的元素：basefont,big,center,font,s,strike,tt,u;

(2) 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame,frameset,noframes;

處理兼容性問(wèn)題：

IE8/IE7/IE6支持document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。

7. html5哪些標(biāo)簽可以做SEO優(yōu)化？

title、meta、header、footer、nav、article、aside

8. src和href的區(qū)別

src是指向外部資源的位置，指向的內(nèi)容會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在的位置，在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，如js腳本，img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，知道將該資源加載、編譯、執(zhí)行完畢，所以一般js腳本會(huì)放在底部而不是頭部。

href是指網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，用于超鏈接。

9. 漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能，達(dá)到更好的用戶(hù)體驗(yàn)。

優(yōu)雅降級(jí)：一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本的瀏覽器進(jìn)行兼容。

10. defer和async的區(qū)別

defer要等到整個(gè)頁(yè)面在內(nèi)存中正常渲染結(jié)束（DOM結(jié)構(gòu)完全生成，以及其他腳本執(zhí)行完成），才會(huì)執(zhí)行。多個(gè)defer腳本會(huì)按照它們?cè)陧?yè)面出現(xiàn)的順序加載。==“渲染完再執(zhí)行”==

async一旦下載完，渲染引擎就會(huì)中斷渲染，執(zhí)行這個(gè)腳本以后，再繼續(xù)渲染。多個(gè)async腳本是不能保證加載順序的。==“下載完就執(zhí)行”==

11. 如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信？

方法一：調(diào)用localstorge

標(biāo)簽頁(yè)1：

標(biāo)簽頁(yè)2：

$(function(){   
    window.addEventListener("storage", function(event){    
       console.log(event.key + "=" + event.newValue);    
    });     //使用storage事件監(jiān)聽(tīng)添加、修改、刪除的動(dòng)作  
});  

方法二：使用cookie+setInterval

將要傳遞的信息存儲(chǔ)在cookie中，每隔一定時(shí)間讀取cookie信息，即可隨時(shí)獲取要傳遞的信息。

標(biāo)簽頁(yè)1：

$(function(){    
    $("#btn").click(function(){    
        var name=$("#name").val();    
        document.cookie="name="+name;    
    });    
});    

標(biāo)簽頁(yè)2：

 $(function(){   
    function getCookie(key) {    
       return JSON.parse("{"" + document.cookie.replace(/;s+/gim,"","").replace(/=/gim, "":"") + ""}")[key];    
    }     
    setInterval(function(){    
       console.log("name=" + getCookie("name"));    
    }, 10000);    
});  

1. css盒模型

IE盒模型 box-sizing:border-box;（怪異模式）；

W3C標(biāo)準(zhǔn)盒模型 box-sizing:content-box;（標(biāo)準(zhǔn)模式）。

應(yīng)用場(chǎng)景：

（1）表單：
表單中有一些input元素其實(shí)還是展現(xiàn)的是傳統(tǒng)IE盒模型，帶有一些默認(rèn)的樣式，而且在不同平臺(tái)或者瀏覽器下的表現(xiàn)不一，造成了表單展現(xiàn)的差異。此時(shí)我們可以通過(guò)box-sizing屬性來(lái)構(gòu)建一個(gè)風(fēng)格統(tǒng)一的表單元素。

（2）設(shè)置子類(lèi)元素的margin或者border時(shí)，可能會(huì)撐破父層元素的尺寸，這時(shí)我就需要使用box-sizing: border-box來(lái)將border包含進(jìn)元素的尺寸中，這樣就不會(huì)存在撐破父層元素的情況了。

2. 行內(nèi)元素和塊級(jí)元素的區(qū)別？行內(nèi)塊級(jí)元素的兼容性使用？（IE8以下）

塊級(jí)元素：div,p,h1,form,ul,li

（1）各占一行，垂直方向排列；

（2）可以包含其他塊級(jí)或者行內(nèi)元素；

（3）高度、行高以及外邊距和內(nèi)邊距都可控制；

（4）默認(rèn)寬度是它本身父容器的100%（和父元素的寬度一致），與內(nèi)容無(wú)關(guān)。

行內(nèi)元素：span,a,label,input,img,strong,em

（1）水平方向排列，不會(huì)自動(dòng)換行；

（2）不可以包含塊級(jí)元素，但是可以包含其他行內(nèi)元素或者文本；

（3）行內(nèi)元素設(shè)置width、height無(wú)效(可以設(shè)置line-height)，margin和padding上下無(wú)效；

（4）寬度就是它的文字和圖片的寬度，不可改變。

行內(nèi)塊級(jí)元素在IE8以下的兼容性（塊元素模擬inline-block）

div {
    display： inline-block；
    zoom： 1；   //在IE下觸發(fā)hasLayout
    display：inline；//一旦觸發(fā)了hasLayout設(shè)置display：inline和display：block效果相似。
}

haslayout 是IE7-瀏覽器的特有屬性。hasLayout是一種只讀屬性，有兩種狀態(tài)：true或false。當(dāng)其為true時(shí)，代表該元素有自己的布局，否則代表該元素的布局繼承于父元素。

注意: 通過(guò)element.currentStyle.hasLayout可以得出當(dāng)前元素的hasLayout情況。

3. 頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？

（1）link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。

（2）link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。

（3）link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器（IE5以下）不支持。

（4）link支持使用Javascript控制DOM去改變樣式；而@import不支持。

4. 清除浮動(dòng)有哪些方式？

（1）在浮動(dòng)元素下方添加一個(gè)非浮動(dòng)元素

父容器現(xiàn)在必須考慮非浮動(dòng)子元素的位置，而后者肯定出現(xiàn)在浮動(dòng)元素下方，所以顯示出來(lái)，父容器就把所有子元素都包括進(jìn)去了。這種方法比較簡(jiǎn)單，但是要在頁(yè)面中增加冗余標(biāo)簽，違背了語(yǔ)義網(wǎng)的原則。

（2）將父容器也改成浮動(dòng)定位

這種方法不用修改HTML代碼，但是缺點(diǎn)在于父容器變成浮動(dòng)以后，會(huì)影響到后面元素的定位，而且有時(shí)候，父容器是定位死的，無(wú)法變成浮動(dòng)。

（3）父容器設(shè)置overflow: hidden或者auto。（開(kāi)啟BFC）

缺點(diǎn)：一個(gè)是IE6不支持，另一個(gè)是一旦子元素的大小超過(guò)父容器的大小，就會(huì)出顯示問(wèn)題。

（4）利用:after偽選擇符，在父容器的尾部自動(dòng)創(chuàng)建一個(gè)子元素 ==（推薦這種）==

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
//兼容ie6：激活父元素的"hasLayout"屬性，讓父元素?fù)碛凶约旱牟季?.clearfix {
    zoom: 1;  //或者h(yuǎn)eight：1%；
}

5. 簡(jiǎn)單介紹BFC和IFC

BFC —— 塊級(jí)格式化上下文

（1）BFC觸發(fā)條件：

根元素或其他包含他的元素

浮動(dòng)元素 float：left/right

position：absolute/fixed

display：inline-block,table-cell,table-caption

overflow不為visible

彈性盒子：display: flex 或 inline-flex

（2）BFC特性

內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置；

垂直方向的距離有margin決定(屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊，與方向無(wú)關(guān))；

每個(gè)元素的margin box的左邊， 與包含塊border； box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此；

BFC的區(qū)域不會(huì)與float的元素區(qū)域重疊；

計(jì)算BFC的高度時(shí)，浮動(dòng)子元素也參與計(jì)算，可以解決父元素高度塌陷問(wèn)題；

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面元素，反之亦然；

文檔流中的BFC元素, width為auto時(shí)，會(huì)占滿(mǎn)當(dāng)前行的剩余寬度。

（3）應(yīng)用

阻止兩個(gè)相鄰的普通流中的塊元素垂直方向上的margin折疊；

BFC可以包含浮動(dòng)元素，撐開(kāi)父元素；

BFC可以阻止元素被浮動(dòng)元素覆蓋。

（4）BFC與hasLayout

IE6-7不支持BFC，而是使用私有屬性hasLayout，要用zoom：1觸發(fā)hasLayout屬性。Zoom用于設(shè)置或檢索元素的縮放比例，值為“1”即使用元素的實(shí)際尺寸。

IFC —— 行內(nèi)格式化上下文

（1）創(chuàng)建方式：

和BFC相比，它的創(chuàng)建方式是被動(dòng)的、隱式的，是由所包含的子元素來(lái)創(chuàng)建：只有在一個(gè)區(qū)域內(nèi)僅包含可水平排列的元素時(shí)才會(huì)生成，這些子元素可以是文本、inline-level元素或inline-block-level元素。

（2）特性：

IFC內(nèi)部的元素，按從左到右、從上到下的順序排布；

IFC內(nèi)部的每個(gè)元素，都可以通過(guò)設(shè)置vertical-align屬性，來(lái)調(diào)整在垂直方向上的對(duì)齊；

包含這些內(nèi)部元素的矩形區(qū)域，形成的每一行，被稱(chēng)為line box（行框）。

6. 選擇器優(yōu)先級(jí)

！important>行內(nèi)樣式>id選擇器>類(lèi)選擇器>標(biāo)簽選擇器>通配符>繼承

權(quán)重算法：(0,0,0,0) ——> 第一個(gè)0對(duì)應(yīng)的是important的個(gè)數(shù)，第二個(gè)0對(duì)應(yīng)的是id選擇器的個(gè)數(shù)，第三個(gè)0對(duì)應(yīng)的類(lèi)選擇器的個(gè)數(shù)，第四個(gè)0對(duì)應(yīng)的是標(biāo)簽選擇器的個(gè)數(shù)，合起來(lái)就是當(dāng)前選擇器的權(quán)重。

比較：先從第一個(gè)0開(kāi)始比較，如果第一個(gè)0大，那么說(shuō)明這個(gè)選擇器的權(quán)重高，如果第一個(gè)相同，比較第二個(gè)，依次類(lèi)推。

7. 怎么實(shí)現(xiàn)水平垂直居中

（1）行內(nèi)元素的水平居中

text-align: center;
line-height: 100px;

（2）塊級(jí)元素水平居中

margin: 0 auto;

（3）已知高度寬度元素的水平垂直居中

利用絕對(duì)定位和負(fù)邊距實(shí)現(xiàn)

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
}

利用絕對(duì)定位和margin

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

（4）未知高度和寬度元素的水平垂直居中

被居中的元素是inline或者inline-block元素

.container{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

css3的transform屬性

.container{
    width: 100%;
    height: 600px;
    position: relative;
}
.center{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex布局

.container{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

最簡(jiǎn)單的寫(xiě)法：

.container{
    display: flex;
    height: 600px;
}
.center{
    margin : auto;
}

8. 實(shí)現(xiàn)左邊定寬，右邊自適應(yīng)布局

（1）左盒子左浮動(dòng)，右盒子width=100%

（2）左盒子左浮動(dòng)，右盒子margin-left=左盒子寬度

（3）左盒子左浮動(dòng)，右盒子右浮動(dòng)，設(shè)置width: calc（100% - 左盒子寬度）

（4）父容器設(shè)置display：flex，右盒子flex：1

9. 實(shí)現(xiàn)中間自適應(yīng)寬度，左右兩欄固定寬度布局

兩招搞定三欄布局——圣杯布局、雙飛翼布局

10. 脫離文檔流

(1) 浮動(dòng)脫離文檔流：使用float脫離文檔流時(shí)，其他盒子會(huì)無(wú)視這個(gè)元素，但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置，環(huán)繞在周?chē)?

(2) 絕對(duì)定位脫離文檔流：使用absolute: position | fixed 脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會(huì)無(wú)視它。

11. CSS3新特性

顏色：新增RGBA、HSLA模式

文字陰影(text-shadow)

邊框：圓角（border-radius）邊框陰影：box-shadow

盒子模型：box-sizing

背景：background-size設(shè)置背景圖片的尺寸，background-origin設(shè)置背景圖片的原點(diǎn)，background-clip設(shè)置背景圖片的裁剪區(qū)域，以“，”分隔可以設(shè)置多背景，用于自適應(yīng)布局

漸變：linear-gradient、radial-gradient

過(guò)渡：transition可實(shí)現(xiàn)動(dòng)畫(huà)

自定義動(dòng)畫(huà)

在CSS3中唯一引入的偽元素是::selection

多媒體查詢(xún)、多欄布局

border-image

2D轉(zhuǎn)換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)

3D轉(zhuǎn)換

12. display:none;與visibility:hidden的區(qū)別是什么？

(1) display:none; HTML元素（對(duì)象）的寬高，高度等各種屬性值都將“丟失”,視為不存在，而且不加載。

(2) visibility:hidden; HTML元素（對(duì)象）僅僅是在視覺(jué)上看不見(jiàn)（完全透明），而它所占據(jù)的空間位置仍然存在，也即是說(shuō)它仍然具有高度，寬度等屬性值。

13. 響應(yīng)式布局原理

媒體查詢(xún)，查詢(xún)到當(dāng)前屏幕(媒介媒體)的寬度，針對(duì)不同的屏幕寬度設(shè)置不同的樣式來(lái)適應(yīng)不同屏幕。

14. flex布局

flex布局可以看阮一峰老師的這兩篇文章： Flex 布局教程：語(yǔ)法篇 ， Flex 布局教程：實(shí)例篇 ，講的非常詳細(xì)。

（1）設(shè)置在容器上的屬性

flex-direction：row | row-reverse | column | column-reverse 項(xiàng)目的排列方向

flex-wrap：nowrap | wrap | wrap-reverse 是否換行

flex-flow： || flex-direction和 flex-wrap的簡(jiǎn)寫(xiě)

justify-content：flex-start | flex-end | center | space-between | space-around 在水平方向上的對(duì)齊方式

align-items: flex-start | flex-end | center | baseline | stretch 定義在垂直方向上的對(duì)齊方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch 定義了多根軸線(xiàn)的對(duì)齊方式，如果項(xiàng)目只有一根軸線(xiàn)，那么該屬性將不起作用(item有多行時(shí))

（2）設(shè)置在項(xiàng)目上的屬性

order： 定義項(xiàng)目在容器中的排列順序，數(shù)值越小，排列越靠前，默認(rèn)值為 0

flex-basis： | auto 定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間，瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間

flex-grow: 定義項(xiàng)目的放大比例。默認(rèn)值為 0，即如果存在剩余空間，也不放大

flex-shrink: 定義項(xiàng)目的縮小比例。默認(rèn)值: 1，即如果空間不足，該項(xiàng)目將縮小，負(fù)值對(duì)該屬性無(wú)效。

flex：none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě) 默認(rèn)值：0 1 auto， 即不放大，可縮小，大小就是項(xiàng)目本身的大小。

align-self：auto | flex-start | flex-end | center | baseline | stretch 允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式

之后仍會(huì)繼續(xù)更新...

關(guān)于HTTP方面的相關(guān)知識(shí)，可以看我總結(jié)的這篇文章： HTTP協(xié)議知識(shí)點(diǎn)總結(jié)

JavaScript相關(guān)的基礎(chǔ)知識(shí)可以看這兩篇思維導(dǎo)圖： 你不知道的JavaScript（上卷） ， 你不知道的JavaScript（中卷）第一部分

中卷第二部分和下卷還在整理中。