初級Web前端工程師面試必看面習(xí)題-練習(xí)HTMLCSSJavaScript

1、初級Web前端工程師面試必看面試題(HTML+CSS+JavaScript )作者：來源于網(wǎng)絡(luò) 發(fā)布時間：07月20日很多初級前端工程師去面試的時候可能不知道考官會問些什么， 提前做好準(zhǔn) 備會為你的面試加分，極客學(xué)院整理出了一些必看的初級工程師面試考題， 希望 會大家有所幫助。1 .對WEB標(biāo)準(zhǔn)以及 W3C的理解與認(rèn)識?標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的 用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維護(hù)、改 版方便，不需要變動頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站

2、易用 性；2 .XHTML 和HTML 有什么區(qū)別?HTML是一種基本的 WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的置 標(biāo)語言最主要的不同：XHTML元素必須被正確地嵌套。XHTML元素必須被關(guān)閉。標(biāo)簽名必須用小寫字母。XHTML文檔必須擁有根元素3 .Doctype?嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義？用于聲明文檔使用那種規(guī)范(HTML/XHTML) 一般為 嚴(yán)格 過度 基于框架 的html文檔加入XMl聲明可觸發(fā)，解析方式更改為IE5.5擁有IE5.5的bug4 .行內(nèi)元素有哪些？塊級元素有哪些？CSS的盒模型？塊級元素：div p h1 h2 h3 h4 fo

3、rm ul行內(nèi)元素:a b br i span input selectCss 盒模型:內(nèi)容，border ,margin , padding5 .CSS引入的方式有哪些？ link和import的區(qū)別是？內(nèi)聯(lián)內(nèi)嵌外鏈導(dǎo)入?yún)^(qū)別：同時加載前者無兼容性，后者CSS2.1以下瀏覽器不支持Link支持使用javascript改變樣式，后者不可6 .CSS選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？內(nèi)聯(lián)和important 哪個優(yōu)先級高？標(biāo)簽選擇符類選擇符id選擇符 繼承不如指定Id>class> 標(biāo)簽選擇后者優(yōu)先級高7 .前端頁面有哪三層構(gòu)成，分別是什么？作用是什么？結(jié)構(gòu)層HTML

4、表示層CSS行為層js8 .CSS的基本語句構(gòu)成是？選擇器屬性1：值1；屬性2:佰2;9 .你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么？Ie(Ie 內(nèi)核)火狐(Gecko) 谷歌(webkit) opear(Presto)10 .寫出幾種IE6 BUG 的解決方法1.雙邊距BUG float引起的 使用display2.3像素問題 使用float引起的 使用dislpay:inline -3px3.超鏈接hover點擊后失效 使用正確的書寫順序link visited hover active4.Ie z-index 問題給父級添加 position:relative5.Png透

5、明使用js代碼改6.Min-height最小高度Important 解決'7.select 在ie6下遮蓋使用iframe嵌套8.為什么沒有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px）9.ie 6 不支持important1.1 img 標(biāo)簽上title 與alt屬性的區(qū)別是什么？Alt當(dāng)圖片不顯示是 用文字代表。Title為該屬性提供信息12 .描述css reset的作用和用途。Reset重置瀏覽器的css默認(rèn)屬性 瀏覽器的品種不同，樣式不同，然后重 置，讓他們統(tǒng)一13 .解釋css spr

6、ites ,如何使用。Css精靈把一堆小的圖片整合到一張大的圖片上，減輕服務(wù)器對圖片的請求數(shù)量14 .瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？盒子模型 渲染模式的不同使用patMode可顯示為什么模式15 .你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化 ？期待的解決方案包括：文件合并文件最小化/文件壓縮 使用CDN托管緩存的使用16 .什么是語義化的HTML?直觀的認(rèn)識標(biāo)簽對于搜索引擎的抓取有好處17 .清除浮動的幾種方式，各自的優(yōu)缺點1 .使用空標(biāo)簽清除浮動clear:both（理論上能清楚任何標(biāo)簽，增加無意義的 標(biāo)簽）2 .使用overflow:auto（空標(biāo)簽元素清除浮動而不得不增加無意代碼的弊端

7、,，使用zoom:1用于兼容IE）3 .是用afert偽元素清除浮動（用于非IE瀏覽器）18.css hack_marging IE 6+margin IE 7Marging:0 auto 9所有 IeMargin 0 IE 8Javascript 部分l.javascript 的typeof返回哪些數(shù)據(jù)類型Object number function boolean underfind2 .例舉3種強(qiáng)制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換？強(qiáng)制(parseInt,parseFloat,number )隱式(=-=)3 .split() join() 的區(qū)別前者是切割成數(shù)組的形式，后者是將數(shù)組轉(zhuǎn)換成字符

8、串4 .數(shù)組方法 pop() push() unshift() shift()Push()尾部添加pop()尾部刪除Unshift()頭部添加shift()頭部刪除5 .事件綁定和普通事件有什么區(qū)別6.IE和DOM事件流的區(qū)別1 .執(zhí)行順序不一樣、2 .參數(shù)不一樣3 .事件加不加on4 .this指向問題7.IE和標(biāo)準(zhǔn)下有哪些兼容性的寫法Var ev = ev | window.eventdocument.documentElement.clientWidth | document.body.clientWidthVar target = ev.srcElement|ev.target8 .a

9、jax請求的時候get和post方式的區(qū)別一個在url后面一個放在虛擬載體里面有大小限制安全問題應(yīng)用不同一個是論壇等只需要請求的，一個是類似修改密碼的9 .call和apply 的區(qū)另Object.call(this,obj1,obj2,obj3)Object.apply(this,arguments)10 .ajax請求時，如何解釋json數(shù)據(jù)使用eval parse鑒于安全性考慮使用parse更靠譜11 .b繼承a的方法12 .JavaScript this指針、閉包、作用域13 .事件委托是什么讓利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行!14 .閉包是什么，有什么特

10、性，對頁面有什么影響閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。15 .如何阻止事件冒泡和默認(rèn)事件canceBubble return false16 .添加 刪除 替換 插入到某個接點的方法obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild17 .解釋jsonp 的原理，以及為什么不是真正的 ajax動態(tài)創(chuàng)建script標(biāo)簽，回調(diào)函數(shù)Ajax是頁面無刷新請求數(shù)據(jù)操作18 .javascript 的本地對象，內(nèi)置對象和宿主對象本地對象為 array obj regexp 等可以new 實例化內(nèi)置對象為gload Math等不可以實例化的宿主為瀏覽器自帶的document,window 等19 .document load 和 document ready的區(qū)另UDocument.onload是在結(jié)構(gòu)和樣式加載完才執(zhí)行 jsDocument.ready原生種沒有這個方法，jquery 中有$().ready(function)20 .” ="和"=”的不同前者會自動轉(zhuǎn)換類型后者不會21 .javascript 的同源策略一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機(jī)名、協(xié)議和端口號的組