前端面試題及其總結
HTML5不基於SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為
所以，html5只有一種：<!DOCTYPE> 但是html4.01有三種，分別是strict（不包含展示性和棄用元素，不允許框架集）、transitional（包含展示性和棄用元素，不允許框架集）、frameset（允許框架集）
3、行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？
常見的行內元素有：a，b，span，img（我曾以為是block），input，strong，select
常見的塊級元素有：div、ul（無序）、ol（有序）、li、p等
常見的空元素：<br><hr><link><script>
空元素定義：html元素的內容就是其兩個標籤之間的content，所以，標籤之間沒有內容的就是空元素
4、頁面匯入樣式時，使用link和@import有什麼區別
寫法上：
<link rel="stylesheet" href="路徑" />
<style type="text/css"> @import '路徑' </style> 複製程式碼
本質上：link屬於XHTML標籤，除了載入css之外，還能定義RSS，定義rel連線屬性等作用。而@import是css提供的，只能用於載入css
解析上：link是跟著頁面載入同時載入的，但是@import會等到頁面載入完再載入
相容上：@import IE5以上才能識別，無限制
5、介紹一下你對瀏覽器核心的理解？
主要分為兩部分：
- 渲染引擎
- JS引擎
渲染引擎：取得網頁的內容（html、xml、圖片）、構造cssom樹、計算網頁的顯示方式，比如各元素寬高，然後輸出至顯示器或印表機。
js引擎：解析和執行javascript來實現網頁的動態效果
6、常見的瀏覽器核心有哪些（背記）？
- Trident核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
- Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
- Presto核心：Opera7及以上。[Opera核心原為：Presto，現為：Blink;]
- Webkit核心：Safari,Chrome等。[ Chrome的：Blink（WebKit的分支）]
*Blink是Chrome使用的，webkit的簡化版本，但是效率等都較之前有了提升
詳細文章：瀏覽器核心的解析和對比
7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
實現上：h5不再是SGML的子集。
新特性：主要是關於影象，位置，儲存，多工等功能的增加。
如： 繪畫canvas 用於媒介回放的video和audio元素 本地離線儲存localStorage，長期儲存，瀏覽器關閉之後資料不丟失 sessionStorage的資料在瀏覽器關閉後自動刪除 語意化更好的內容元素，比如 article、footer、header、nav、section 表單控制元件，calendar、date、time、email、url、search; 新的技術webworker, websocket, Geolocation; 移除的元素： 純表現的元素：basefont，big，center，font, s，strike，tt，u; 對可用性產生負面影響的元素：frame，frameset，noframes； 複製程式碼
處理相容性： IE8/IE7/IE6支援通過document.createElement方法產生的標籤，可以利用這一特性讓這些瀏覽器支援HTML5新標籤，瀏覽器支援新標籤後，還需要新增標籤預設的樣式。
也可以使用html5shim，可以讓IE9或更低版本能支援html5
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 複製程式碼
如何區分HTML5： DOCTYPE宣告\新增的結構元素\功能元素
8、對html語義化的理解（瞭解）
- 用正確的標籤做正確的事情。
- html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
- html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
- 搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
- 使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
9、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
在使用者沒有與因特網連線時，可以正常訪問站點或應用，在使用者與因特網連線時，更新使用者機器上的快取檔案。 原理：HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示。
如何使用：
1、頁面頭部像下面一樣加入一個manifest的屬性；
2、在cache.manifest檔案的編寫離線儲存的資源； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
3、在離線狀態時，操作window.applicationCache進行需求實現。
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？（這個比上面重要）
線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。
離線的情況下，瀏覽器就直接使用離線儲存的資源。
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）。
- cookie資料始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。
- sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。
儲存大小：
- cookie資料大小不能超過4k。
- sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：
- localStorage儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
- sessionStorage資料在當前瀏覽器視窗關閉後自動刪除。
- cookie設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉
12、iframe有那些缺點？
- iframe會阻塞主頁面的Onload事件；
- 搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO;
- iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。
- 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
- 動態給iframe新增src屬性值，這樣可以繞開以上兩個問題。
13、Label的作用是什麼？是怎麼用的？
用來關聯某個標籤，可以是表單標籤，也可以是button，這樣就可以直接點選label的範圍來觸發繫結標籤的事件
用法：
14、HTML5的form如何關閉自動完成功能？
自動完成：當你給輸入框輸入內容時，瀏覽器會從之前同名輸入框的歷史記錄中查找出類似的內容並列在輸入框下面。
給form或者該input設定autocomplete=off。
經過實驗，提交之後，歷史記錄才會儲存，當然，必須是name相同的input才會共享歷史記錄