目錄
7.行內（內聯）元素有哪些？塊級元素有哪些？空(void)元素有那些？
8.頁面導入樣式時，使用link和@import有什麼區別？
1.<!DOCTYPE>標籤的作用？
<!DOCTYPE>聲明位於HTML文檔的第一行，告知瀏覽器用哪種HTML或XHTML規範解析文檔。DOCTYPE不存在或者格式不正確會導致文檔以兼容模式呈現。使用時只需要寫<!DOCTYPE HTML>，這個屬性會誒瀏覽器識別並使用，會以標準模式解析渲染頁面。
2.標準模式和兼容模式的區別？
Standards（標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而Quirks（兼容）模式（也就是鬆散呈現模式或者怪異模式）用於呈現爲傳統瀏覽器而設計的網頁。
標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。
兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點無法工作。簡單說就是儘可能的顯示能顯示的東西給用戶看。
具體區別：
（1）盒模型 在嚴格模式中 ：width是內容寬度 ，元素真正的寬度 = width; 在兼容模式中 ：width則是=width+padding+border
（2）兼容模式下可設置百分比的高度和行內元素的高寬 在Standards模式下，給span等行內元素設置wdith和height都不會生效，而在兼容模式下，則會生效。 在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置高度，子元素設置一個百分比的高度是無效的。
（3）用margin:0 auto設置水平居中在IE下會失效 使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下卻會失效（用text-align屬性解決） body{text-align:center};#content{text-align:left} 4.兼容模式下Table中的字體屬性不能繼承上層的設置，white-space:pre會失效，設置圖片的padding會失效。
3.對瀏覽器內核的理解？
瀏覽器內核主要分爲兩部分：渲染引擎和JS引擎。
渲染引擎（layout engine或rendering engine）：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。 最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
4.常見的瀏覽器及其內核？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink]
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
5.對HTML語義化的理解？
用正確的標籤做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
6.cookies，sessionStorage和localStorage 的區別？
cookies：網站爲了標識用戶身份而存儲在用戶本地終端（client）上的數據，通常經過加密。在設置的cookie過期時間之前一直有效，即使瀏覽器或者窗口關閉。每個域名存儲量較小（約4k），所有域名的存儲量有限制（約4k），有個數限制，會隨請求發送的服務器，在瀏覽器和服務器之間來回傳遞。
sessionStorage：只在session內有效，在當前瀏覽器窗口關閉後自動刪除，存儲量更大（沒有限制，但各瀏覽器設置不同），僅在本地保存。
localStorage：永久存儲，瀏覽器關閉後數據不會丟失（除非主動刪除），單個域名存儲量較大（約5MB，各瀏覽器不同），總體數量沒有限制，僅在本地保存。
7.行內（內聯）元素有哪些？塊級元素有哪些？空(void)元素有那些？
每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值爲“block”，則爲“塊級”元素；span默認display屬性值爲“inline”，是“行內”元素。
行內元素：會在水平方向排列，不能包含塊級元素，設置width、height無效(可以設置line-height)，margin、padding上下無效。 塊級元素：各佔據一行，垂直方向排列，可以包含行內元素。塊級元素的 width 默認爲 100%，而內聯元素則是根據其自身的內容或子元素來決定其寬度。
（1）行內元素有：a、abbr、acronym、b、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、samp、select、small、span、s、del、strike、strong、sub、sup、textarea、tt、u、var等
（2）塊級元素：address、blockquote、center、dir、div、p、table、dl、ul、ol、li、fieldset、form、form、*hn、hr、menu、noframes、frames、noscript、 pre等
（3）常見的空元素： <br><hr> <img> <input> <link><meta>
8.頁面導入樣式時，使用link和@import有什麼區別？
（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS,定義rel連接屬性等作用；而@import是CSS提供的，只能用於加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
9.HTML5新特性？新標籤的瀏覽器兼容性問題？
處理HTML5新標籤的瀏覽器兼容問題：
當在頁面中使用HTML5新標籤時，可能會得到三種不同的結果：
結果1：新標籤被當作錯誤處理並被忽略，在DOM構建時會當作這個標籤不存在。
結果2：新標籤被當作錯誤處理，並在DOM構建時，這個新標籤會被構造成行內元素。
結果3：新標籤被識別爲HTML5標籤，然後用DOM節點對其進行替換。
不能識別HTML5新標籤而不能使用，解決辦法有兩種：
方法1：實現標籤被識別 通過document.createElement（tagName）方法即可讓瀏覽器識別新標籤，瀏覽器支持新標籤後，還可以爲新標籤添加CSS樣式。
方法2：JavaScript解決方案
使用html5shim：在<head>中調用以下代碼：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
使用kill IE6：在</body>之前調用以下代碼：
<!--if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->
10.HTML5的離線儲存怎麼使用，工作原理？
在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
（1）頁面頭部像下面一樣加入一個manifest的屬性；
（2）在cache.manifest文件的編寫離線存儲的資源；
CACHEMANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
//offline.html
（3）在離線狀態時，操作window.applicationCache進行需求實現。