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

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

1. 什么是？

DOCTYPE是html5標準網頁聲明，且必須聲明在HTML文檔的第一行。來告知瀏覽器的解析器用什么文檔標準解析這個文檔。

文檔解析類型有：

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

CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

2. meta標簽

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

屬性值：

name：名稱/值對中的名稱。author、description、keywords、generator、revised、others。 把 content 屬性關聯到一個名稱。

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

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

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

3. HTML語義化

用正確的標簽做正確的事情。

html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器，搜索引擎解析；

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

搜索引擎的爬蟲也依賴于HTML標記確定上下文和各個關鍵字的權重，利于SEO;

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

4. 常見的瀏覽器內核

Trident內核：IE,MaxThon,TT,The Word,360,搜狗瀏覽器等。

Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；

Presto內核：Opera7及以上。[現為：Blink]

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

5. 簡單介紹對瀏覽器內核的理解

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

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

JS引擎：解析和執行javascript來實現網頁的動態效果。

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

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

新特性：

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

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

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

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

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

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

移除元素：

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

(2) 對可用性產生負面影響的元素：frame,frameset,noframes;

處理兼容性問題：

IE8/IE7/IE6支持document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

7. html5哪些標簽可以做SEO優化？

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

8. src和href的區別

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

href是指網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。

9. 漸進增強和優雅降級

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

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

10. defer和async的區別

defer要等到整個頁面在內存中正常渲染結束（DOM結構完全生成，以及其他腳本執行完成），才會執行。多個defer腳本會按照它們在頁面出現的順序加載。==“渲染完再執行”==

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

11. 如何實現瀏覽器內多個標簽頁之間的通信？

方法一：調用localstorge

標簽頁1：

標簽頁2：

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

方法二：使用cookie+setInterval

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

標簽頁1：

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

標簽頁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標準盒模型 box-sizing:content-box;（標準模式）。

應用場景：

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

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

2. 行內元素和塊級元素的區別？行內塊級元素的兼容性使用？（IE8以下）

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

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

（2）可以包含其他塊級或者行內元素；

（3）高度、行高以及外邊距和內邊距都可控制；

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

行內元素：span,a,label,input,img,strong,em

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

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

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

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

行內塊級元素在IE8以下的兼容性（塊元素模擬inline-block）

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

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

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

3. 頁面導入樣式時，使用link和@import有什么區別？

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

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

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

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

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

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

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

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

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

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

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

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

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

5. 簡單介紹BFC和IFC

BFC —— 塊級格式化上下文

（1）BFC觸發條件：

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

浮動元素 float：left/right

position：absolute/fixed

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

overflow不為visible

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

（2）BFC特性

內部的Box會在垂直方向上一個接一個的放置；

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

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

BFC的區域不會與float的元素區域重疊；

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

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

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

（3）應用

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

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

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

（4）BFC與hasLayout

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

IFC —— 行內格式化上下文

（1）創建方式：

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

（2）特性：

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

IFC內部的每個元素，都可以通過設置vertical-align屬性，來調整在垂直方向上的對齊；

包含這些內部元素的矩形區域，形成的每一行，被稱為line box（行框）。

6. 選擇器優先級

！important>行內樣式>id選擇器>類選擇器>標簽選擇器>通配符>繼承

權重算法：(0,0,0,0) ——> 第一個0對應的是important的個數，第二個0對應的是id選擇器的個數，第三個0對應的類選擇器的個數，第四個0對應的是標簽選擇器的個數，合起來就是當前選擇器的權重。

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

7. 怎么實現水平垂直居中

（1）行內元素的水平居中

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

（2）塊級元素水平居中

margin: 0 auto;

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

利用絕對定位和負邊距實現

.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. 實現左邊定寬，右邊自適應布局

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

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

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

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

9. 實現中間自適應寬度，左右兩欄固定寬度布局

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

10. 脫離文檔流

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

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

11. CSS3新特性

顏色：新增RGBA、HSLA模式

文字陰影(text-shadow)

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

盒子模型：box-sizing

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

漸變：linear-gradient、radial-gradient

過渡：transition可實現動畫

自定義動畫

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

多媒體查詢、多欄布局

border-image

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

3D轉換

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

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

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

13. 響應式布局原理

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

14. flex布局

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

（1）設置在容器上的屬性

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）設置在項目上的屬性

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

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

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 允許單個項目有與其他項目不一樣的對齊方式

之后仍會繼續更新...

關于HTTP方面的相關知識，可以看我總結的這篇文章： HTTP協議知識點總結

JavaScript相關的基礎知識可以看這兩篇思維導圖： 你不知道的JavaScript（上卷） ， 你不知道的JavaScript（中卷）第一部分

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