常见前端面试题

电玩女神 2022-08-19 11:20 133阅读 0赞

常见前端面试题  
**第一部分：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\].οnclick=function()\{alert(this.Index)\};  
\}  
（2）、第二种方法（闭包）  
var aLinks=document.getElementsByTagName('a');  
for(var i=0,l= aLinks.length;i<l;i++)  
\{  
aLinks\[i\].οnclick=(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，下面是要求达到的效果：  
**参考答案：点击查看**www.w3cfuns.com  
**搜狐 JavaScript 面试题**  
要求：  
1、只能在指定的位置填写自己的代码，本文件里的其他代码丌能修改  
2、所有题目都丌允许添加全局变量名  
3、本文件应该能在 firebug 的 console 里正常执行，并输出结果  
4、代码最优化，效率最高  
5、代码注释明确  
1）实现一个遍历数组或对象里所有成员的迭代器。  
2）实现一个叫 Man 的类，包含 attr, words, say 三个方法。  
3）实现一个 URI 解析方法，把 url 里\#乊后的参数解析成指定的数据结构。  
**原题下载及参考答案：****点击查看**  
**更多前端面试题**  
阿里巴巴 web 前端开发面试题 UC(优视)前端面试题  
淘宝 UED Web 前端开发面试题 人人网 JavaScript 面试题  
搜道网前端开发面试题 腾讯实习生网页重构组招聘公开试题  
百度 2010 校园招聘 web 前端开发面试题 盛大在线面试题目