一、HTML元素分類及其特點
1.行內元素
在一行內顯示，水平方向排列。有默認高度（當前瀏覽器默認字體的高度），沒有默認寬度，元素的大小由包裹內容決定，且不能設置寬高和內外邊距。元素內部不能包含塊級元素。
2.塊級元素
獨占一行，垂直方向排列。可以設置寬高，默認寬度是父元素的100%。可以包含行內元素和塊級元素，但是h系列標簽和p標簽和dt標簽不能包含塊級元素（原因：不符合XHTML嵌套規則）
3.行內塊元素
兼具行內元素和塊級元素的特點，可以設置寬高，在一行內顯示，沒有默認寬度
4.舉例
行內元素：big、small、sub、sup、strong、u、span
塊級元素：div、p、h1~h6、table、ul、li、ol、header、section、aside、footer
行內塊元素：img、input、select、textarea、button
二、瀏覽器的內核有哪些，你對內核的理解
IE: trident內核、Firefox：gecko內核、Safari:webkit內核、Opera:以前是presto內核，Opera現已改用Google Chrome的Blink內核、Chrome:Blink(基於webkit，Google與Opera Software共同開發)
理解：主要分成兩個部分：渲染引擎(Render Engine)和JS引擎。
三、你能描述一下漸進增強和優雅降級之間的不同嗎?
//漸進增強
.transition{
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
//優雅降級
.transition{
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
漸進增強（progressive enhancement）：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。（從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害於基礎瀏覽器的額外樣式和功能。當瀏覽器支持時，它們會自動地呈現出來並發揮作用。）
優雅降級（graceful degradation）：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。（Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了，為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效。）
區別：優雅降級是從復雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的、能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。
四、為什么利用多個域名來存儲網站資源會更有效？
CDN緩存更方便，突破瀏覽器並發限制，節約cookie帶寬，節約主域名的連接數，優化頁面響應速度，防止不必要的安全問題。
五、img標簽上title屬性與alt屬性的區別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少於100個英文字符或者用戶必須保證替換文字盡可能的短。這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。
六、iframe的優缺點？
優點：
a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點：
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務器的http請求
d. 會產生很多頁面，不容易管理。
七、H5的新特性你了解哪些？
HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
拖拽釋放(Drag and drop) API
語義化更好的內容標簽（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；sessionStorage 的數據在瀏覽器關閉后自動刪除
表單控件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation
h5新標簽兼容：
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
八、請描述一下cookies，sessionStorage和localStorage的區別？
相同點：都會在瀏覽器端保存，有大小和同源限制。
不同點：
1、cookie會隨請求發送到服務器，作為會話表示，服務器可修改cookie。web storage不會隨請求發送到服務器。
2、cookie有path的概念，子路徑可以訪問父路徑的cookie，父路徑不可以訪問子路徑的cookie。
3、有效期： cookie在設置的有效期內有效，默認為瀏覽器關閉消失。sessionStorage在會話窗口關閉后失效，localStorage長期有效，需主動刪除。
4、sessionStorage不能共享，localStorage在同源文檔之間可以共享，cookie在同源且符合path規則的文檔之間可以共享。
5、localStorage的修改會觸發其他文檔的update事件。
6、cookie有secure屬性要求HTTPS傳輸。
7、瀏覽器不能保存超過300個cookie，單個服務器不能超過20個，每個cookie不能超過4k。webStorage可以支持5M的存儲。
九、meta viewport是做什么的？怎么用？
- 移動端瀏覽器通常都在一個比屏幕更寬的虛擬窗口中渲染頁面，這個虛擬窗口就是viewport，目的是正常展示沒有做移動端適配的網頁，可以讓他們完整的展現給用戶。我們有時用移動設備訪問桌面版網頁就會看到一個橫向滾動條，這里可顯示區域的寬度就是viewport的寬度。
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
該meta標簽的作用是讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。當然maximum-scale=1.0, user-scalable=0不是必需的，是否允許用戶手動播放根據網站的需求來定，但把width設為width-device基本是必須的，這樣能保證不會出現橫向滾動條。
- meta viewport 的6個屬性：
| width | 設置layout viewport 的寬度，為一個正整數，或字符串”width-device” |
| initial-scale | 設置頁面的初始縮放值，為一個數字，可以帶小數 |
| minimum-scale | 允許用戶的最小縮放值，為一個數字，可以帶小數 |
| maximum-scale | 允許用戶的最大縮放值，為一個數字，可以帶小數 |
| height | 設置layout viewport 的高度，這個屬性並不重要，很少使用 |
| user-scalable | 是否允許用戶進行縮放，值為”no”或”yes”, no 代表不允許，yes代表允許 |
十、a標簽中 active hover link visited 正確的設置順序是什么?
a:link 、a:visited 、a:hover 、a:active
十一、重排（reflow）與重繪（repaint）
（1）瀏覽器從下載文檔到顯示頁面的過程是個復雜的過程，這里包含了重繪和重排
（2）重繪是一個元素外觀的改變所觸發的瀏覽器行為（例如改變visibility，outline，background等屬性），瀏覽器會根據元素的新
屬性重新繪制，是元素呈現新的外觀。
（3）重排時更明顯的一種改變，可以理解為渲染樹需要重新計算。常見的觸發重排的操作：
a.DOM元素的幾何屬性變化
b.DOM樹的結構變化（例如節點的增減、移動）
c.獲取某些屬性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）
d.改變元素的一些樣式（例如調整瀏覽器窗口大小）
（4）重繪不會帶來重新布局，並不一定伴隨着重排。
（5）在實踐中，應該盡量減少重排次數和縮小重排的影響范圍。有以下幾種方法：
a.將多次改變樣式屬性的操作合並成一次操作
b.將需要多次重排的元素，position屬性設為absolute或fixed，使其脫離文檔流，這樣它的變化就不會影響到其他元素
c.在內存中多次操作節點，完成后再添加到文檔中去
d.如果要對一個元素進行復雜的操作，可以將其display屬性設置為none使其隱藏，待操作完成后再顯示
e.在需要經常獲取那些引起瀏覽器重排的屬性值時，要緩存到變量
十二、簡述一下你對HTML語義化的理解
（1）HTML語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析； （2）即使在沒有樣式CSS的情況下也能以一種文檔格式顯示，並且是容易閱讀的； （3）搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，有利於SEO； （4）使閱讀源代碼的人更容易將網站分塊，便於閱讀、維護和理解。