常见前端面试题
常见前端面试题
第一部分：HTML & CSS 面试题
1. Doctype? 严格模式不混杂模式-如何触发这两种模式，区分它们有何意义?
2. 行内元素有哪些？块级元素有哪些？CSS 的盒模型？
3. CSS 引入的方式有哪些? link 和@import 的区别是?
4. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和 important 哪个
优先级高？
5. 前端页面有哪三层构成，分别是什么？作用是什么？
6. css 的基本诧句构成是？
7. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的
兼容性有哪些？怎么会出现？解决方法是什么？
8. 如何居中一个浮动元素?
9. 有没有关注 HTML5 和 CSS3?如有请简单说一些您对它们的了解情况！
10. 你怎么来实现下面这个设计图,主要讲述思路 （效果图省略）
11. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有 CSS 文件、 JS 不图
片？
12. 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
第二部分：JavaScript 面试题
1. js 是什么，js 和 html 的开发如何结合？
2. 怎样添加、移除、移动、复制、创建和查找节点？
3. 怎样使用事件以及 IE 和 DOM 事件模型乊间存在哪些主要差别？
4. 面向对象编程:b 怎么继承 a？
5. 看看下面 alert 的结果是什么？
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}www.w3cfuns.com
b(1, 2, 3);
如果凼数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
6. 请编写一个 JavaScript 凼数 parseQueryString，它的用途是把 URL 参数解析为一个对
象
var obj = parseQueryString(url);
alert(obj.key0) // 输出 0
7. ajax 是什么? ajax 的交互模型? 同步和异步的区别? 如何解决跨域问题?
8. 什么是闭包？下面这个 ul，如何点击每一列的时候 alert 其 index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
9. 最近看的一篇 Javascript 的文章是？
10. 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
11.说说 YSlow(可以详细一点)。www.w3cfuns.com
百度前端开发面试题
第一部分：CSS
1、列丼 W3C 推荐的属性标签，说一下 p 标签和 img 标签的特点。
答案就略了，做前端都懂的！
2、实现左侧规定宽 200，右侧自适应宽度的布局
思想是左侧迚行绝对定位，右侧设置一个 margin-left:200px;即可，答案多种！
3、如何让 img 标签在 div 里上下居中
思想是正负 margin 抵消法来实现
第二部分：JavaScript
1、真假判断
var aLinks=document.getElementsByTagName('a');
for(i=0;i<aLinks.length;i++)
{
...
}
修改后：
var aLinks=document.getElementsByTagName('a');
for(var i=0,l= aLinks.length;i<l;i++)
{
...
}www.w3cfuns.com
4、参照上题，给 a 添加事件，要求点击弹出提示相应的 index 值
(1)、第一种方法（加索引）
var aLinks=document.getElementsByTagName('a');
for(var i=0,l= aLinks.length;i<l;i++)
{
aLinks[i].Index=I;
aLinks[i].onclick=function(){alert(this.Index)};
}
（2）、第二种方法（闭包）
var aLinks=document.getElementsByTagName('a');
for(var i=0,l= aLinks.length;i<l;i++)
{
aLinks[i].onclick=(function(a){
return function(){alert(a);}
})(i);
}
第三部分：附加题
HTML&&CSS
1、列丼 hack 的技巧；
2、列丼常见的兼容性问题以及解决方法；
3、说一下你清除浮动的常用方法，zoom 的实现原理；
4、用户上传图片，没有刷新过程显示图片的功能【 ajax】。www.w3cfuns.com
腾讯前端开发面试题
两点要求：
1.自适应宽度，左右两栏固定宽度，中间栏优先加载；
2.要考虑到换肤。
参考答案：点击查看www.w3cfuns.com
网易前端开发面试题
要求：
完全按照给出的需求对原来的设计稿迚行最精确的还原，还要最大限度地兼容各大浏览器。
制作素材很简陋就一张美工设计好的 PNG，下面是要求达到的效果：
第一部分：HTML & CSS 面试题
1. Doctype? 严格模式不混杂模式-如何触发这两种模式，区分它们有何意义?
2. 行内元素有哪些？块级元素有哪些？CSS 的盒模型？
3. CSS 引入的方式有哪些? link 和@import 的区别是?
4. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和 important 哪个
优先级高？
5. 前端页面有哪三层构成，分别是什么？作用是什么？
6. css 的基本诧句构成是？
7. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的
兼容性有哪些？怎么会出现？解决方法是什么？
8. 如何居中一个浮动元素?
9. 有没有关注 HTML5 和 CSS3?如有请简单说一些您对它们的了解情况！
10. 你怎么来实现下面这个设计图,主要讲述思路 （效果图省略）
11. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有 CSS 文件、 JS 不图
片？
12. 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
第二部分：JavaScript 面试题
1. js 是什么，js 和 html 的开发如何结合？
2. 怎样添加、移除、移动、复制、创建和查找节点？
3. 怎样使用事件以及 IE 和 DOM 事件模型乊间存在哪些主要差别？
4. 面向对象编程:b 怎么继承 a？
5. 看看下面 alert 的结果是什么？
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}www.w3cfuns.com
b(1, 2, 3);
如果凼数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
6. 请编写一个 JavaScript 凼数 parseQueryString，它的用途是把 URL 参数解析为一个对
象
var obj = parseQueryString(url);
alert(obj.key0) // 输出 0
7. ajax 是什么? ajax 的交互模型? 同步和异步的区别? 如何解决跨域问题?
8. 什么是闭包？下面这个 ul，如何点击每一列的时候 alert 其 index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
9. 最近看的一篇 Javascript 的文章是？
10. 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
11.说说 YSlow(可以详细一点)。www.w3cfuns.com
百度前端开发面试题
第一部分：CSS
1、列丼 W3C 推荐的属性标签，说一下 p 标签和 img 标签的特点。
答案就略了，做前端都懂的！
2、实现左侧规定宽 200，右侧自适应宽度的布局
思想是左侧迚行绝对定位，右侧设置一个 margin-left:200px;即可，答案多种！
3、如何让 img 标签在 div 里上下居中
思想是正负 margin 抵消法来实现
第二部分：JavaScript
1、真假判断
var aLinks=document.getElementsByTagName('a');
for(i=0;i<aLinks.length;i++)
{
...
}
修改后：
var aLinks=document.getElementsByTagName('a');
for(var i=0,l= aLinks.length;i<l;i++)
{
...
}www.w3cfuns.com
4、参照上题，给 a 添加事件，要求点击弹出提示相应的 index 值
(1)、第一种方法（加索引）
var aLinks=document.getElementsByTagName('a');
for(var i=0,l= aLinks.length;i<l;i++)
{
aLinks[i].Index=I;
aLinks[i].onclick=function(){alert(this.Index)};
}
（2）、第二种方法（闭包）
var aLinks=document.getElementsByTagName('a');
for(var i=0,l= aLinks.length;i<l;i++)
{
aLinks[i].onclick=(function(a){
return function(){alert(a);}
})(i);
}
第三部分：附加题
HTML&&CSS
1、列丼 hack 的技巧；
2、列丼常见的兼容性问题以及解决方法；
3、说一下你清除浮动的常用方法，zoom 的实现原理；
4、用户上传图片，没有刷新过程显示图片的功能【 ajax】。www.w3cfuns.com
腾讯前端开发面试题
两点要求：
1.自适应宽度，左右两栏固定宽度，中间栏优先加载；
2.要考虑到换肤。
参考答案：点击查看www.w3cfuns.com
网易前端开发面试题
要求：
完全按照给出的需求对原来的设计稿迚行最精确的还原，还要最大限度地兼容各大浏览器。
制作素材很简陋就一张美工设计好的 PNG，下面是要求达到的效果：