2018前端面試題及答案

　　對(duì)于前端開發(fā)工程師來(lái)說，面試前對(duì)面試題目有了解很有必要，那么你知道2017年的前端面試題嗎?以下是陽(yáng)光網(wǎng)小編幫你們整理的2017前端面試題及答案，一起去看看吧。

　　2018前端面試題及答案(一)

　　1、什么是H5?

　　H5=HTML5，指的是HTML超文本標(biāo)記語(yǔ)言(HTML)的第五次重大修改，HTML的第五代。 HTML5具有的特點(diǎn)：

　　(1)、語(yǔ)義化的標(biāo)簽：好處是網(wǎng)站加載更快;該標(biāo)簽舉例：header、nav、article等。

　　(2)、增加了音頻、視頻標(biāo)簽：好處是取代falsh;該標(biāo)簽舉例：audio、video。

　　(3)、canvas標(biāo)簽：好處在瀏覽器上繪制圖形或動(dòng)畫，取代flash。

　　(4)、支持手機(jī)和平板的響應(yīng)式布局。

　　HTML5的缺點(diǎn)：低版本瀏覽器支持性不好，比如IE9以下的瀏覽器不支持HTML5。

　　2、H5為什么這么火?H5是哪一年產(chǎn)生的?H5會(huì)火多久?

　　(1)、因?yàn)镠5的后臺(tái)很硬，是谷歌(google)和蘋果(Apple)兩大巨頭公司，谷歌和蘋果大力倡導(dǎo)H5的發(fā)展，也是H5的忠實(shí)的支持者和實(shí)踐者(IOS+Android系統(tǒng)占據(jù)手機(jī)市場(chǎng)92.36%)，H5的產(chǎn)生主要目的也是干掉flash，因?yàn)閒lash是adobe公司的，adobe不是W3C組織的成員之一，蘋果和谷歌等萬(wàn)維網(wǎng)聯(lián)盟也不希望在自己的產(chǎn)品中使用加載量過大的flash。

　　(2)、H5是2014年9月份W3C(萬(wàn)維網(wǎng)聯(lián)盟，主要有蘋果和谷歌公司)組織發(fā)布的。

　　(3)、刷臉時(shí)代(這里專指網(wǎng)站用戶體驗(yàn)更加美觀的時(shí)代)+移動(dòng)端時(shí)代(手機(jī)+平板)，會(huì)促使H5會(huì)在未來(lái)的有更加美好的發(fā)展前景，只要有網(wǎng)站，H5就會(huì)很火，UI也就很火，H5的.發(fā)展會(huì)讓UI更加提高用戶的滿意度，H5的火爆時(shí)代，會(huì)促進(jìn)UI更好發(fā)展。

　　(4)、微信的發(fā)展，O2O的促使H5更火。

　　在這里不得不談微信，如果沒有微信，或許今天我們不會(huì)這樣來(lái)討論H5，微信無(wú)意中養(yǎng)成了用戶掃碼的習(xí)慣，并通過公眾號(hào)的內(nèi)容生.產(chǎn)及分發(fā)，以及微信本身已有的龐大的用戶群體及社交屬性，使基于網(wǎng)頁(yè)的內(nèi)容可以快速傳播，真正帶來(lái)了APP即瀏覽器的時(shí)代，取消了輸入內(nèi)容網(wǎng)址的麻煩。以微信為代表的超級(jí)社交APP，解決了網(wǎng)頁(yè)內(nèi)容瀏覽及分發(fā)的通路。 H5或許會(huì)沒落，但會(huì)迎來(lái)H6、H7„，只會(huì)變得越來(lái)越好，所以沒必要擔(dān)心H5會(huì)不會(huì)死，當(dāng)下重在實(shí)踐與積累，至少現(xiàn)在，Html5的影響力，會(huì)超出你我的想象，也就意味著H5的好閨蜜UI會(huì)一直火下去。

　　3、什么叫做響應(yīng)式?

　　針對(duì)不用的屏幕顯示不同的網(wǎng)頁(yè)布局，比如說大屏幕手機(jī)、小屏幕手機(jī)、平板能夠適應(yīng)不同的屏幕來(lái)顯示網(wǎng)站。

　　4、針對(duì)不同屏幕的響應(yīng)式，UI設(shè)計(jì)師該做幾套設(shè)計(jì)圖?

　　只做一套，大多UI設(shè)計(jì)師會(huì)使用iPhone5的尺寸來(lái)做一套(640X1136)。那么這種可以適配響應(yīng)式的各種屏幕的嗎?這種在HTML5中通過代碼中的媒體查詢來(lái)實(shí)現(xiàn)。媒體查詢?cè)趺磳?媒體查詢的具體寫法如下：

　　@media screen and (max-width:640px) { //最大寬度是640px的屏幕寬度

　　nav li { //nav標(biāo)簽下的li標(biāo)簽設(shè)置樣式

　　display: inline; //轉(zhuǎn)化為行元素

　　}

　　}

　　2018前端面試題及答案(二)

　　1、div是什么?在div出現(xiàn)之前做網(wǎng)站用什么布局?

　　div是網(wǎng)站布局的盒子標(biāo)簽，div出現(xiàn)是table布局，因?yàn)閠able布局嵌套很多，網(wǎng)站加載慢，布局層級(jí)不清晰。

　　2、html是什么?css是什么?js是什么?

　　(1)、html是超文本標(biāo)記語(yǔ)言，他是做網(wǎng)站時(shí)候用的一些文本標(biāo)記標(biāo)簽，比如div、span等。

