- 相關(guān)推薦
2017web前端面試題
web前端工程師想要取得面試成功，面試前了解面試題目很有必要，2017年的前端面試問(wèn)題你知道有哪些嗎?以下是陽(yáng)光網(wǎng)小編幫你們整理的2017web前端面試題，一起來(lái)學(xué)習(xí)啦。
2017web前端面試題(一)
1、為什么要初始化CSS樣式。
因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。
當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚(yú)和熊掌不可兼得，但力求影響最小的情況下初始化。
*最簡(jiǎn)單的初始化方法就是： * {padding: 0; margin: 0;} 。
2、Doctype作用? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?
(1)、聲明位于文檔中的最前面，處于標(biāo)簽之前。告知瀏覽器的解析器，用什么文檔類(lèi)型規(guī)范來(lái)解析這個(gè)文檔。
(2)、嚴(yán)格模式的排版和 JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
(3)、在混雜模式中，頁(yè)面以寬松的向后兼容的'方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
(4)、DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。
3、CSS 選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算?
(1)、id選擇器( # myid)
(2)、類(lèi)選擇器(.myclassname)
(3)、標(biāo)簽選擇器(div, h1, p)
(4)、相鄰選擇器(h1 + p)
(5)、子選擇器(ul< li)
(6)、后代選擇器(li a)
(7)、通配符選擇器( * )
(8)、屬性選擇器(a[rel = “external”])
(9)、偽類(lèi)選擇器(a: hover, li: nth – child)
* 可繼承：font-size font-family color, ul li dl dddt;
* 不可繼承：border padding margin width height ;
* 優(yōu)先級(jí)就近原則，樣式定義最近者為準(zhǔn);
* 載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級(jí)為:
!important > id> class > tag
important 比內(nèi)聯(lián)優(yōu)先級(jí)高
4、如何居中div，如何居中一個(gè)浮動(dòng)元素?
確定容器的寬高寬500 高 300 的層。
設(shè)置層的外邊距
.div {
Width:500px ; height:300px;//高度可以不設(shè)
Margin: -150px 0 0 -250px;
position:relative;相對(duì)定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
2017web前端面試題(二)
1、css的基本語(yǔ)句構(gòu)成是?
選擇器{屬性1:值1;屬性2:值2;„„} 例如：div{margin-top:10px;border:1px solid #ccc}
2、前端頁(yè)面由哪三層構(gòu)成，分別是什么?作用是什么?
網(wǎng)頁(yè)分成三個(gè)層次，即：結(jié)構(gòu)層、表示層、行為層。
網(wǎng)頁(yè)的結(jié)構(gòu)層(structural layer)由 HTML 或 XHTML 之類(lèi)的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁(yè)內(nèi)容的語(yǔ)義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P 標(biāo)簽表達(dá)了這樣一種語(yǔ)義：“這是一個(gè)文本段。” 網(wǎng)頁(yè)的'表示層(presentation layer)由 CSS 負(fù)責(zé)創(chuàng)建。 CSS 對(duì)“如何顯示有關(guān)內(nèi)容”的問(wèn)題做出了回答。
網(wǎng)頁(yè)的行為層(behavior layer)負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問(wèn)題。這是Javascript語(yǔ)言和 DOM 主宰的領(lǐng)域。
3、你做的頁(yè)面在哪些流覽器測(cè)試過(guò)?
IE內(nèi)核瀏覽器：360，傲游，搜狗，世界之窗，騰訊TT。
非IE內(nèi)核瀏覽器：firefox opera safari chrome 。
4、著名的前端框架都有哪些的呢?
布局框架：bootstrap、easy UI等。
Js動(dòng)效框架：jquery、angular.js等。
5、做一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師或者前端工程師，平常訪問(wèn)學(xué)習(xí)的IT網(wǎng)站都有哪些?
(1)、W3C *shool
(2)、segme*tFault
(3)、cs*n
(4)、知呼論壇
(5)、博*園
6、切圖工作是UI設(shè)計(jì)師來(lái)做?還是前端工程師來(lái)做?
對(duì)于app工程師，也就是ios和Android工程師，大多由UI設(shè)計(jì)師來(lái)完成切圖。
對(duì)于web前端工程師，也就是PC端、瀏覽端，大多有web前端工程師自己完成切圖。
2017web前端面試題(三)
1、切圖工程師、前端工程師、UI設(shè)計(jì)師、美工、網(wǎng)頁(yè)設(shè)計(jì)師區(qū)別是什么?
(1)、UI設(shè)計(jì)師俗稱(chēng)美工，不過(guò)UI設(shè)計(jì)師工作高端、名字大氣、工資上檔次，不過(guò)大多公司都稱(chēng)呼UI為美工，你也不要介意的，不管他們?cè)趺捶Q(chēng)呼的，反正就是做網(wǎng)站設(shè)計(jì)圖的就OK，別人怎么稱(chēng)呼不重要的了，只要你拿了高工資就是UI設(shè)計(jì)師了。
UI的主要任務(wù)是設(shè)計(jì)。了解用戶的意圖，分析網(wǎng)站配色，基本布局。繪制出一個(gè)網(wǎng)站效果圖。 UI需要掌握的知識(shí)體系應(yīng)該包括網(wǎng)頁(yè)設(shè)計(jì)，UI(User Interface)用戶界面人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)，UED(user experience design)用戶體驗(yàn)設(shè)計(jì)–簡(jiǎn)單來(lái)說(shuō)就是如何使得網(wǎng)站更加便于交互。
(2)、前端開(kāi)發(fā)：
美工在完成設(shè)計(jì)效果圖之后，由前端開(kāi)發(fā)人員將其制作成為適合瀏覽器查看的HTML頁(yè)面。 由于現(xiàn)在移動(dòng)互聯(lián)網(wǎng)的大規(guī)模流行，加上各個(gè)不同廠商的瀏覽器的激烈競(jìng)爭(zhēng)，前端開(kāi)發(fā)的主要任務(wù)簡(jiǎn)單來(lái)說(shuō)就是使網(wǎng)頁(yè)在不同瀏覽器不同分辨率不同設(shè)備上提供相似或相近的瀏覽體驗(yàn)。
前端開(kāi)發(fā)需要掌握的知識(shí)體系主要是兼容性問(wèn)題的解決，流暢完美的交互體驗(yàn)。具體到技術(shù)細(xì)節(jié)上就是HTML，CSS，JavaScript，各大公司各種不同內(nèi)核的瀏覽器、各種各樣的JS庫(kù)、簡(jiǎn)單的與后臺(tái)交互的知識(shí)。
(3)、后臺(tái)開(kāi)發(fā)：
前臺(tái)開(kāi)發(fā)完成之后，就是后臺(tái)程序員的工作了，相比較前端來(lái)說(shuō)，后臺(tái)更像傳統(tǒng)意義上的程序員。后臺(tái)的工作簡(jiǎn)單來(lái)說(shuō)就是網(wǎng)頁(yè)文件對(duì)數(shù)據(jù)庫(kù)的增刪改查。
后臺(tái)需要掌握的知識(shí)體系應(yīng)該包括，編程基礎(chǔ)，基本HTML語(yǔ)言，至少一門(mén)主流網(wǎng)頁(yè)語(yǔ)言(C#，C++，JAVA，PHP等)，數(shù)據(jù)庫(kù)的操作等等。
(4)、 UI設(shè)計(jì)師和網(wǎng)頁(yè)設(shè)計(jì)師有什么區(qū)別?
其實(shí)網(wǎng)頁(yè)設(shè)計(jì)，分出來(lái)有兩塊，一個(gè)是UI設(shè)計(jì)，一個(gè)是web前端。UI設(shè)計(jì)自然要懂的更多的是PS，F(xiàn)W，AI，CD等制圖軟件，還有一些比較優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)理念，切圖等相關(guān)知識(shí)。
web前端，需要的html+css+javascript，通過(guò)這三個(gè)東西把設(shè)計(jì)圖轉(zhuǎn)換成代碼。這一步所實(shí)現(xiàn)的就是設(shè)計(jì)圖的靜態(tài)化，也就是變成了網(wǎng)頁(yè)形式。
網(wǎng)頁(yè)設(shè)計(jì)師，是個(gè)很泛的概念，不過(guò)一般指的會(huì)偏重UI設(shè)計(jì)。稍微關(guān)注過(guò)網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的公司，有點(diǎn)規(guī)模的，招人都會(huì)寫(xiě)得比較詳細(xì)，例如招UI設(shè)計(jì)師，或者招web前端工程師。 你找工作的時(shí)候，都找這些名稱(chēng)比較規(guī)范的，因?yàn)槠鸫a他們會(huì)區(qū)別職位的不同。一定要找的時(shí)候看清楚是UI設(shè)計(jì)師，不是找前端或者美工的'，前端更多的寫(xiě)較高級(jí)的代碼的，會(huì)比設(shè)計(jì)懂的知識(shí)點(diǎn)更多的，美工其實(shí)就是淘寶裝修店鋪或者說(shuō)簡(jiǎn)單的PS照片的，就是會(huì)玩美圖秀秀或者PS簡(jiǎn)單的繪圖就可以的了，UI設(shè)計(jì)師才是咱們的IT行業(yè)“高大上”職位。
(5)、UI設(shè)計(jì)師：
“UI”的本義是用戶界面，是英文User和interface的縮寫(xiě)。UI設(shè)計(jì)師簡(jiǎn)稱(chēng)UID(User Interface Designer)，指從事對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)工作的人。
UI設(shè)計(jì)師的涉及范圍包括商用平面設(shè)計(jì)、高級(jí)網(wǎng)頁(yè)設(shè)計(jì)、移動(dòng)應(yīng)用界面設(shè)計(jì)及部分包裝設(shè)計(jì)，是目前中國(guó)信息產(chǎn)業(yè)中最為搶手的人才之一。
UI設(shè)計(jì)師的特點(diǎn)是：工資高、發(fā)展前景好，會(huì)一些簡(jiǎn)單的前端知識(shí)代碼，做手機(jī)端和PC端的網(wǎng)站設(shè)計(jì)圖。
2、UI設(shè)計(jì)師的工作內(nèi)容是什么?
(1)、負(fù)責(zé)軟件界面的美術(shù)設(shè)計(jì)、創(chuàng)意工作和制作工作;
(2)、根據(jù)各種相關(guān)軟件的用戶群，提出構(gòu)思新穎、有高度吸引力的創(chuàng)意設(shè)計(jì);
(3)、對(duì)頁(yè)面進(jìn)行優(yōu)化，使用戶操作更趨于人性化;
(4)、維護(hù)現(xiàn)有的應(yīng)用產(chǎn)品;
(5)、收集和分析用戶對(duì)于GUI的需求。
3、UI設(shè)計(jì)師需要會(huì)使用的工具的簡(jiǎn)稱(chēng)都有哪些?
以下一些工具的簡(jiǎn)稱(chēng)，大家應(yīng)該有一定的了解，以免被問(wèn)到咱們只知道簡(jiǎn)稱(chēng)。
(1)、AI (adobe illustrator)基于矢量的圖形制作軟件
(2)、PS(adobe Photoshop)圖像處理軟件。
(3)、DW(Adobe Dreamweaver)網(wǎng)頁(yè)編輯器
(4)、AE(Adobe After Effects)一款圖形視頻處理軟件
(5)、flash(Adobe Flash)二維動(dòng)畫(huà)軟件
(6)、Axure(Axure RP)快速原型設(shè)計(jì)工具
(7)、墨刀(MockingBot)移動(dòng)端原型工具
(8)、Fireworks網(wǎng)頁(yè)作圖軟件
【web前端面試題】相關(guān)文章：
web軟件測(cè)試面試題04-07
2017前端基礎(chǔ)面試題04-05
web軟件測(cè)試面試題及答案04-07
2018前端面試題及答案12-06
前端面試技巧12-09
前端開(kāi)發(fā)面試技巧04-07
關(guān)于經(jīng)典面試題12-09
樂(lè)事面試題精選12-09
微軟面試題精選12-09