最新前端開(kāi)發(fā)筆試題（題目列表+答案 完整版）

　　導讀：本文總結了一些優(yōu)質(zhì)的前端面試題(多數源于網(wǎng)絡(luò ))，初學(xué)者閱后也要用心鉆研其中的原理，重要知識需要系統學(xué)習，透徹學(xué)習，形成自己的知識鏈。萬(wàn)不可投機取巧，只求面試過(guò)關(guān)是錯誤的!以下是由應屆畢業(yè)生網(wǎng)小編J.L為您整理推薦的最新前端開(kāi)發(fā)筆試題，歡迎參考閱讀。

　　面試有幾點(diǎn)需注意：

　　面試題目： 根據你的等級和職位變化，入門(mén)級到專(zhuān)家級：范圍↑、深度↑、方向↑。

　　題目類(lèi)型： 技術(shù)視野、項目細節、理論知識題，算法題，開(kāi)放性題，案例題。

　　進(jìn)行追問(wèn)： 可以確保問(wèn)到你開(kāi)始不懂或面試官開(kāi)始不懂為止，這樣可以大大延展題目的區分度和深度，知道你的實(shí)際能力。因為這種關(guān)聯(lián)知識是長(cháng)時(shí)期的學(xué)習，絕對不是臨時(shí)記得住的。

　　回答問(wèn)題再棒，面試官(可能是你的直接領(lǐng)導面試)，會(huì )考慮我要不要這個(gè)人做我的同事?所以態(tài)度很重要。(感覺(jué)更像是相親)

　　資深的工程師能把absolute和relative弄混，這樣的人不要也罷，因為團隊需要的你這個(gè)人具有可以依靠的才能(靠譜)。

　　前端開(kāi)發(fā)面試知識點(diǎn)大綱：

　　HTML&CSS：

　　對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優(yōu)先級及使用、HTML5、CSS3、移動(dòng)端適應

　　JavaScript：

　　數據類(lèi)型、面向對象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。

　　其他：

　　HTTP、安全、正則、優(yōu)化、重構、響應式、移動(dòng)端、團隊協(xié)作、可維護、SEO、UED、架構、職業(yè)生涯

　　作為一名前端工程師，無(wú)論工作年頭長(cháng)短都應該必須掌握的知識點(diǎn)：

　　1、DOM結構 —— 兩個(gè)節點(diǎn)之間可能存在哪些關(guān)系以及如何在節點(diǎn)之間任意移動(dòng)。

　　2、DOM操作 ——如何添加、移除、移動(dòng)、復制、創(chuàng )建和查找節點(diǎn)等。

　　3、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差別。

　　4、XMLHttpRequest —— 這是什么、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

　　5、嚴格模式與混雜模式 —— 如何觸發(fā)這兩種模式，區分它們有何意義。

　　6、盒模型 —— 外邊距、內邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器中的盒模型

　　7、塊級元素與行內元素 —— 怎么用CSS控制它們、以及如何合理的使用它們

　　8、浮動(dòng)元素——怎么使用它們、它們有什么問(wèn)題以及怎么解決這些問(wèn)題。

　　9、HTML與XHTML——二者有什么區別，你覺(jué)得應該使用哪一個(gè)并說(shuō)出理由。

　　10、JSON —— 作用、用途、設計結構。

　　HTML

　　Doctype作用? 嚴格模式與混雜模式如何區分?它們有何意義?

　　(1)、 聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器的解析器，

　　用什么文檔類(lèi)型 規范來(lái)解析這個(gè)文檔。

　　(2)、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。

　　(3)、在混雜模式中，頁(yè)面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。

　　(4)、DOCTYPE不存在或格式不正確會(huì )導致文檔以混雜模式呈現。

　　行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?

　　(1)CSS規范規定，每個(gè)元素都有display屬性，確定該元素的類(lèi)型，每個(gè)元素都有默認的display值，

　　比如div默認display屬性值為“block”，成為“塊級”元素;

　　span默認display屬性值為“inline”，是“行內”元素。

　　(2)行內元素有：a b span img input select strong(強調的語(yǔ)氣)

　　塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

　　(3)知名的空元素：

　　

---

　　鮮為人知的是：

　　

高級中級

　　link 和@import 的區別是?

　　(1)link屬于XHTML標簽，而@import是CSS提供的;