　　(2)、css是層疊樣式表，是做網(wǎng)站的時(shí)候給標(biāo)簽來(lái)美化網(wǎng)站的樣式，比如說background(背景)、color(字體顏色)、height(高度)、width(寬度)等。

　　(3)、js=javascript是網(wǎng)站中寫前后臺(tái)交互效果、網(wǎng)頁(yè)動(dòng)畫效果的一種開發(fā)語(yǔ)言，比如鼠標(biāo)點(diǎn)擊事件(click)、前后臺(tái)數(shù)據(jù)請(qǐng)求(ajax)等。

　　3、什么是前端工程師?什么是后端工程師?

　　前端工程師就是指的做靜態(tài)網(wǎng)頁(yè)的工程師：

　　(1)、廣義的前端分為三種：安卓工程師、ios工程師、web前端工程師。

　　(2)、狹義的前端指的是web前端工程師，web前端工程師指的是做靜態(tài)的PC端和手機(jī)端靜態(tài)網(wǎng)頁(yè)的工程師。

　　4、什么是靜態(tài)網(wǎng)頁(yè)?什么叫做動(dòng)態(tài)網(wǎng)頁(yè)?

　　(1)、靜態(tài)網(wǎng)頁(yè)：沒有數(shù)據(jù)交互的`網(wǎng)頁(yè)，沒有數(shù)據(jù)庫(kù)參與，沒有服務(wù)器端數(shù)據(jù)的加載。比如靜態(tài)網(wǎng)頁(yè)就是只有html+css+JavaScript做成的網(wǎng)站。

　　(2)、動(dòng)態(tài)網(wǎng)頁(yè)：有后臺(tái)數(shù)據(jù)參與的網(wǎng)頁(yè)，網(wǎng)頁(yè)中的數(shù)據(jù)是從數(shù)據(jù)庫(kù)取的，需要有后臺(tái)邏輯的支持。比如動(dòng)態(tài)網(wǎng)頁(yè)就是jsp頁(yè)面(后臺(tái)語(yǔ)言是java)、asp頁(yè)面(后臺(tái)語(yǔ)言是asp.net)。

　　5、前端語(yǔ)言有哪些?后端語(yǔ)言有哪些?

　　(1)、前端語(yǔ)言：HTML、css、javascript。

　　(2)、后端語(yǔ)言(服務(wù)器端語(yǔ)言)：php、java、asp.net。最近新出的node.js

　　6、做一個(gè)網(wǎng)站的團(tuán)隊(duì)都需要哪些人?

　　(1)、產(chǎn)品經(jīng)理：設(shè)計(jì)這個(gè)產(chǎn)品，通常就是了解用戶的網(wǎng)站需求，畫原型圖。

　　(2)、項(xiàng)目經(jīng)理：通常是對(duì)整個(gè)產(chǎn)品有一個(gè)整理管理和負(fù)責(zé)，通常是會(huì)代碼技術(shù)的人來(lái)構(gòu)建整個(gè)網(wǎng)站的代碼框架，以后網(wǎng)站實(shí)現(xiàn)的全面管理。

　　(3)、UI設(shè)計(jì)師，通過原型圖畫psd設(shè)計(jì)圖的。

　　(4)、前端工程師，根據(jù)設(shè)計(jì)圖來(lái)做靜態(tài)網(wǎng)頁(yè)，可能是原生app的IOS和安卓工程師，或者web端的web前端工程師。

　　(5)、后端工程師，通常就是做java、asp.net、php的工程師來(lái)寫后端邏輯的工程師。

　　2018前端面試題及答案(三)

　　1、行內(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)的語(yǔ)氣)

　　塊級(jí)元素有：div ulol li dl dtdd h1 h2 h3 h4„p。

　　(3)、知名的空元素(單標(biāo)簽)：

　　2、CSS的盒子模型?

　　(1)、兩種， IE 盒子模型、標(biāo)準(zhǔn)W3C 盒子模型;IE 的content部分包含了 border 和pading;

　　(2)、盒模型：內(nèi)容(content)、填充(padding)、邊界(margin)、邊框(border)。

　　3、瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些?

　　* IE瀏覽器的內(nèi)核Trident、 Mozilla(火狐)的'Gecko、google(谷歌)的WebKit、Opera內(nèi)核Presto;

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

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

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

　　4、你怎么來(lái)實(shí)現(xiàn)頁(yè)面設(shè)計(jì)圖，你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作? 一個(gè)滿屏(品)字布局如何設(shè)計(jì)?

　　* 首先劃分成頭部、body、腳部;

　　* 實(shí)現(xiàn)效果圖是最基本的工作，精確到2px;與設(shè)計(jì)師，產(chǎn)品經(jīng)理的溝通和項(xiàng)目的參與做好的頁(yè)面結(jié)構(gòu)，頁(yè)面重構(gòu)和用戶體驗(yàn)處理hack，兼容、寫出優(yōu)美的代碼格式針對(duì)服務(wù)器的優(yōu)化、擁抱 HTML5。

　　5、頁(yè)面重構(gòu)怎么操作?

　　編寫 CSS、讓頁(yè)面結(jié)構(gòu)更合理化，提升用戶體驗(yàn)，實(shí)現(xiàn)良好的頁(yè)面效果和提升性能。

【前端面試題及答案】相關(guān)文章：

2017前端基礎(chǔ)面試題04-05

2017web前端面試題04-05

面試題及答案04-04

經(jīng)典面試題及答案04-04

經(jīng)典的面試題及答案分析12-09

小升初面試題及答案12-09

邏輯面試題及答案12-09

護(hù)士面試題及答案04-09

行政面試題及答案04-09