最新的前端開(kāi)發(fā)面試題
最新的前端開(kāi)發(fā)面試題
面試題在前端開(kāi)發(fā)求職者的求職面試中占有重要的比重，是前端開(kāi)發(fā)求職面試過(guò)程中必不可少的重要一環(huán)。下面是由學(xué)習(xí)啦小編分享的最新的前端開(kāi)發(fā)面試題，希望對(duì)你有用。
最新的前端開(kāi)發(fā)面試題
HTML&CSS
1. 常用那幾種瀏覽器測(cè)試?有哪些內(nèi)核(Layout Engine)?
(Q1) 瀏覽器：IE，Chrome，F(xiàn)ireFox，Safari，Opera。 (Q2) 內(nèi)核：Trident，Gecko，Presto，Webkit。
2. 說(shuō)下行內(nèi)元素和塊級(jí)元素的區(qū)別?行內(nèi)塊元素的兼容性使用?
(IE8 以下)
行內(nèi)元素：會(huì)在水平方向排列，不能包含塊級(jí)元素，設(shè)置width無(wú)效，height無(wú)效(可以設(shè)置line-height)，margin上下無(wú)效，padding上下無(wú)效。 塊級(jí)元素：各占據(jù)一行，垂直方向排列。從新行開(kāi)始結(jié)束接著一個(gè)斷行。 兼容性：display:inline-block;display:inline;zoom:1;
3. 清除浮動(dòng)有哪些方式?比較好的方式是哪一種?
(1)父級(jí)div定義height。
(2)結(jié)尾處加空div標(biāo)簽clear:both。
(3)父級(jí)div定義偽類:after和zoom。
(4)父級(jí)div定義overflow:hidden。
(5)父級(jí)div定義overflow:auto。
(6)父級(jí)div也浮動(dòng)，需要定義寬度。
(7)父級(jí)div定義display:table。
(8)結(jié)尾處加br標(biāo)簽clear:both。
總結(jié)：比較好的是第3種方式，簡(jiǎn)潔方便。
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)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
5. Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
(Q1) 告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
(Q2) 標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
6. HTML5 為什么只需要寫 < Doctype html>?
HTML5不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用;但是需要doctype來(lái)規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行)。 而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。
7. 頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別?
(1)link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的，只能用于加載CSS;
(2)頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面
被加載完再加載;
(3)import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題。
總之，link要優(yōu)于@import。
8. 介紹一下你對(duì)瀏覽器內(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)頁(yè)的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。 所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。 最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。
9. html5有哪些新特性?如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題?如何區(qū)分 HTML 和 HTML5?
(Q1) HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
(1)繪畫 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;
(5)語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section; (6)表單控件，calendar、date、time、email、url、search;
(7)新的技術(shù)webworker, websocket, Geolocation;
(Q2) IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽， 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。 也可以直接使用成熟的框架、比如html5shim，
10. 簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解?
用正確的標(biāo)簽做正確的事情。
1. html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析;
2. 即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的; 搜索引擎的爬蟲也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;
3. 使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
有關(guān)前端開(kāi)發(fā)的面試題
1.對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)
標(biāo) 簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁(yè)面速度更快、內(nèi)容能被更多的用戶所訪 問(wèn)、內(nèi)容能被更廣泛的設(shè)備所訪問(wèn)、更少的代碼和組件，容易維護(hù)、改版方便，不需要變動(dòng)頁(yè)面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性;
2.xhtml和html有什么區(qū)別
HTML是一種基本的WEB網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。
標(biāo)簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?
用于聲明文檔使用那種規(guī)范(html/Xhtml)一般為 嚴(yán)格 過(guò)度 基于框架的html文檔 加入XMl聲明可觸發(fā)，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內(nèi)元素有哪些?塊級(jí)元素有哪些?CSS的盒模型?
塊級(jí)元素：div p h1 h2 h3 h4 form ul
行內(nèi)元素: a b br i span input select
Css盒模型:內(nèi)容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的區(qū)別是?
內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
區(qū)別 ：同時(shí)加載
前者無(wú)兼容性，后者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，后者不可
6.CSS選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算?內(nèi)聯(lián)和important哪個(gè)優(yōu)先級(jí)高?
標(biāo)簽選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標(biāo)簽選擇
后者優(yōu)先級(jí)高
7.前端頁(yè)面有哪三層構(gòu)成，分別是什么?作用是什么?
結(jié)構(gòu)層 Html 表示層 CSS 行為層 js
8.css的基本語(yǔ)句構(gòu)成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁(yè)面在哪些流覽器測(cè)試過(guò)?這些瀏覽器的內(nèi)核分別是什么?
Ie(Ie內(nèi)核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
10.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display
2.3像素問(wèn)題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點(diǎn)擊后失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問(wèn)題 給父級(jí)添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 !Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.為什么沒(méi)有辦法定義1px左右的寬度容器(IE6默認(rèn)的行高造成的，使用
over:hidden,zoom:0.08 line-height:1px)
11.標(biāo)簽上title與alt屬性的區(qū)別是什么?
Alt 當(dāng)圖片不顯示是 用文字代表。
Title 為該屬性提供信息
12.描述css reset的作用和用途。
Reset重置瀏覽器的css默認(rèn)屬性 瀏覽器的品種不同，樣式不同，然后重置，讓他們統(tǒng)一
在前端開(kāi)發(fā)的面試中，面試自我介紹跟回答面試題起著同樣重要的作用，下面是學(xué)習(xí)啦小編為大家精心推薦的前端開(kāi)發(fā)面試自我介紹范文，希望能夠?qū)δ兴鶐椭?/p>
前端開(kāi)發(fā)面試自我介紹范文
我叫李xx，是齊齊哈爾大學(xué)計(jì)算機(jī)專業(yè)08屆畢業(yè)生。作為一名普通的應(yīng)屆畢業(yè)生，我卻有著不一般的經(jīng)歷。在專業(yè)方面我的主攻方向是網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)站策劃和推廣。能熟練的運(yùn)用dreamweaver ,fireworks等網(wǎng)站前臺(tái)美工制作軟件，掌握的動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言是asp+access/sqlserver?，F(xiàn)在我還在自學(xué)jsp開(kāi)發(fā)語(yǔ)言，并對(duì)css有一定的了解。在網(wǎng)站制作和維護(hù)方面有半年多的工作經(jīng)驗(yàn)(07年4月份在齊市一家公司做兼職站長(zhǎng)。
大學(xué)的四年教育，把我培養(yǎng)成了一個(gè)對(duì)人真誠(chéng)友善，敢于承擔(dān)責(zé)任，具備很強(qiáng)的環(huán)境適應(yīng)能力，對(duì)待生活樂(lè)觀積極，擁有吃苦耐勞精神的青年。在大一大兒的生活中我積極參加學(xué)校組織的各項(xiàng)活動(dòng)，能以集體利益為重，團(tuán)結(jié)同學(xué)，熱愛(ài)勞動(dòng)。在學(xué)習(xí)中我刻苦努力，多次獲得學(xué)校獎(jiǎng)學(xué)金。大三的候我們開(kāi)始學(xué)習(xí)計(jì)算機(jī)專業(yè)知識(shí)。剛開(kāi)始面對(duì)高深的理論知識(shí)有點(diǎn)措手不及，尤其是學(xué)習(xí)面向?qū)ο缶幊陶Z(yǔ)言java的學(xué)習(xí)的時(shí)候，吃了不少苦。好在我的學(xué)習(xí)態(tài)度比較端正，平時(shí)上課認(rèn)真聽(tīng)講，仔細(xì)體會(huì)老師的講解，有不懂的地方向老師同學(xué)請(qǐng)教，就這樣我打好了理論知識(shí)的底。這個(gè)時(shí)候我認(rèn)識(shí)到了作為一名計(jì)算機(jī)專業(yè)的學(xué)生光學(xué)理論知識(shí)是不夠的，實(shí)際動(dòng)手能力很重要。于是利用暑假，寒假去專業(yè)對(duì)口的公司實(shí)習(xí)鍛煉。xx年4月份，我有幸來(lái)到了日本銀河科技有限公司齊齊哈爾分公司做兼職。我從事網(wǎng)站開(kāi)發(fā)和網(wǎng)站維護(hù)一職，在工作中我兢兢業(yè)業(yè)，勤勤懇懇，深得老板的信任。在工作的同時(shí)我學(xué)到了好多東西，不僅僅是專業(yè)知識(shí)，還有社會(huì)經(jīng)驗(yàn)，為人處事等等。
劍鳴厘中，期之以聲。熱切期望我這拳拳寸草心、濃濃赤誠(chéng)情能與您同呼吸、共命運(yùn)、同發(fā)展、求進(jìn)步。請(qǐng)各位領(lǐng)導(dǎo)給我一個(gè)機(jī)會(huì)，我會(huì)用行動(dòng)來(lái)證明自己。
最后，衷心祝愿貴公司事業(yè)發(fā)達(dá)、蒸蒸日上。
看過(guò)“最新的前端開(kāi)發(fā)面試題”的人還看了：