前端開發面試題整理——摘自github
原作者：https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers
HTML部分
- Doctype作用?標準模式與兼容模式各有什麼區別?
1）<!DOCTYPE>聲明位於HTML文檔中的第一行，處於<html>標籤之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
2）標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點無法工作 - HTML5 爲什麼只需要寫 <!DOCTYPE HTML>?
1）HTML5 不基於 SGML(標準通用標記語言)，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行)。
2）HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
- 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些?
1）塊級元素獨佔一行，可以設置寬和高。
2）行內元素與其他元素同處一行，無法設置寬和高。a b span img input select strong。
3）行內塊元素不能獨佔一行，但是可以設置寬和高。img input。
4）空元素指的是沒有內容的HTML元素,他不可能有子節點，hr br input 。 - 頁面導入樣式時，使用link和@import有什麼區別?
1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用於加載CSS。
2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載。
3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題。
4）link支持使用js控制DOM去改變樣式，而@import不支持。
5）@import 爲CSS服務；link是爲當前的頁面服務
<link href="xx.css" rel="stylesheet" type="text/css">
@import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");
<link>http://www.163.com/a.htm</link>
5. 介紹一下你對瀏覽器內核的理解?
1）主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
2）渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
3）JS引擎則：解析和執行javascript來實現網頁的動態效果。
4） 最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
6. 常見的瀏覽器內核有哪些?
| 內核名稱 | 別名 | 瀏覽器 |
| Trident | MSHTML | IE,MaxThon,TT,The World,360,搜狗瀏覽器 |
| Gecko | FF,MozillaSuite,SeaMonkey | |
| Presto | Opera7及以上(現在爲Blink) | |
| Webkit | Safari,Chrome[Chrome的：Blink（WebKit的分支)] |
7. html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5?
HTML5新特性：
1）語義化標籤<header></header> <nav></nav>
2）多媒體標籤<video></video> <audio></audio>
3）圖像效果，用於繪畫的 canvas 元素，svg元素
4）提供了sessionStorage、localStorage和indexedDB加強本地存儲
5）提供了Geolocation API訪問地理位置，window.navigator.geolocation實現訪問
6）表單新的輸入型控件，calendar、date、time、email、url、search
移除的元素：
1）純表現的元素：basefont，big，center，font, s，strike，tt，u;
2） 對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標籤：
1）IE8/IE7/IE6支持通過document.createElement方法產生的標籤,可以利用這一特性讓這些瀏覽器支持HTML5新標籤, 瀏覽器支持新標籤後，還需要添加標籤默認的樣式。
2）直接使用成熟的框架,比如html5shim
如何區分HTML5：
DOCTYPE聲明\新增的結構元素\功能元素
8. 簡述一下你對HTML語義化的理解
用正確的標籤做正確的事情。
1）html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析。
2）即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且容易閱讀。
3）搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO。
4）使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
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的離線儲存資源進行管理和加載的?
1）在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源並進行離線存儲。
2）離線的情況下，瀏覽器就直接使用離線存儲的資源。