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

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

1. 什么是？

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

文檔解析類型有：

BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。（如果沒有聲明DOCTYPE，默認就是這個模式）

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

2. meta標(biāo)簽

提供給頁面的一些元信息（名稱/值對），有助于SEO。

屬性值：

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

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

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

scheme ： 用于指定要用來翻譯屬性值的方案

3. HTML語義化

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

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

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

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

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

4. 常見的瀏覽器內(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. 簡單介紹對瀏覽器內(nèi)核的理解

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

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

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

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

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

新特性：

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

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

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

(4) 語意化更好的內(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) 對可用性產(chǎn)生負面影響的元素：frame,frameset,noframes;

處理兼容性問題：

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

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

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

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

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

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

9. 漸進增強和優(yōu)雅降級

漸進增強：針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能，達到更好的用戶體驗。

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

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

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

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

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

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

標(biāo)簽頁1：

標(biāo)簽頁2：

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

方法二：使用cookie+setInterval

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

標(biāo)簽頁1：

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

標(biāo)簽頁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)用場景：

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

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

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

塊級元素：div,p,h1,form,ul,li

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

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

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

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

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

（1）水平方向排列，不會自動換行；

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

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

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

行內(nèi)塊級元素在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時，代表該元素有自己的布局，否則代表該元素的布局繼承于父元素。

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

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

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

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

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

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

4. 清除浮動有哪些方式？

（1）在浮動元素下方添加一個非浮動元素

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

（2）將父容器也改成浮動定位

這種方法不用修改HTML代碼，但是缺點在于父容器變成浮動以后，會影響到后面元素的定位，而且有時候，父容器是定位死的，無法變成浮動。

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

缺點：一個是IE6不支持，另一個是一旦子元素的大小超過父容器的大小，就會出顯示問題。

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

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
//兼容ie6：激活父元素的"hasLayout"屬性，讓父元素擁有自己的布局
.clearfix {
    zoom: 1;  //或者height：1%；
}

5. 簡單介紹BFC和IFC

BFC —— 塊級格式化上下文

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

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

浮動元素 float：left/right

position：absolute/fixed

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

overflow不為visible

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

（2）BFC特性

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

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

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

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

計算BFC的高度時，浮動子元素也參與計算，可以解決父元素高度塌陷問題；

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素，反之亦然；

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

（3）應(yīng)用

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

BFC可以包含浮動元素，撐開父元素；

BFC可以阻止元素被浮動元素覆蓋。

（4）BFC與hasLayout

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

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

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

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

（2）特性：

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

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

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

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

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

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

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

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

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

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

（2）塊級元素水平居中

margin: 0 auto;

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

利用絕對定位和負邊距實現(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;
}

利用絕對定位和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;
}

最簡單的寫法：

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

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

（1）左盒子左浮動，右盒子width=100%

（2）左盒子左浮動，右盒子margin-left=左盒子寬度

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

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

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

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

10. 脫離文檔流

(1) 浮動脫離文檔流：使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內(nèi)的文本依然會為這個元素讓出位置，環(huán)繞在周圍。

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

11. CSS3新特性

顏色：新增RGBA、HSLA模式

文字陰影(text-shadow)

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

盒子模型：box-sizing

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

漸變：linear-gradient、radial-gradient

過渡：transition可實現(xiàn)動畫

自定義動畫

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

多媒體查詢、多欄布局

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元素（對象）的寬高，高度等各種屬性值都將“丟失”,視為不存在，而且不加載。

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

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

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

14. flex布局

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

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

flex-direction：row | row-reverse | column | column-reverse 項目的排列方向

flex-wrap：nowrap | wrap | wrap-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: flex-start | flex-end | center | space-between | space-around | stretch 定義了多根軸線的對齊方式，如果項目只有一根軸線，那么該屬性將不起作用(item有多行時)

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

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

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

flex-grow: 定義項目的放大比例。默認值為 0，即如果存在剩余空間，也不放大

flex-shrink: 定義項目的縮小比例。默認值: 1，即如果空間不足，該項目將縮小，負值對該屬性無效。

flex：none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]flex-grow, flex-shrink 和 flex-basis的簡寫 默認值：0 1 auto， 即不放大，可縮小，大小就是項目本身的大小。

align-self：auto | flex-start | flex-end | center | baseline | stretch 允許單個項目有與其他項目不一樣的對齊方式

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

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

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

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