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

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

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

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

　　題目類型： 技術(shù)視野、項(xiàng)目細(xì)節(jié)、理論知識(shí)題，算法題，開放性題，案例題。

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

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

　　資深的工程師能把a(bǔ)bsolute和relative弄混，這樣的人不要也罷，因?yàn)閳F(tuán)隊(duì)需要的你這個(gè)人具有可以依靠的才能(靠譜)。

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

　　HTML&CSS：

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

　　JavaScript：

　　數(shù)據(jù)類型、面向?qū)ο蟆⒗^承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內(nèi)存泄漏、事件機(jī)制、異步裝載回調(diào)、模板引擎、Nodejs、JSON、ajax等。

　　其他：

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

　　作為一名前端工程師，無論工作年頭長(zhǎng)短都應(yīng)該必須掌握的知識(shí)點(diǎn)：

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

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

　　3、事件 —— 如何使用事件，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別。

　　4、XMLHttpRequest —— 這是什么、怎樣完整地執(zhí)行一次GET請(qǐng)求、怎樣檢測(cè)錯(cuò)誤。

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

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

　　7、塊級(jí)元素與行內(nèi)元素 —— 怎么用CSS控制它們、以及如何合理的使用它們

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

　　9、HTML與XHTML——二者有什么區(qū)別，你覺得應(yīng)該使用哪一個(gè)并說出理由。

　　10、JSON —— 作用、用途、設(shè)計(jì)結(jié)構(gòu)。

　　HTML

　　Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分?它們有何意義?

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

　　用什么文檔類型 規(guī)范來解析這個(gè)文檔。

　　(2)、嚴(yán)格模式的排版和 JS 運(yùn)作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。

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

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

　　行內(nèi)元素有哪些?塊級(jí)元素有哪些? 空(void)元素有那些?

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

　　比如div默認(rèn)display屬性值為“block”，成為“塊級(jí)”元素;

　　span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。

　　(2)行內(nèi)元素有：a b span img input select strong(強(qiáng)調(diào)的語氣)

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

　　(3)知名的空元素：

　　

---

　　鮮為人知的是：

　　

高級(jí)中級(jí)

　　link 和@import 的區(qū)別是?

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

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

　　(3)import只在IE5以上才能識(shí)別，而link是XHTML標(biāo)簽，無兼容問題;

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

　　瀏覽器的內(nèi)核分別是什么?

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

　　常見兼容性問題?

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

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

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

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

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

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

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

　　接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識(shí)別。

　　css

　　.bb{

　　background-color:#f1ee18;/*所有識(shí)別*/

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

　　+background-color:#a200ff;/*IE6、7識(shí)別*/

　　_background-color:#1e0bd1;/*IE6識(shí)別*/

　　}

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

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

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

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

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

　　Firefox下,event對(duì)象有pageX,pageY屬性,但是沒有x,y屬性.

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

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

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

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

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

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

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

　　* 繪畫 canvas

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

　　本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;

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

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

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

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

　　* 移除的元素

　　純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;

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

　　支持HTML5新標(biāo)簽：

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

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

　　瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)�認(rèn)的樣式：

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

　　

　　

　　

　　如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

　　語義化的理解?

　　用正確的標(biāo)簽做正確的事情!

　　html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析;

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

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

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

　　HTML5的離線儲(chǔ)存?

　　localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;

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

　　(寫)描述一段語義的html代碼吧。

　　(HTML5中新增加的很多標(biāo)簽(如：

、

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

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

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

外貿(mào)筆試題目及答案07-17

編導(dǎo)筆試題目及答案08-16

報(bào)社筆試題目及答案09-19

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

面試題目及答案07-31

java筆試題目及答案07-27

面試題目及答案07-25