面試前的準(zhǔn)備對(duì)于前端面試者來(lái)說(shuō)很重要，提前了解面試題目會(huì)使你得到就業(yè)機(jī)會(huì)。以下是小編為大家整理的前端面試題目，希望可以幫到大家。

　　前端面試題目一

　　1、Doctype作用? 嚴(yán)格模式與混雜模式如何區(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)。

　　2、行內(nèi)元素有哪些?塊級(jí)元素有哪些?

　　(1)CSS規(guī)范規(guī)定，每個(gè)元素都有display屬性，確定該元素的類(lèi)型，每個(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

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

　　3、link 和@import 的區(qū)別是?(強(qiáng)調(diào)的語(yǔ)氣)塊

　　(1)link屬于XHTML標(biāo)簽，而@import是CSS提供的;

　　(2)頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import頁(yè)面被加載完再加載; 引用的CSS會(huì)等到

　　(3)import只在IE5以上才能識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題;

　　(4)link方式的樣式的權(quán)重高于@import的權(quán)重.

　　4、瀏覽器的內(nèi)核分別是什么?

　　IE瀏覽器的內(nèi)核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera內(nèi)核原為Presto，現(xiàn)為Blink;

　　5、HTML5有哪些新特性?如何處理HTML 和 HTML5?HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題?如何區(qū)分

　　HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

　　繪畫(huà) canvas 用于媒介回放的 video 和 audio 元素本地離線(xiàn)存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section 表單控件，calendar、date、time、email、url、search 新的技術(shù)webworker, websockt, Geolocation

　　6、對(duì)語(yǔ)義化如何理解?

　　用正確的標(biāo)簽做正確的事情!

　　HTML語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析;在沒(méi)有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲(chóng)依賴(lài)于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO。使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

　　7、HTML5的離線(xiàn)儲(chǔ)存有幾種方式?

　　localStorage長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;sessionStorage 據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。

　　8、iframe有那些缺點(diǎn)?

　　iframe會(huì)阻塞主頁(yè)面的Onload事件;

　　iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過(guò)javascript動(dòng)態(tài)給iframe添加src屬性值，這樣可以可以繞開(kāi)以上兩個(gè)問(wèn)題。

　　9、請(qǐng)描述一下cookies，sessionStorage和localStorage的區(qū)別?

　　cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。sessionStorage和localStorage不會(huì)sessionStorage和localStorage的存儲(chǔ)空間更大;sessionStorage和localStorage有更多豐富易用的接口;sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間;最新前端開(kāi)發(fā)工程師面試題——CSS部分

　　前端面試題目二

　　1.WEB標(biāo)準(zhǔn)以及W3C標(biāo)準(zhǔn)是什么?

　　標(biāo)簽閉合、標(biāo)簽小寫(xiě)、不亂嵌套、使用外鏈css和js、結(jié)構(gòu)行為表現(xiàn)的分離。

　　1.1div中img怎么水平和垂直居中?

　　Div{width:200px; height:200px;text-align:center; font-size:0; overflow: hidden;line-height:200px; _line-height:178px;/*兼容IE6*/ }

　　Img{ vertical-align:middle;}

　　1.2 HTML中沒(méi)有單位的屬性是?

　　z-index:1; zoom:1; font-weight:200;

　　1.3 form表單中input標(biāo)簽的readonly 和disabled屬性有何區(qū)別?

　　readonly=“readonly”是只讀，不可以修改， disabled=“disabled”是禁用，整個(gè)文本框是顯示灰色狀態(tài)

　　form 中method是數(shù)據(jù)傳遞的方式，action是與后臺(tái)數(shù)據(jù)庫(kù)提交的

　　2.xhtml和html有什么區(qū)別

　　XHTML 元素必須被正確地嵌套，閉合，區(qū)分大小寫(xiě)，文檔必須擁有根元素。

　　3.行內(nèi)元素有哪些?塊級(jí)元素有哪些?

　　行內(nèi)元素: a b img em br i span input select

　　塊級(jí)元素：div p h1-h6 form ul dl ol table

　　4.行內(nèi)元素和塊級(jí)元素有什么區(qū)別?

　　行內(nèi)元素不可以設(shè)置寬高，不獨(dú)占一行;

　　塊級(jí)元素可以設(shè)置寬高，獨(dú)占一行。

　　5.我想讓行內(nèi)元素跟上面的元素距離10px，加margin-top和padding-top可以嗎?

　　margin-top,padding-top無(wú)效

　　6.CSS的盒模型由什么組成?

　　內(nèi)容(width,height)，border ,margin，padding

　　6.1 簡(jiǎn)述div+css布局的優(yōu)勢(shì)?

　　(1)符合w3c標(biāo)準(zhǔn);(2)兼容性好;(3)有利于搜索引擎很友好;(4)樣式的調(diào)整更加方便;(5)css簡(jiǎn)潔的代碼，能使樣式和結(jié)構(gòu)分離;

　　7.說(shuō)說(shuō)display屬性有哪些?可以做什么?

　　display:block行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素

　　display:inline塊級(jí)元素轉(zhuǎn)換為行內(nèi)元素

　　display:inline-block轉(zhuǎn)為內(nèi)聯(lián)元素

　　display:box(css3新增的彈性布局屬性)

　　8.CSS 選擇符有哪些?

　　1.id選擇器( # myid)

　　2.類(lèi)選擇器(.myclassname)

　　3.標(biāo)簽選擇器(div, h1, p)

　　4.相鄰選擇器(h1 + p)

　　5.子選擇器(ul < li)

　　6.后代選擇器(li a)

　　前端面試題目三

　　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定義偽類(lèi):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 為什么只需要寫(xiě) < 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)行引用，才能告知瀏覽器文檔所使用的文檔類(lèi)型。