前端面試題參考答案

1、1. HTML5和CSS3各有哪些新特性?增加更多的語(yǔ)義化標(biāo)簽：vheader/> vfooter/> vsecti on/> <n av/> <summary/> <details/><dialog/> <progress/> <video/>.全新的<video/>標(biāo)簽，支持播放多種視頻格式增加 canvas API 接口增加更多的JS API支持 web sokect2. 說(shuō)說(shuō)HTML中<title>和<h1>、<b>和<strong>各有

2、哪些不同？主要區(qū)別是語(yǔ)義不同：1. <title/>針對(duì)瀏覽器，<h1/>表示頁(yè)面內(nèi)容標(biāo)題，搜索引擎更重視<h1/> ；2. <b/>僅表示視覺(jué)上加粗，<strong/>表示語(yǔ)氣強(qiáng)調(diào)+樣式加粗；a) .讀屏軟件閱讀文字時(shí)會(huì)對(duì)<strong/>加強(qiáng)語(yǔ)氣,而會(huì)忽略<b/> ；b) .搜索引擎亦會(huì)加大<strong/>內(nèi)容的權(quán)重；3. float布局有哪些缺點(diǎn)？是否有替代float的實(shí)現(xiàn)方案？如果有，請(qǐng)說(shuō)說(shuō)你的實(shí)現(xiàn)方法。float不能自由控制對(duì)齊方式和換行；需要強(qiáng)制清除浮動(dòng)，否則后面的內(nèi)容會(huì)錯(cuò)亂；替代fl

3、oat的方案主要用inline-block?給子元素定義display:inline-bolck?4. CSS行內(nèi)樣式與important誰(shuí)的優(yōu)先級(jí)高？如果行內(nèi)樣式和外部樣式同時(shí)定義了important,誰(shuí)的優(yōu)先級(jí)高？important優(yōu)先級(jí)高；如果行內(nèi)樣式和外部樣式同時(shí)定義了important，那么行內(nèi)樣式的important的優(yōu)先級(jí)高;5. 在同一個(gè)CSS文件中定義的兩個(gè)類.acolor:blue?和.bcolor:red?，如果把它們 同時(shí)應(yīng)用到同一元素上，他們會(huì)怎么顯示？為什么？頁(yè)面上怎么顯示取決于在css文件中定義的先后位置，后定義的樣式會(huì)覆蓋前面定義的樣式；所以：1. 如果.b在.

4、a后面，則.b的color會(huì)覆蓋.a,顯示為red?2. 如果.a在.b后面，則.a的color會(huì)覆蓋.b,顯示為blue?6. 你知道哪些CSS Hack技巧？分別有什么用？IE6 : _屬性名前綴IE7 : +屬性名前綴IE789: 9 后綴IE7以下：zoom:1 ;能解決不少頁(yè)面錯(cuò)亂的問(wèn)題;7. 執(zhí)行下面的代碼會(huì)輸出什么結(jié)果？請(qǐng)將答案填寫(xiě)在括號(hào)內(nèi)的空格處 vscript type= ” text/javascript ” >var x = 1?var y = 1?met hod( 8) ?al er t ( x + y ) ?/ / 結(jié)果 1:(5)f unct i on met

5、 hod (y) x += 3?y += 3?al ert ( x + y ) ? / 結(jié)果 2 :(15)</script>/請(qǐng)問(wèn)是先輸出 結(jié)果1”還是結(jié)果2”？( 結(jié)果2)8. 有如下HTML代碼判斷，要求按照 W3C標(biāo)準(zhǔn)實(shí)現(xiàn)click每一個(gè)<li>元素時(shí)彈出其index，請(qǐng) 寫(xiě)出實(shí)現(xiàn)思路(或者直接上代碼)：<ul id= ” user-list ” ><li> 張三 </li><li> 李四 </li><li> 王五 </li></ul>var l i st = doc

6、ument . get El ement ByI d( ”user-l i st ”)? var f unc = fun ct i on (eve nt) var t ar get = eve nt. target | | eve nt . srcEl eme nt?var pr eEl em = t ar get . pr evi ous El ement Si bl i ng?var i = 0?whi l e (preElen) i +=1?pr eEl em = pr eEl em pr evi ousEl ement Si bl i ng?al er t(i ) ?l i st. a

7、dd Eve nt Li st e ner (” cl i ck ”，f unc)9. 為什么要用AJAX ?怎么解決AJAX跨域請(qǐng)求？無(wú)刷新、更好的交互體驗(yàn)、節(jié)省帶寬、加快頁(yè)面響應(yīng)速度等等； 跨域：jsonp 或者iframe 提交；6條( CSS/HTML/JS 均10. 在前端開(kāi)發(fā)過(guò)程中，會(huì)遇到各種瀏覽器兼容性問(wèn)題，請(qǐng)至少寫(xiě)出 可)：11. jQuery有哪些事件方法？說(shuō)說(shuō)方法.on()和.bind()有哪些區(qū)別？on / bind / delegate / unbind / off / once 等;其他模擬瀏覽器的鼠標(biāo)事件、鍵盤事件等其他事件，包含keydow n / keyup /

8、 mouseover /mouseout / mousee nter / mouseleave / click / dlclick / uni oad / con textme nu；on()是jQuery的底層事件方法，bind()和delegate()都是基于on方法實(shí)現(xiàn)的；12. 一個(gè)并發(fā)訪問(wèn)量特別具大的頁(yè)面，你怎么安排你的CSS、JS和圖片？a) .同目錄的CSS文件盡量合并成一個(gè)并壓縮；去除不必要的 CSS文件；b) . CSS里面的圖片盡量合并成一個(gè)，使用CSS的background-position 應(yīng)用不同的圖片區(qū)域；b) .所有被依賴的JS文件壓縮成一個(gè)js?c) .在不影響

9、視覺(jué)效果的情況下，適當(dāng)?shù)膲嚎s圖片質(zhì)量；d) .如果可能，增大靜態(tài)文件的瀏覽器客戶端緩存時(shí)間；13. 怎么實(shí)現(xiàn)鼠標(biāo)懸停在如下元素上時(shí)，使其放大1.2倍，請(qǐng)優(yōu)先使用CSS3實(shí)現(xiàn)并要求兼容IE6+ (好變態(tài)的要求)<a class= ” profile <im> src= ""v/a> vstyle type= ” text/css ” >.profile display:block? width:80px? height:80px? .profile:hover/*請(qǐng)?jiān)谶@里實(shí)現(xiàn) */-webkit-tra nsform: scale(1.2)?-m

10、oz-tra nsform: scale(1.2)?-o-tra nsform: scale(1.2)?-ms-tra nsform: scale(1.2)?tran sform: scale(1.2)?+zoom: 1.29?/* IE67 */zoom: 1.29?/* IE8 */width:80px? height:80px?</style>14.如下有一個(gè)超級(jí)大的數(shù)組，請(qǐng)把它用<li>標(biāo)簽以盡量快的速度渲染到#list元素內(nèi)？<ul i d=” I i st ”<! - HTML結(jié)構(gòu)模板 <l i >1</1 i ><

11、l i >2</1 i ><l i>99999</1 i ><l i>1 00000</ l i >-></ ul><scri ptt y pe =t ext / javas cr i pt ”varar r ='a','b','c' , ?varht m =;,1 en =ar r . l engt h ,i ?f or(i =0?i <l en?i + + ) ht m . push( ' <1 i >' + ar r i +' </ I i > ') docu me nt . get El eme ntByld( "list ”). i nn e r HTML = ar r . j o in('')</ scr i pt >15