前端面试题参考答案

1、1. HTML5和CSS3各有哪些新特性?增加更多的语义化标签：vheader/> vfooter/> vsecti on/> <n av/> <summary/> <details/><dialog/> <progress/> <video/>.全新的<video/>标签，支持播放多种视频格式增加 canvas API 接口增加更多的JS API支持 web sokect2. 说说HTML中<title>和<h1>、<b>和<strong>各有

2、哪些不同？主要区别是语义不同：1. <title/>针对浏览器，<h1/>表示页面内容标题，搜索引擎更重视<h1/> ；2. <b/>仅表示视觉上加粗，<strong/>表示语气强调+样式加粗；a) .读屏软件阅读文字时会对<strong/>加强语气,而会忽略<b/> ；b) .搜索引擎亦会加大<strong/>内容的权重；3. float布局有哪些缺点？是否有替代float的实现方案？如果有，请说说你的实现方法。float不能自由控制对齐方式和换行；需要强制清除浮动，否则后面的内容会错乱；替代fl

3、oat的方案主要用inline-block?给子元素定义display:inline-bolck?4. CSS行内样式与important谁的优先级高？如果行内样式和外部样式同时定义了important,谁的优先级高？important优先级高；如果行内样式和外部样式同时定义了important，那么行内样式的important的优先级高;5. 在同一个CSS文件中定义的两个类.acolor:blue?和.bcolor:red?，如果把它们 同时应用到同一元素上，他们会怎么显示？为什么？页面上怎么显示取决于在css文件中定义的先后位置，后定义的样式会覆盖前面定义的样式；所以：1. 如果.b在.

4、a后面，则.b的color会覆盖.a,显示为red?2. 如果.a在.b后面，则.a的color会覆盖.b,显示为blue?6. 你知道哪些CSS Hack技巧？分别有什么用？IE6 : _属性名前缀IE7 : +属性名前缀IE789: 9 后缀IE7以下：zoom:1 ;能解决不少页面错乱的问题;7. 执行下面的代码会输出什么结果？请将答案填写在括号内的空格处 vscript type= ” text/javascript ” >var x = 1?var y = 1?met hod( 8) ?al er t ( x + y ) ?/ / 结果 1:(5)f unct i on met

5、 hod (y) x += 3?y += 3?al ert ( x + y ) ? / 结果 2 :(15)</script>/请问是先输出 结果1”还是结果2”？( 结果2)8. 有如下HTML代码判断，要求按照 W3C标准实现click每一个<li>元素时弹出其index，请 写出实现思路(或者直接上代码)：<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跨域请求？无刷新、更好的交互体验、节省带宽、加快页面响应速度等等； 跨域：jsonp 或者iframe 提交；6条( CSS/HTML/JS 均10. 在前端开发过程中，会遇到各种浏览器兼容性问题，请至少写出 可)：11. jQuery有哪些事件方法？说说方法.on()和.bind()有哪些区别？on / bind / delegate / unbind / off / once 等;其他模拟浏览器的鼠标事件、键盘事件等其他事件，包含keydow n / keyup /

8、 mouseover /mouseout / mousee nter / mouseleave / click / dlclick / uni oad / con textme nu；on()是jQuery的底层事件方法，bind()和delegate()都是基于on方法实现的；12. 一个并发访问量特别具大的页面，你怎么安排你的CSS、JS和图片？a) .同目录的CSS文件尽量合并成一个并压缩；去除不必要的 CSS文件；b) . CSS里面的图片尽量合并成一个，使用CSS的background-position 应用不同的图片区域；b) .所有被依赖的JS文件压缩成一个js?c) .在不影响

9、视觉效果的情况下，适当的压缩图片质量；d) .如果可能，增大静态文件的浏览器客户端缓存时间；13. 怎么实现鼠标悬停在如下元素上时，使其放大1.2倍，请优先使用CSS3实现并要求兼容IE6+ (好变态的要求)<a class= ” profile <im> src= ""v/a> vstyle type= ” text/css ” >.profile display:block? width:80px? height:80px? .profile:hover/*请在这里实现 */-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.如下有一个超级大的数组，请把它用<li>标签以尽量快的速度渲染到#list元素内？<ul i d=” I i st ”<! - HTML结构模板 <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