web前端工程師面試題及答案
web前端工程師面試題及答案
面試題在web前端工程師求職者的面試中占有重要的位置，以下是學(xué)習(xí)啦小編為大家整理的：web前端工程師面試題及答案，僅供大家參考!
web前端工程師面試題及答案
1. 常用那幾種瀏覽器測試?有哪些內(nèi)核(Layout Engine)?
(Q1) 瀏覽器：IE，Chrome，F(xiàn)ireFox，Safari，Opera。 (Q2) 內(nèi)核：Trident，Gecko，Presto，Webkit。
2. 說下行內(nèi)元素和塊級元素的區(qū)別?行內(nèi)塊元素的兼容性使用?
(IE8 以下)
行內(nèi)元素：會在水平方向排列，不能包含塊級元素，設(shè)置width無效，height無效(可以設(shè)置line-height)，margin上下無效，padding上下無效。 塊級元素：各占據(jù)一行，垂直方向排列。從新行開始結(jié)束接著一個斷行。 兼容性：display:inline-block;display:inline;zoom:1;
3. 清除浮動有哪些方式?比較好的方式是哪一種?
(1)父級div定義height。
(2)結(jié)尾處加空div標(biāo)簽clear:both。
(3)父級div定義偽類:after和zoom。
(4)父級div定義overflow:hidden。
(5)父級div定義overflow:auto。
(6)父級div也浮動，需要定義寬度。
(7)父級div定義display:table。
(8)結(jié)尾處加br標(biāo)簽clear:both。
總結(jié)：比較好的是第3種方式，簡潔方便。
4. box-sizing常用的屬性有哪些?分別有什么作用? 常用的屬性：box-sizing: content-box border-box inherit;
作用：content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認效果)。
border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
5. Doctype作用?標(biāo)準模式與兼容模式各有什么區(qū)別?
(Q1) 告知瀏覽器的解析器用什么文檔標(biāo)準解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。
(Q2) 標(biāo)準模式的排版和JS運作模式都是以該瀏覽器支持的最高標(biāo)準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
6. HTML5 為什么只需要寫 < Doctype html>?
HTML5不基于 SGML，因此不需要對DTD進行引用;但是需要doctype來規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來運行)。 而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
7. 頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別?
(1)link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的，只能用于加載CSS;
(2)頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面
被加載完再加載;
(3)import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題。
總之，link要優(yōu)于@import。
8. 介紹一下你對瀏覽器內(nèi)核的理解?
IE瀏覽器的內(nèi)核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera內(nèi)核原為Presto
，現(xiàn)為Blink;
內(nèi)核主要分成兩部分：
渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：負責(zé)取得網(wǎng)頁的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。 所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。 最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。
9. html5有哪些新特性?如何處理HTML5新標(biāo)簽的瀏覽器兼容問題?如何區(qū)分 HTML 和 HTML5?
(Q1) HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
(1)繪畫 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
(5)語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section; (6)表單控件，calendar、date、time、email、url、search;
(7)新的技術(shù)webworker, websocket, Geolocation;
(Q2) IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽， 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J的樣式。 也可以直接使用成熟的框架、比如html5shim，
10. 簡述一下你對HTML語義化的理解?
用正確的標(biāo)簽做正確的事情。
1. html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;
2. 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的; 搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;
3. 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。
11 ##常見兼容性問題?
png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
瀏覽器默認的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 100px;}
這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別) 漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“”這一標(biāo)記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。 css .bb{ background-color:#f1ee18;/所有識別
/ .background-color:#00deff; /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屬性.
解決方法：(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。 Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順
序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
12.HTML5的離線儲存，描述一下 cookies，
sessionStorage 和 localStorage 的區(qū)別?
cookie在瀏覽器和服務(wù)器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大;
sessionStorage和localStorage有更多豐富易用的接口;
sessionStorage和localStorage各自獨立的存儲空間;
CSS一、 介紹一下CSS的盒子模型?
(1)有兩種， IE 盒子模型、標(biāo)準 W3C 盒子模型;IE的content部分包含了 border 和 pading;
(2)盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框 (border).
在web前端工程師求職者的面試中，回答面試題很重要，準備一份優(yōu)秀的面試自我介紹也相當(dāng)重要。
web前端工程師面試自我介紹范文(一)
您好，我是20XX年畢業(yè)于東莞理工學(xué)院計算機科學(xué)技術(shù)專業(yè)的。
大學(xué)四年時間，我主要學(xué)習(xí)的是關(guān)于C語言、C 、JAVA等編程書籍以及軟件，熟悉JAVA的Struts框架。曾經(jīng)在某電子科技公司完成了手機刷卡器的開發(fā)工作，主要完成了注冊、應(yīng)用等一系列流程。
隨著觸摸屏手機的普及，蘋果、三星、HTC手機越來越流行。手機應(yīng)用開發(fā)越來越手歡迎，很多手機游戲、應(yīng)用造就了一大批軟件開發(fā)公司的出現(xiàn)。至于為什么讀這個專業(yè)呢，就是因為這些手機游戲與應(yīng)用吸引了我，所以大學(xué)四年，我一直鉆研手機的軟件開發(fā)，最自豪的是，曾經(jīng)開發(fā)過一款手機游戲，一個月的下載量達到幾十萬。而正是如此，因為自己所做的東西，受到了別人的肯定，一直鼓勵著喔，不斷開發(fā)新的吸引人的軟件。
web前端工程師面試自我介紹范文(二)
我叫王海艷，是一名即將于20XX年7月畢業(yè)于長春大學(xué)計算科學(xué)與技術(shù)專業(yè)的學(xué)生。借此擇業(yè)之際，我懷著一顆赤誠的心和對事業(yè)的執(zhí)著追求，真誠地推薦自己。
我熱愛這個專業(yè)，并投入熱情和努力。在校期間，我掌握了扎實的專業(yè)基礎(chǔ)知識，學(xué)習(xí)數(shù)學(xué)和計算機的基礎(chǔ)知識，培養(yǎng)了邏輯思維能力和認真細心的學(xué)習(xí)態(tài)度，并完成了各項學(xué)習(xí)任務(wù)。由于我對java編程語言特別感興趣，我利用課余時間參加了吉軟國際軟件工程師實訓(xùn)的培訓(xùn)班，專業(yè)的進行java編程方面的學(xué)習(xí)。主要學(xué)習(xí)了java核心技術(shù)、oracle數(shù)據(jù)庫的相關(guān)操作和使用、jdbc連接數(shù)據(jù)庫、web編程ssh框架，還做過幾個項目，具備java開發(fā)的基礎(chǔ)能力;此外，我順利通過了國家英語四級考試，具備良好的聽說讀寫能力。
在學(xué)習(xí)上我一絲不茍，工作上我也任勞任怨，爭創(chuàng)佳績。我曾擔(dān)任班上團支書，成功策劃了班上的一系列團日活動，獲得一致好評，我組織的團日活動被評為十佳團日活動之一，我也被評為“優(yōu)秀團干部”，這為提高我的交際能力和培養(yǎng)我的團隊合作精神打下了良好基礎(chǔ)。
在2014年10月到2014年2月這段期間，我曾在文思海輝技術(shù)有限公司vmware測試組實習(xí)，我負責(zé)的主要工作是根據(jù)測試的需求搭建德語系統(tǒng)，并在德語平臺上根據(jù)case對vm的產(chǎn)品做一些測試。
大學(xué)畢業(yè)，既是一個終點，更是一個起點?，F(xiàn)在，我滿懷信心地踏上了人生的新臺階，熱忱地希望有一個讓我發(fā)揮潛力和展現(xiàn)價值的舞臺。盼望貴單位給我一個機會，我將全力以赴，用滿腔的熱情和辛勤的汗水，奉獻自己的青春和才華!
web前端工程師面試自我介紹范文(三)
我叫，今年7月畢業(yè)于唐山師范學(xué)院計算機專業(yè)，獲計算機學(xué)士學(xué)位。從考入大學(xué)那天起我一直努力學(xué)習(xí)，在大學(xué)生活中培養(yǎng)了良好的學(xué)習(xí)習(xí)慣，所學(xué)的課程包括了從計算機的基礎(chǔ)知識到運用等許多方面。通過對這些知識的學(xué)習(xí)，我對這個領(lǐng)域的相關(guān)知識有了一定程度的理解和掌握。并做了大量的實踐，進一步加深了對計算機的認識。在學(xué)好基礎(chǔ)知識的同時還注重多方面全面發(fā)展，多次參加了學(xué)校的各種活動，在實習(xí)過程中將理論與實踐結(jié)合起來，深受學(xué)校老師和同學(xué)的歡迎。
大學(xué)生涯中，我吸取了豐富的專業(yè)知識并鍛煉了自己的能力。通過大學(xué)里的苦讀，我掌握了c語言，匯編語言，編譯原理，powerbuilder，數(shù)據(jù)庫原理， 并對c++v，c++，windows 編程等有一定了解。課外我還自學(xué)了delphi編程，asp動態(tài)網(wǎng)頁及flash動畫，并在大二下學(xué)期獲得“數(shù)據(jù)庫”考試證書。
隨著知識經(jīng)濟的誕臨，社會將更加需要“專業(yè)突出，素質(zhì)全面”的復(fù)合性 人才 。因此，課外我還積極投身于各種班級、學(xué)院及社交活動。從不同層次、不同角度鍛煉自己，自己的組織、管理能力及團隊合作精神有很大提高。
回顧大學(xué)幾年來，我學(xué)到的最有用的知識是：自信與自學(xué)!體會最深的一句話就是：天下無難事，只怕有心人!
看過“web前端工程師面試題及答案”的人還看了：