　　(2)頁(yè)面被加載的時(shí)，link會(huì )同時(shí)被加載，而@import引用的CSS會(huì )等到頁(yè)面被加載完再加載;

　　(3)import只在IE5以上才能識別，而link是XHTML標簽，無(wú)兼容問(wèn)題;

　　(4)link方式的樣式的權重 高于@import的權重.

　　瀏覽器的內核分別是什么?

　　* IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera內核原為Presto，現為Blink;

　　常見(jiàn)兼容性問(wèn)題?

　　* png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.

　　* 瀏覽器默認的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統一。

　　* IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。

　　浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 10px;}

　　這種情況之下IE會(huì )產(chǎn)生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個(gè)符號只有ie6會(huì )識別)

　　漸進(jìn)識別的方式，從總體中逐漸排除局部。

　　首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來(lái)。

　　接著(zhù)，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)，這樣IE8已經(jīng)獨立識別。

　　css

　　.bb{

　　background-color:#f1ee18;/*所有識別*/

　　.background-color:#00deff\9; /*IE6、7、8識別*/

　　+background-color:#a200ff;/*IE6、7識別*/

　　_background-color:#1e0bd1;/*IE6識別*/

　　}

　　* IE下,可以使用獲取常規屬性的方法來(lái)獲取自定義屬性,

　　也可以使用getAttribute()獲取自定義屬性;

　　Firefox下,只能使用getAttribute()獲取自定義屬性.

　　解決方法:統一通過(guò)getAttribute()獲取自定義屬性.

　　* IE下,even對象有x,y屬性,但是沒(méi)有pageX,pageY屬性;

　　Firefox下,event對象有pageX,pageY屬性,但是沒(méi)有x,y屬性.

　　* 解決方法：(條件注釋)缺點(diǎn)是在IE瀏覽器下可能會(huì )增加額外的HTTP請求數。

　　* Chrome 中文界面下默認會(huì )將小于 12px 的文本強制按照 12px 顯示,

　　可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

　　超鏈接訪(fǎng)問(wèn)過(guò)后hover樣式就不出現了 被點(diǎn)擊訪(fǎng)問(wèn)過(guò)的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:

　　L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

　　html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問(wèn)題?如何區分 HTML 和 HTML5?

　　* HTML5 現在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。

　　* 繪畫(huà) canvas

　　用于媒介回放的 video 和 audio 元素

　　本地離線(xiàn)存儲 localStorage 長(cháng)期存儲數據，瀏覽器關(guān)閉后數據不丟失;

　　sessionStorage 的數據在瀏覽器關(guān)閉后自動(dòng)刪除

　　語(yǔ)意化更好的內容元素，比如 article、footer、header、nav、section

　　表單控件，calendar、date、time、email、url、search

　　新的技術(shù)webworker, websockt, Geolocation

　　* 移除的元素

　　純表現的元素：basefont，big，center，font, s，strike，tt，u;

　　對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes;

　　支持HTML5新標簽：

　　* IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標簽，

　　可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

　　瀏覽器支持新標簽后，還需要添加標簽默認的樣式：

　　* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

　　

　　

　　

　　如何區分： DOCTYPE聲明\新增的結構元素\功能元素

　　語(yǔ)義化的理解?

　　用正確的標簽做正確的事情!

　　html語(yǔ)義化就是讓頁(yè)面的內容結構化，便于對瀏覽器、搜索引擎解析;

　　在沒(méi)有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。

　　搜索引擎的爬蟲(chóng)依賴(lài)于標記來(lái)確定上下文和各個(gè)關(guān)鍵字的權重，利于 SEO。

　　使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

　　HTML5的離線(xiàn)儲存?

　　localStorage 長(cháng)期存儲數據，瀏覽器關(guān)閉后數據不丟失;

　　sessionStorage 數據在瀏覽器關(guān)閉后自動(dòng)刪除。

　　(寫(xiě))描述一段語(yǔ)義的html代碼吧。

　　(HTML5中新增加的很多標簽(如：

、

【最新前端開(kāi)發(fā)筆試題題目列表+答案 完整版】相關(guān)文章：

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

中興2013年Java開(kāi)發(fā)筆試題目及答案07-17

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

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

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

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

面試題目及答案07-31

java筆試題目及答案07-27

面試題目及答案07-25