Web前端開發(fā)面試題

1、Web前端開發(fā)面試題、描述題1、簡(jiǎn)要的描述一下 W3C組織的工作職責(zé)答： W3C（萬(wàn)維網(wǎng)聯(lián)盟）為解決 Web應(yīng)用中不同平臺(tái)、技術(shù)和開發(fā)者帶來(lái)的不兼容性，保障 Web信息的順利和完整流通，網(wǎng)頁(yè)開發(fā)從此在結(jié)構(gòu)、表現(xiàn)、行為上相分離。2、目前常用的 WEB標(biāo)準(zhǔn)靜態(tài)語(yǔ)言是：答： XHTML3、內(nèi)聯(lián)元素有哪些？塊級(jí)元素有哪些？CSS的盒模型有哪些屬性？答：內(nèi)聯(lián)元素有 a, span, img, input, select, strong 等。塊級(jí)元素有 div, ul, ol, li, dl,dt,dd, h1,h2 ,p 。盒模型 :margin, padding,width,height,border

2、。4、改變?cè)氐耐膺吘嗪蛢?nèi)填充用什么？答： margin padding5、對(duì) ul li 的樣式設(shè)成無(wú)，應(yīng)該是用什么屬性？答： list-style-type:none;6、color:#666666; 可縮寫為什么 ?答： color:#666;7、合理的頁(yè)面布局中常聽說(shuō)結(jié)構(gòu)與表現(xiàn)分離，那么結(jié)構(gòu)和表現(xiàn)分別指什么？答：結(jié)構(gòu)為 xhtml ，表現(xiàn)為 css8、舉例你在實(shí)踐中遇到的 IE6 bug ，并談?wù)劷鉀Q方案 答：如浮動(dòng)產(chǎn)生雙倍邊距，用 display:inline 解決9、談?wù)劜煌瑸g覽器的 css hack 做法答 ： 所 有 瀏 覽 器 通 用 ： height:10px; IE6 專

3、 用 ： _height:10px;IE6,IE7公 用 ：*height:10px;IE7 專用： *+height:10px;IE7,IE8,FF 公用： height:10px !important;10、CSS中哪些屬性可以同父元素繼承？答： color, font-size11、你如何理解 HTML結(jié)構(gòu)的語(yǔ)意化？答： html 本身是沒(méi)有表現(xiàn)的，我們看到例如 h1 是粗體，字體大小 2em,加粗； strong 是加粗的，不要認(rèn)為這是 html ，這些其實(shí)是 html 默認(rèn)的 css 樣式在起作用，所以去掉或樣式 丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)不是語(yǔ)義化的HTML特點(diǎn)，但是瀏覽器都

4、有默認(rèn)的樣式，默認(rèn)的樣式目的也是為了更好的表達(dá) html 的語(yǔ)義，可以說(shuō)瀏覽器的默認(rèn)樣式和 HTML結(jié)構(gòu)是 不可分割的12、談?wù)剬?duì) css 模塊化設(shè)計(jì)的看法？答： css 模塊化開發(fā)是 css 開發(fā)者們都會(huì)使用到的方法，它具有結(jié)構(gòu)良好，擴(kuò)展性強(qiáng)， 重用性好等特點(diǎn)，同時(shí)有利于團(tuán)隊(duì)之間的合作。13、談?wù)剬?duì) css sprite 技術(shù)的看法答： css sprite 是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。它允許你將一個(gè)頁(yè)面涉及到的所有零星 圖片都包含到一張圖片中去， 這樣一來(lái)， 當(dāng)訪問(wèn)該頁(yè)面時(shí)， 載入的圖片就不會(huì)像以前那樣一 張一張的慢慢顯示出來(lái)了， 對(duì)于當(dāng)前網(wǎng)絡(luò)流行的速度不高于 200KB 的單張圖片的所需

5、載入時(shí) 間基本是差不多的，所以無(wú)需顧忌這個(gè)問(wèn)題，加速的關(guān)鍵，不是降低重量，而是減少個(gè)數(shù)， 傳統(tǒng)的切圖講究精細(xì)，圖片規(guī)格越小越好，重量越小越好，其實(shí)規(guī)格大小計(jì)算機(jī)統(tǒng)一都按 byte 計(jì)算， 客戶端每顯示一張圖片都會(huì)向服務(wù)器發(fā)送請(qǐng)求， 所以，圖片越多請(qǐng)求次數(shù)越多， 造成延遲的可能性越大。14、如何居中一個(gè)浮動(dòng)元素 ?答：設(shè)置容器的浮動(dòng)方式為相對(duì)定位， 然后確定容器的寬高， 比如寬 500 高 300 的層， 然后設(shè)置層的外邊距。divWidth:500px;height:300px;Margin: -150px 0 0 -250px;position:relative;left:50%;top:5

