笔者总结的一些前端面试笔试试题（仅供参考，如果错误，望指教）--1
2013-10-31 09:52
549 查看
1. strict和transitional两种文档声明模式有何区别意义？如何声明html5？
(xhtml的w3c标准规定所有的标签必须闭合，所有的属性必须加引号。)
strict是严格模式，transitional是过度模式。
Strict文档声明模式，它不支持表现层的属性和标签，将结构和表现分开，使得维护一个站点非常容易.。
Transitional是更加宽容的规范。
如果用户大多是使用老式浏览器的，那么使用transitional文档声明模式，反之使用strict。如果页面使用css外部文件，并且页面中不包含控制表现层的标记，就可以使用strict模式。
<!DOCTYPE html>
2. .box{float:left;margin-left:10px;}有何兼容性问题？如何解决？
在IE6下会有左外边距变成双倍的现象，解决办法：
a.可以把display设置为inline；
b.把双倍边距改为单倍5px。
此两方法都可以单独对IE6设置，即使用下划线。（边距翻倍只有当元素的边距碰到包含块时才发生。）
3. 简述清除浮动的方法？
a.
使用after伪类方法，即xx:after {content:”.”; height:0; visibility:hidden; display:block; clear:both; }(不推荐)
b.
Overflow设置为hidden或者auto，同时设置宽或者高。
c.
使用额外标签清除浮动（w3c推荐）《div style=“clear：both”》《/div》如果使用br需要设置height为0；
d.
使用float-in-float方法，即把你要清理浮动的元素外层的div加上float：left；
4. 简述display：none和visibility：hidden的区别？
Visibility:hidden隐藏元素，但是在浏览时保留位置；display：none视元素不存在，而且不加载。（即元素的宽高各种属性都将失去）
5. .box{ background-position:5px 10px; backgroung-repeat:no-repeat; background-image: url(teIcon.gif); background-color: red; padding-left: 10px; padding-bottom: 5px; padding-top: 4px; }如何优化此段代码？
.box{background:red url((teIcon.gif) 5px 10px no-repeat; padding:4px 0 5px 10px;}
(注：padding:10px 6px 12px;表示上边距是10像素，左右边距是6像素，下边距是12像素。padding的默认值是0。)
6. 你如何优化页面？
a.
把css代码放置到一个外部文件，在head区调用，同时要做css优化，包括css代码优化和css重用优化。
b.
尽量符合w3c标准，尽量用div+css架构，（table布局会多很多代码）
c.
在保证图片质量的前提下尽量降低图片的大小，推荐用gif格式。尽量使用背景图片而不是直接加载图片，利用css sprite技术。
d.
将js代码放置到外部文件中，通过script调用。
7. 说说你用过的js框架？
jQuery,基于jquery之上的jquery ui和jqgrid。
8. 什么是闭包？
a.首先是一个函数被另一个函数嵌套
b.其次这个嵌套的函数被返回
c.并且这个嵌套的函数使用了被嵌套函数的变量。
满足此三个条件就形成了一个闭包。
（好处：模拟面向对象的风格，更优雅、更简洁的表达出代码，在某些方面提高执行效率。实现封装函数。）
9. 运行结果
Function b（x,y,a）{
a = 10;
alert(arguments[1]);
}
b(1,2,3)
执行结果是：2
10.（自己编一个：使用文档碎片把颜色值（"red", "green", "blue", "magenta", "yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple"）添加到页面里）
代码：
<script type=”text/javascript”>
function addText(){
var colors=["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple"];
var oFra = document.createDocumentFragment();
for(var i=0;i<colors.length;i++){
var oP = document.createElement('p');
//alert(oP);
var oText = document.createTextNode(colors[i]);
oP.appendChild(oText);
oFra.appendChild(oP);
}
document.body.appendChild(oFra);
}
</script>
<body onload = “addText()”>
</body>
11.你在做页面时，都测试过哪些浏览器？你用过哪些测试工具？
火狐、chrome、IE6和IE7、8、9、10.
IEtester
(xhtml的w3c标准规定所有的标签必须闭合，所有的属性必须加引号。)
strict是严格模式，transitional是过度模式。
Strict文档声明模式，它不支持表现层的属性和标签，将结构和表现分开，使得维护一个站点非常容易.。
Transitional是更加宽容的规范。
如果用户大多是使用老式浏览器的，那么使用transitional文档声明模式，反之使用strict。如果页面使用css外部文件，并且页面中不包含控制表现层的标记，就可以使用strict模式。
<!DOCTYPE html>
2. .box{float:left;margin-left:10px;}有何兼容性问题？如何解决？
在IE6下会有左外边距变成双倍的现象，解决办法：
a.可以把display设置为inline；
b.把双倍边距改为单倍5px。
此两方法都可以单独对IE6设置，即使用下划线。（边距翻倍只有当元素的边距碰到包含块时才发生。）
3. 简述清除浮动的方法？
a.
使用after伪类方法，即xx:after {content:”.”; height:0; visibility:hidden; display:block; clear:both; }(不推荐)
b.
Overflow设置为hidden或者auto，同时设置宽或者高。
c.
使用额外标签清除浮动（w3c推荐）《div style=“clear：both”》《/div》如果使用br需要设置height为0；
d.
使用float-in-float方法，即把你要清理浮动的元素外层的div加上float：left；
4. 简述display：none和visibility：hidden的区别？
Visibility:hidden隐藏元素，但是在浏览时保留位置；display：none视元素不存在，而且不加载。（即元素的宽高各种属性都将失去）
5. .box{ background-position:5px 10px; backgroung-repeat:no-repeat; background-image: url(teIcon.gif); background-color: red; padding-left: 10px; padding-bottom: 5px; padding-top: 4px; }如何优化此段代码？
.box{background:red url((teIcon.gif) 5px 10px no-repeat; padding:4px 0 5px 10px;}
(注：padding:10px 6px 12px;表示上边距是10像素，左右边距是6像素，下边距是12像素。padding的默认值是0。)
6. 你如何优化页面？
a.
把css代码放置到一个外部文件，在head区调用，同时要做css优化，包括css代码优化和css重用优化。
b.
尽量符合w3c标准，尽量用div+css架构，（table布局会多很多代码）
c.
在保证图片质量的前提下尽量降低图片的大小，推荐用gif格式。尽量使用背景图片而不是直接加载图片，利用css sprite技术。
d.
将js代码放置到外部文件中，通过script调用。
7. 说说你用过的js框架？
jQuery,基于jquery之上的jquery ui和jqgrid。
8. 什么是闭包？
a.首先是一个函数被另一个函数嵌套
b.其次这个嵌套的函数被返回
c.并且这个嵌套的函数使用了被嵌套函数的变量。
满足此三个条件就形成了一个闭包。
（好处：模拟面向对象的风格，更优雅、更简洁的表达出代码，在某些方面提高执行效率。实现封装函数。）
9. 运行结果
Function b（x,y,a）{
a = 10;
alert(arguments[1]);
}
b(1,2,3)
执行结果是：2
10.（自己编一个：使用文档碎片把颜色值（"red", "green", "blue", "magenta", "yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple"）添加到页面里）
代码：
<script type=”text/javascript”>
function addText(){
var colors=["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple"];
var oFra = document.createDocumentFragment();
for(var i=0;i<colors.length;i++){
var oP = document.createElement('p');
//alert(oP);
var oText = document.createTextNode(colors[i]);
oP.appendChild(oText);
oFra.appendChild(oP);
}
document.body.appendChild(oFra);
}
</script>
<body onload = “addText()”>
</body>
11.你在做页面时，都测试过哪些浏览器？你用过哪些测试工具？
火狐、chrome、IE6和IE7、8、9、10.
IEtester
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 笔者总结的一些前端面试笔试试题（仅供参考，如果错误，望指教）--2
- 前端面试题目（都是一些总结的，从各处摘抄的题目）
- 前端面试试题 总结（一）
- 前端笔试与面试问题——总结
- 一些优秀的面试笔试总结
- 链表的一些常见笔试面试问题总结及代码
- 笔试面试中遇到的一些智力题总结和思考，欢迎补充和指正
- 关于前端学习和笔试面试的总结
- 自己总结的一些关于前端和php的面试中的常见的问题
- web前端面试试题总结---css篇
- 关于前端学习和笔试面试的总结
- 面试总结三---2015百度校园招聘长沙站前端工程师笔试面试经历
- 笔试面试中遇到的一些智力题总结和思考，欢迎补充和指正
- 百度前端笔试面试7个试题
- web前端面试试题总结---javascript篇
- 秋招前端笔试面试的一些知识点
- 2014-07-18笔试面试总结（前端）
- IT面试2014校招笔试面试全面总结分析回顾（有点早，仅供参考）
- 总结的一些前端开发笔试题
- 9-30做的一些笔试面试题目总结