最新前端開發筆試題題目列表+答案 完整版

最新前端開發筆試題（題目列表+答案 完整版）

　　導讀：本文總結了一些優質的前端面試題(多數源于網絡)，初學者閱后也要用心鉆研其中的原理，重要知識需要系統學習，透徹學習，形成自己的知識鏈。萬不可投機取巧，只求面試過關是錯誤的!以下是由應屆畢業生網小編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:#00deff\9; /*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中新增加的很多標簽(如：

、

【最新前端開發筆試題題目列表+答案 完整版】相關文章：

華為最新面試題目及答案07-20

中興2013年Java開發筆試題目及答案07-17

外貿筆試題目及答案07-17

編導筆試題目及答案08-16

報社筆試題目及答案09-19

文秘筆試題目及答案08-16

面試題目及答案07-31

java筆試題目及答案07-27

面試題目及答案07-25