導讀：本文總結了一些優質的前端面試題(多數源於網絡)，初學者閱後也要用心鑽研其中的原理，重要知識需要系統學習，透徹學習，形成自己的知識鏈。萬不可投機取巧，只求面試過關是錯誤的!以下是由本站小編J.L爲您整理推薦的最新前端開發筆試題，歡迎參考閱讀。
面試有幾點需注意：
面試題目： 根據你的等級和職位變化，入門級到專家級：範圍↑、深度↑、方向↑。
題目類型： 技術視野、項目細節、理論知識題，算法題，開放性題，案例題。
進行追問： 可以確保問到你開始不懂或面試官開始不懂爲止，這樣可以大大延展題目的區分度和深度，知道你的實際能力。因爲這種關聯知識是長時期的學習，絕對不是臨時記得住的。
回答問題再棒，面試官(可能是你的直接領導面試)，會考慮我要不要這個人做我的同事?所以態度很重要。(感覺更像是相親)
資深的工程師能把absolute和relative弄混，這樣的人不要也罷，因爲團隊需要的你這個人具有可以依靠的才能(靠譜)。
前端開發面試知識點大綱：
HTML&CSS：
對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML5、CSS3、移動端適應
JavaScript：
數據類型、面向對象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。
其他：
HTTP、安全、正則、優化、重構、響應式、移動端、團隊協作、可維護、SEO、UED、架構、職業生涯
作爲一名前端工程師，無論工作年頭長短都應該必須掌握的知識點：
1、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
2、DOM操作 ——如何添加、移除、移動、複製、創建和查找節點等。
3、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差別。
4、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
5、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。
6、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8以下版本的瀏覽器中的盒模型
7、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們
8、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
9、HTML與XHTML——二者有什麼區別，你覺得應該使用哪一個並說出理由。
10、JSON —— 作用、用途、設計結構。
HTML
Doctype作用? 嚴格模式與混雜模式如何區分?它們有何意義?
(1)、 聲明位於文檔中的最前面，處於 標籤之前。告知瀏覽器的解析器，
用什麼文檔類型 規範來解析這個文檔。
(2)、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。
(3)、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點無法工作。
(4)、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
(1)CSS規範規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，
比如div默認display屬性值爲“block”，成爲“塊級”元素;
span默認display屬性值爲“inline”，是“行內”元素。
(2)行內元素有：a b span img input select strong(強調的語氣)
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
(3)知名的空元素：
鮮爲人知的是：
link 和@import 的區別是?
(1)link屬於XHTML標籤，而@import是CSS提供的;
(2)頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3)import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題;
(4)link方式的樣式的權重 高於@import的權重.
瀏覽器的內核分別是什麼?
* IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera內核原爲Presto，現爲Blink;
常見兼容性問題?
* png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設置的大。
浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 10px;}
這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)
漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“9”這一標記，將IE遊覽器從所有情況中分離出來。
接着，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
css
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
* IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統一通過getAttribute()獲取自定義屬性.
* IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
* 解決方法：(條件註釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪問過後hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
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框架
如何區分： DOCTYPE聲明新增的結構元素功能元素
語義化的理解?
用正確的標籤做正確的事情!
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析;
在沒有樣式CCS情況下也以一種文檔格式顯示，並且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
HTML5的離線儲存?
localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
sessionStorage 數據在瀏覽器關閉後自動刪除。
(寫)描述一段語義的html代碼吧。
(HTML5中新增加的很多標籤(如：
、