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