吊打面試官系列之面試大全
html部分
（1）Doctype的作用？嚴格模式與混雜模式如何區分？他們有什麼意義？
①doctype宣告位於HTML文件中的第一行，處於html標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。如果沒有doctype或格式不正確會導致文件以相容模式呈現。
②標準模式的排版和js運作模式都是以該瀏覽器的最高模式執行。相容模式中，頁面以寬鬆的向後相容，模擬老瀏覽器的行為，防止站點無法工作。
③Doctype意義就是作用，可以自己編一編，沒想出來怎麼扯。
（2）HTML5為什麼只寫<!DOCTYPE HTML>
HTML5不基於SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為，按它們應該的方式來執行。
（3）行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
①行內元素有：a b span img input select strong（強調的語氣）
②塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
③常見空元素：<br> <hr> <img> <input> <link> <meta>不常見的就不給你見了，見了反而不常見了（自行百度）
（4）頁面匯入樣式時，使用link和@import有什麼區別？
①link屬於XHTML標籤，除了載入css外，還能用於定義RSS，定義rel連線屬性等作用；而@import是css提供的，只能用於載入css。
②頁面載入時，link會非同步載入，而@imporrt引用的css會等到頁面載入完畢再載入。
③import是css2提出的，IE5以上被識別（現在基本沒有IE5以下的瀏覽器了...），link無相容問題。
（5）html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
①HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。繪畫 canvas;用於媒介回放的 video 和 audio 元素;本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;sessionStorage 的資料在瀏覽器關閉後自動刪除;
語意化更好的內容元素，比如 article、footer、header、nav、section;
表單控制元件，calendar、date、time、email、url、search;
新的技術webworker, websockt, Geolocation;
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；
支援HTML5新標籤：
IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式。
當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
* 如何區分： DOCTYPE宣告\新增的結構元素\功能元素
（6）對HTML語義化的理解？
（7）HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
使用者沒有與因特網連線時，可以正常訪問站點或者應用，在與因特網連線時，更新使用者機器上的快取檔案。
原理：HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示。具體比較複雜（問到的話你肯定是面試的 大公司，要麼就是面試官拿來裝逼的。）
（8）請描述一下 cookies，sessionStorage 和 localStorage 的區別？
①cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）。
cookie資料始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。
sessionStorage和localStorage不會自動把資料發給伺服器，僅在瀏覽器本地儲存。
②儲存大小：
cookie資料大小不能超過4k。
sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。
③有期時間：
localStorage 儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
sessionStorage 資料在當前瀏覽器視窗關閉後自動刪除。
cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉
（9）iframe有那些缺點？
現在基本沒人用iframe了，都是單頁面（SPA）的時代，MVVM框架。
（10）HTML5的form如何關閉自動完成功能？
給不想要提示的form或某個input設定為autocomplete=off
（11）如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
可以使用localStorage、cookie等本地儲存方式
（12）webSocket如何相容低瀏覽器？
比較複雜，找了個看上去靠譜的
css部分
（1）介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
盒子模型分為內容（content）內邊距（padding）外邊距（margin）邊框（border）
①標準盒子模型：width和height就是content的寬高 box-sizingn：content-box
②IE盒子模型：width和height包含了border和padding和content box-sizingn：border-box
（2）CSS選擇器有哪些？哪些屬性可以繼承？
①選擇器：東西都在裡面
②可繼承：font-size font-family color ul li dl dd dt
（3）CSS優先順序演算法如何計算？
正常情況下id>class>元素選擇器，外聯樣式低於行內樣式，！important（不到萬不得已不用）最高。這只是正常情況下css優先順序。其中有一套優先順序計算方式，我只在當初學習的時候見過一次。詳情--->css優先順序詳解
（4）CSS3新增偽類有那些？
新增不新增的其實都是虛的學的時候我都是一起學的，只要會用就行，詳情見（2）①
（5）如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
（1）div絕對定位水平垂直居中
div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }（2）div絕對定位水平垂直定位居中【margin負間距】
div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }（3）div絕對定位水平垂直居中【Transforms變形】
div{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父級的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }（4）css不定寬高水平垂直居中
.box{ height:600px; display:flex; justify-content:center; align-items:center; /* aa只要三句話就可以實現不定寬高水平垂直居中。 */ } .box>div{ background: green; width: 200px; height: 200px; }（5）將父盒子設定為table-cell元素，可以使用text-align:center和vertical-align:middle實現水平、垂直居中。比較完美的解決方案是利用三層結構模擬父子結構
<p class="outerBox tableCell"></p> <p class="ok"></p> <p class="innerBox">tableCell</p> <p></p> <p></p> /* table-cell實現居中 將父盒子設定為table-cell元素，設定 text-align:center,vertical-align: middle; 子盒子設定為inline-block元素 */ .tableCell{ display: table; } .tableCell .ok{ display: table-cell; text-align: center; vertical-align: middle; } .tableCell .innerBox{ display: inline-block; }（6）對子盒子實現絕對定位，利用calc計算位置
<p class="outerBox calc"></p> <p class="innerBox">calc</p> <p></p> /*絕對定位，clac計算位置*/ .calc{ position: relative; } .calc .innerBox{ position: absolute; left:-webkit-calc((500px - 200px)/2); top:-webkit-calc((120px - 50px)/2); left:-moz-calc((500px - 200px)/2); top:-moz-calc((120px - 50px)/2); left:calc((500px - 200px)/2); top:calc((120px - 50px)/2); }