6、0%;15、AJAX readyState 有五種狀態(tài)，分別是 0,1,2,3,4 ，請(qǐng)說(shuō)明它們對(duì)應(yīng)的意思。答： 0：（未初始化）還沒(méi)有調(diào)用 send（） 方法； 1：（載入）已調(diào)用 send（） 方法，正在發(fā) 送請(qǐng)求； 2：（載入完成） send（） 方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容；3：（交互）正在解析響應(yīng)內(nèi)容； 4：（完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了。16、談?wù)剬?duì) Javascript 語(yǔ)言的理解。答： JavaScript 是一種動(dòng)態(tài)、弱類型、基于原型的語(yǔ)言，通過(guò)瀏覽器可以直接執(zhí)行， Javascript 的一個(gè)重要功能就是基于對(duì)象的功能，通過(guò)基于對(duì)象的程序設(shè)計(jì)，可以用更

7、直 觀、模塊化和可重復(fù)使用的方式進(jìn)行程序開發(fā)。17、談?wù)剬?duì) JS 閉包的理解。答：簡(jiǎn)單的理解 js 閉包就是定義在一個(gè)函數(shù)內(nèi)部的函數(shù)，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的一座橋梁。 閉包可以用在許多地方。 它的最大用處有兩個(gè)， 一個(gè)是前面提到 的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中 。18、寫出幾種流行的 js 開發(fā)框架答： jquery, mootools,extjs,yui,prototype;19、html5 websocket 是什么？答： WebSocket 目標(biāo)是在 瀏覽器 中實(shí)現(xiàn)和服務(wù)器端雙向通信 .雙向通信可以拓展瀏覽器 上的應(yīng)用類型 ,例如實(shí)時(shí)的

8、數(shù)據(jù)推送 （股票行情 ）,游戲,聊天/im 等.20、有沒(méi)有關(guān)注 HTML5和 CSS3?如有請(qǐng)簡(jiǎn)單說(shuō)一下您對(duì)他們的了解情況。答： HTML5新標(biāo)簽： header, footer,dialog,aside,figure,section.CSS3特性：實(shí)現(xiàn)圓角，陰影，文字特效，動(dòng)畫等等。二、選擇題1、下面的 XHTML中，哪個(gè)可以正確地標(biāo)記拆行？（ A）A： B ： C ： 2、下列哪段是格式良好的 XHTM？L （ B）A： AshortparagraphB： AshortparagraphC： Ashortparagraph3、在 HTML文檔中，引用外部樣式表的正確位置是？（D）A：文檔

9、的末尾 B ：文檔的頂部 C ：部分 D ： 部分4、（ B）標(biāo)簽可以用于 中A ： B ： C ： D ： 5、a:hover 表示超鏈接文字在（ C）時(shí)的狀態(tài)。A：鼠標(biāo)按下 B ：鼠標(biāo)經(jīng)過(guò) C ：鼠標(biāo)放上去 D ：訪問(wèn)過(guò)后6、CSS中 ID 選擇符在定義的前面要有指示符（ D）A：* B ： . C ：! D ：#7、在 jquery 中下面哪個(gè)是用來(lái)追加到指定元素的末尾的？（A）A： insertAfter（） B： append（） C ：appendTo（） D ： afterA： location B ： history C ： form D ：frame 9、（ D）是一個(gè)可以執(zhí)

10、行的 JAVASCRIPT代碼段。A：對(duì)象 B ：方法 C ：事件 D ：函數(shù) 10、下列運(yùn)算方式不屬于邏輯運(yùn)算的是（D）A：!a B ：a&b C ：a|b D ：ab三、簡(jiǎn)答題1、 請(qǐng)用 xhtml+css 布局出如下圖形：2、用 JS 編寫一個(gè)方法 求一個(gè)字符串的字節(jié)長(zhǎng)度new function(s) if(!arguments.length|!s) return null; if(=s) return 0;var l=0;for(var i=0;i255) l+=2; else l+;alert(l);3、截取字符串 abcdefg 的 efgvar str = abcdefg;if

11、(/efg/.test(str) var efg = str.substr(str.indexOf(efg), 3);alert(efg);4、請(qǐng)實(shí)現(xiàn)，鼠標(biāo)點(diǎn)擊頁(yè)面中的任意標(biāo)簽，alert 該標(biāo)簽的名稱document.onclick = function (e) var e = (e |event);var o = e “ target ” | e “ srcElement ”; alert(o.tagName.toLowerCase();5、創(chuàng)建 script, 插入到 DOM中，加載完畢后 callback 代碼實(shí)現(xiàn) function loadScript (url, callback) var script = document.createElement(“ script ” );script.type =“ text/javascript”;if (script.readyState) /IEscript.onreadystatechange = function () script.readyStateif (script.readyState = “ loaded ” |“compl