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

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

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

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

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

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

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

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

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

　　HTML&CSS：

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

　　JavaScript：

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

　　其他：

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

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

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

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

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

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

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

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

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

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

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

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

　　HTML

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

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

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

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

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

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

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

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

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

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

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

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

　　(3)知名的空元素：

　　

---

　　鮮為人知的是：

　　

高級中級

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

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

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

　　(3)import只在IE5以上才能識別，而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不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。

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

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

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

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

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

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

　　css

　　.bb{

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

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

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

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

　　}

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

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

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

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

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

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

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

　　* Chrome 中文界面下默認(rèn)會將小于 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)于圖像，位置，存儲，多任務(wù)等功能的增加。

　　* 繪畫 canvas

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

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

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

　　語意化更好的內(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;

　　對可用性產(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)化，便于對瀏覽器、搜索引擎解析;

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

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

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

　　HTML5的離線儲存?

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

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

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

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

、

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

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

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

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

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

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

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

面試題目及答案07-31

java筆試題目及答案07-27

面試題目及答案07-25