前言

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

HTML部分

1. 什麼是<!DOCTYPE>？

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：

<input id="name">  
<input type="button" id="btn" value="提交">

<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
           var name=$("#name").val();    
            localStorage.setItem("name", name); //儲存需要的資訊 
        });     
   });    
</script>  
複製程式碼

標籤頁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);    
});  
複製程式碼

CSS部分

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）在浮動元素下方新增一個非浮動元素

<div>
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
    <div style="clear:both;"></div>
</div>
複製程式碼

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

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

<div style="float:left;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>
複製程式碼

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

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

<div style="overflow: hidden;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>
複製程式碼

缺點：一個是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> 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：<number> 定義專案在容器中的排列順序，數值越小，排列越靠前，預設值為 0
• flex-basis：<length> | auto 定義了在分配多餘空間之前，專案佔據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多餘空間
• flex-grow: <number> 定義專案的放大比例。預設值為 0，即如果存在剩餘空間，也不放大
• flex-shrink: <number> 定義專案的縮小比例。預設值: 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 允許單個專案有與其他專案不一樣的對齊方式

---

之後仍會繼續更新...