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)邊距和邊框(元素默認(rèn)效果)。
border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
5. Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
(Q1) 告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。
(Q2) 標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中,頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
6. HTML5 為什么只需要寫 < Doctype html>?
HTML5不基于 SGML,因此不需要對DTD進(jìn)行引用;但是需要doctype來規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行)。 而HTML4.01基于SGML,所以需要對DTD進(jìn)行引用,才能告知瀏覽器文檔所使用的文檔類型。
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引擎
渲染引擎:負(fù)責(zé)取得網(wǎng)頁的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計(jì)算網(wǎng)頁的顯示方式,然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同,所以渲染的效果也不相同。 所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則:解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果。 最開始渲染引擎和JS引擎并沒有區(qū)分的很明確,后來JS引擎越來越獨(dú)立,內(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(rèn)的樣式。 也可以直接使用成熟的框架、比如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)站分塊,便于閱讀維護(hù)理解。
11 ##常見兼容性問題?
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 100px;}
這種情況之下IE會產(chǎn)生20px的距離,解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別) 漸進(jìn)識別的方式,從總體中逐漸排除局部。
首先,巧妙的使用“”這一標(biāo)記,將IE游覽器從所有情況中分離出來。 接著,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經(jīng)獨(dú)立識別。 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屬性.
解決方法:(條件注釋)缺點(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 {}
12.HTML5的離線儲存,描述一下 cookies,
sessionStorage 和 localStorage 的區(qū)別?
cookie在瀏覽器和服務(wù)器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大;
sessionStorage和localStorage有更多豐富易用的接口;
sessionStorage和localStorage各自獨(dú)立的存儲空間;
CSS一、 介紹一下CSS的盒子模型?
(1)有兩種, IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型;IE的content部分包含了 border 和 pading;
(2)盒模型: 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框 (border).
在web前端工程師求職者的面試中,回答面試題很重要,準(zhǔn)備一份優(yōu)秀的面試自我介紹也相當(dāng)重要。
web前端工程師面試自我介紹范文(一)
您好,我是20XX年畢業(yè)于東莞理工學(xué)院計(jì)算機(jī)科學(xué)技術(shù)專業(yè)的。
大學(xué)四年時間,我主要學(xué)習(xí)的是關(guān)于C語言、C 、JAVA等編程書籍以及軟件,熟悉JAVA的Struts框架。曾經(jīng)在某電子科技公司完成了手機(jī)刷卡器的開發(fā)工作,主要完成了注冊、應(yīng)用等一系列流程。
隨著觸摸屏手機(jī)的普及,蘋果、三星、HTC手機(jī)越來越流行。手機(jī)應(yīng)用開發(fā)越來越手歡迎,很多手機(jī)游戲、應(yīng)用造就了一大批軟件開發(fā)公司的出現(xiàn)。至于為什么讀這個專業(yè)呢,就是因?yàn)檫@些手機(jī)游戲與應(yīng)用吸引了我,所以大學(xué)四年,我一直鉆研手機(jī)的軟件開發(fā),最自豪的是,曾經(jīng)開發(fā)過一款手機(jī)游戲,一個月的下載量達(dá)到幾十萬。而正是如此,因?yàn)樽约核龅臇|西,受到了別人的肯定,一直鼓勵著喔,不斷開發(fā)新的吸引人的軟件。
web前端工程師面試自我介紹范文(二)
我叫王海艷,是一名即將于20XX年7月畢業(yè)于長春大學(xué)計(jì)算科學(xué)與技術(shù)專業(yè)的學(xué)生。借此擇業(yè)之際,我懷著一顆赤誠的心和對事業(yè)的執(zhí)著追求,真誠地推薦自己。
我熱愛這個專業(yè),并投入熱情和努力。在校期間,我掌握了扎實(shí)的專業(yè)基礎(chǔ)知識,學(xué)習(xí)數(shù)學(xué)和計(jì)算機(jī)的基礎(chǔ)知識,培養(yǎng)了邏輯思維能力和認(rèn)真細(xì)心的學(xué)習(xí)態(tài)度,并完成了各項(xiàng)學(xué)習(xí)任務(wù)。由于我對java編程語言特別感興趣,我利用課余時間參加了吉軟國際軟件工程師實(shí)訓(xùn)的培訓(xùn)班,專業(yè)的進(jìn)行java編程方面的學(xué)習(xí)。主要學(xué)習(xí)了java核心技術(shù)、oracle數(shù)據(jù)庫的相關(guān)操作和使用、jdbc連接數(shù)據(jù)庫、web編程ssh框架,還做過幾個項(xiàng)目,具備java開發(fā)的基礎(chǔ)能力;此外,我順利通過了國家英語四級考試,具備良好的聽說讀寫能力。
在學(xué)習(xí)上我一絲不茍,工作上我也任勞任怨,爭創(chuàng)佳績。我曾擔(dān)任班上團(tuán)支書,成功策劃了班上的一系列團(tuán)日活動,獲得一致好評,我組織的團(tuán)日活動被評為十佳團(tuán)日活動之一,我也被評為“優(yōu)秀團(tuán)干部”,這為提高我的交際能力和培養(yǎng)我的團(tuán)隊(duì)合作精神打下了良好基礎(chǔ)。
在2014年10月到2014年2月這段期間,我曾在文思海輝技術(shù)有限公司vmware測試組實(shí)習(xí),我負(fù)責(zé)的主要工作是根據(jù)測試的需求搭建德語系統(tǒng),并在德語平臺上根據(jù)case對vm的產(chǎn)品做一些測試。
大學(xué)畢業(yè),既是一個終點(diǎn),更是一個起點(diǎn)。現(xiàn)在,我滿懷信心地踏上了人生的新臺階,熱忱地希望有一個讓我發(fā)揮潛力和展現(xiàn)價(jià)值的舞臺。盼望貴單位給我一個機(jī)會,我將全力以赴,用滿腔的熱情和辛勤的汗水,奉獻(xiàn)自己的青春和才華!
web前端工程師面試自我介紹范文(三)
我叫,今年7月畢業(yè)于唐山師范學(xué)院計(jì)算機(jī)專業(yè),獲計(jì)算機(jī)學(xué)士學(xué)位。從考入大學(xué)那天起我一直努力學(xué)習(xí),在大學(xué)生活中培養(yǎng)了良好的學(xué)習(xí)習(xí)慣,所學(xué)的課程包括了從計(jì)算機(jī)的基礎(chǔ)知識到運(yùn)用等許多方面。通過對這些知識的學(xué)習(xí),我對這個領(lǐng)域的相關(guān)知識有了一定程度的理解和掌握。并做了大量的實(shí)踐,進(jìn)一步加深了對計(jì)算機(jī)的認(rèn)識。在學(xué)好基礎(chǔ)知識的同時還注重多方面全面發(fā)展,多次參加了學(xué)校的各種活動,在實(shí)習(xí)過程中將理論與實(shí)踐結(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)濟(jì)的誕臨,社會將更加需要“專業(yè)突出,素質(zhì)全面”的復(fù)合性 人才 。因此,課外我還積極投身于各種班級、學(xué)院及社交活動。從不同層次、不同角度鍛煉自己,自己的組織、管理能力及團(tuán)隊(duì)合作精神有很大提高。
回顧大學(xué)幾年來,我學(xué)到的最有用的知識是:自信與自學(xué)!體會最深的一句話就是:天下無難事,只怕有心人!
看過“web前端工程師面試題及答案”的人還看了: