前端面试题汇总 一、HTML和CSS .............................................................. 17
1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? ............ 17 2、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ . 17 3、Quirks模式是什么？它和Standards模式有什么区别 ...... 错误！未定义书签。 4、div+css的布局较table布局有什么优点？ ............................... 17 5、 img的alt与title有何异同？ strong与em的异同？ .................... 17 6、你能描述一下渐进增强和优雅降级之间的不同吗? .......................... 17 7、为什么利用多个域名来存储网站资源会更有效？ ........................... 18 8、请谈一下你对网页标准和标准制定机构重要性的理解。 ..................... 18 9、请描述一下cookies，sessionStorage和localStorage的区别？ ............ 18 10、简述一下src与href的区别。 ......................................... 19 11、知道的网页制作会用到的图片格式有哪些？ .............................. 19 12、知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？ ........ 20
13、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？ ...................................................... 20
14、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。 ................................................................ 20 15、你如何理解HTML结构的语义化？ ....................................... 20 16、谈谈以前端角度出发做好SEO需要考虑什么？ ............................ 21 17、有哪项方式可以对一个DOM设置它的CSS样式？ .......................... 22 18、CSS都有哪些选择器？ ................................................ 22 19、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？23 20、超链接访问过后hover样式就不出现的问题是什么？如何解决？ ............ 23 21、什么是Css Hack？ie6,7,8的hack分别是什么？ ......................... 23 22、请用Css写一个简单的幻灯片效果页面 .................................. 24 24、行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？ 25 25、什么是外边距重叠？重叠的结果是什么？ ................................ 25 26、rgba()和opacity的透明效果有什么不同？ .............................. 25 27、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？ ............. 25 28、如何垂直居中一个浮动元素？ .......................................... 26 29、px和em的区别。 .................................................... 27
30、描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？ 27 31、Sass、LESS是什么？大家为什么要使用他们？ ........................... 27 32、display:none与visibility:hidden的区别是什么？ ..................... 27 34、CSS中link和@import的区别是： ...................................... 28 35、简介盒子模型： ...................................................... 28 36、为什么要初始化样式？ ................................................ 28 37、BFC是什么? ......................................................... 28 38、html语义化是什么？ ................................................. 29 39、Doctype的作用？严格模式与混杂模式的区别？ .......................... 29
1
2
40、IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。解决：加入_display：inline .................................................................. 29 41、HTML与XHTML——二者有什么区别？ .................................... 29 42、html常见兼容性问题？ ............................................... 29 43、对WEB标准以及W3C的理解与认识 ...................................... 30 44、行内元素有哪些?块级元素有哪些?CSS的盒模型? ......................... 30 45、前端页面有哪三层构成，分别是什么?作用是什么? ........................ 30 46、Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?30 47、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ ............... 30 48、CSS的盒子模型？ .................................................... 30
49、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？ 31 50、如何居中div,如何居中一个浮动元素? .................................. 31
51、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？ ........................................................................ 32
52、列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？ 32 53、absolute的containing block计算方式跟正常流有什么不同？ ............. 33
54、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ 55、对WEB标准以及W3C的理解与认识 ...................................... 33 56、css的基本语句构成是? ............................................... 33 57、浏览器标准模式和怪异模式之间的区别是什么? ........................... 33 58、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？33 59、超链接访问过后hover样式就不出现的问题是什么？如何解决？ ............ 34 60、什么是Css Hack？ie6,7,8的hack分别是什么？ ......................... 34 62、请用Css写一个简单的幻灯片效果页面 .................................. 34 63、行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？ 35 64、什么是外边距重叠？重叠的结果是什么？ ................................ 36 65、rgba()和opacity的透明效果有什么不同？ .............................. 36 66、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？ ............. 36 67、如何垂直居中一个浮动元素？ .......................................... 36
68、描述一个\的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？ 37 69、说display属性有哪些？可以做什么？ .................................. 37 70、哪些css属性可以继承？ .............................................. 37 71、css优先级算法如何计算？ ............................................ 37 72、b标签和strong标签,i标签和em标签的区别？ .......................... 38 73、有那些行内元素、有哪些块级元素、盒模型？ ............................ 38 74、有哪些选择符，优先级的计算公式是什么？行内样式和！important哪个优先级高？ 39 75.我想让行内元素跟上面的元素距离10px，加margin-top和padding-top可以吗？39 76.CSS的盒模型由什么组成？ ............................................. 39 77、.说说display属性有哪些？可以做什么？ ............................... 39 78、哪些css属性可以继承？ .............................................. 39 79、css优先级算法如何计算？ ............................................ 39
33
3
80、text-align:center和line-height有什么区别？ ........................ 40 81、前端页面由哪三层构成，分别是什么？作用是什么？ ...................... 40
82、写一个表格以及对应的CSS,使表格奇数行为白色背景，偶数行为灰色，鼠标一上去为黄色背景。 二、JS基础 ................................................................. 40
1、javascript的typeof返回哪些数据类型 ................................. 40 2、例举3种强制类型转换和2种隐式类型转换? .............................. 40 3、split() join() 的区别 ................................................ 40 4、数组方法pop() push() unshift() shift() .............................. 40 5、事件绑定和普通事件有什么区别 ......................................... 40 6、IE和DOM事件流的区别 ................................................ 40 7、IE和标准下有哪些兼容性的写法 ........................................ 41 8、call和apply的区别 .................................................. 41 9、b继承a的方法 ....................................................... 41 10、JavaScript this指针、闭包、作用域 .................................. 41 11、事件委托是什么 ...................................................... 41 12、闭包是什么，有什么特性，对页面有什么影响 ............................ 41 13、如何阻止事件冒泡和默认事件 .......................................... 41 14、添加 删除 替换 插入到某个接点的方法 ................................. 41 15、javascript的本地对象，内置对象和宿主对象 ........................... 41 16、document load 和document ready的区别 ............................... 41 17、”==”和“===”的不同 ............................................... 42 18、javascript的同源策略 ............................................... 42 19、编写一个数组去重的方法 .............................................. 42 20、JavaScript是一门什么样的语言，它有哪些特点？ ....................... 42 21、JavaScript的数据类型都有什么？ ..................................... 42
22、已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架) 43 23、希望获取到页面中所有的checkbox怎么做？(不使用第三方框架) ........... 43 24、设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架) 25、当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？ .... 43 26、看下列代码输出为何？解释原因。 ...................................... 43 27、看下列代码,输出什么？解释原因。 ..................................... 44 28、看下列代码,输出什么？解释原因。 ..................................... 44 29、看代码给答案。 ...................................................... 44
30、已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。 .............................................. 45 31、var numberArray = [3,6,2,4,1,5]; （考察基础API） ................. 45
32、输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26 45 33、将字符串”{$id}{$name}”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式） .......................................................... 46
34、为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义 .................................................. 46
43
40
4
35、foo = foo||bar ，这行代码是什么意思？为什么要这样写？ ............... 46 36、看下列代码，将会输出什么?(变量声明提升) ............................. 46 37、用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。 .... 47 38、把两个数组合并，并删除第二个元素。 .................................. 47 39、怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
47
40、有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。 ................................. 48
41、正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？ .......................................................... 48 42、写一个function，清除字符串前后的空格。（兼容所有浏览器） ............. 49 43、Javascript中callee和caller的作用？ ............................... 49 44、Javascript中, 以下哪条语句一定会产生运行错误？ 答案( B ) .... 50 45、以下两个变量a和b，a+b的哪个结果是NaN？ 答案( C ) .......... 50 46、var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的？答案( B ) ... 50
47、下面的JavaScript语句中，（ D ）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空 ........................................................................ 50
48、要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（ A ） 51 49、以下哪条语句会产生运行错误：（A）A.var obj = (); .var obj = []; Cvar obj = {};
D.ar obj = //; .......................................................... 51 50、以下哪个单词不属于javascript保留字：（B）A.with .parent Cclass
D.oid ................................................................... 51 51、请选择结果为真的表达式：（C）A.null instanceof Object .null === undefined Cnull == undefined
D.aN == NaN ............................................................. 51
52、Javascript中, 如果已知HTML页面中的某标签对象的id=”username”，用____document.getElementById(‘username’)___ _方法获得该标签对象。 ...... 51
53、typeof运算符返回值中有一个跟javascript数据类型不一致，它是________”function”_________。 ........................................................................ 51
54、定义了一个变量，但没有为该变量赋值，如果alert该变量，javascript弹出的对话框中显示___undefined______ 。 ................................................... 51 55、分析代码，得出正确的结果。 .......................................... 51 56、写出函数DateDemo的返回结果，系统时间假定为今天 ..................... 52 57、写出程序运行的结果？ ................................................ 52 58、阅读以下代码，请分析出结果： ........................................ 52 59、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口； 53
5
60、写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉 ................................................................ 53 61、完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。53 62、完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示54 63、截取字符串abcdefg的efg ............................................ 54
64、列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个 54 65、简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明 55 66、希望获取到页面中所有的checkbox怎么做？(不使用第三方框架) ........... 55 67、JavaScript的数据类型都有什么？ ..................................... 55 68、javascript中有哪几种数据类型，分别写出中文和英文。.................. 55 69、javascript中==和===的区别是什么？举例说明。 ........................ 55 70、简述创建函数的几种方式 .............................................. 55 71、Javascript如何实现继承？ ........................................... 56 72、Javascript创建对象的几种方式？ ..................................... 56
73、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？ ........................................................................ 56 74、iframe的优缺点？ ................................................... 56 75、请你谈谈Cookie的弊端？ ............................................. 56 76、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。 ............. 56 77、js延迟加载的方式有哪些？ ........................................... 57 78、documen.write和 innerHTML 的区别？ ................................. 57 79、哪些操作会造成内存泄漏？ ............................................ 57 80、javascript的typeof返回哪些数据类型? ............................... 57 81、split() join() 的区别 ............................................... 57 82、数组方法pop() push() unshift() shift()各表示什么意思？ .............. 57 83、判断一个字符串中出现次数最多的字符，统计这个次数 .................... 58 84、javascript的typeof返回哪些数据类型 ................................ 58 85、例举3种强制类型转换和2种隐式类型转换? ............................. 58 86、split() join() 的区别 ............................................... 58 87、数组方法pop() push() unshift() shift() ............................. 58 88、事件绑定和普通事件有什么区别 ........................................ 58 89、IE和DOM事件流的区别 ............................................... 59 90、IE和标准下有哪些兼容性的写法 ....................................... 59 91、call和apply的区别 ................................................. 59 92、b继承a的方法 ...................................................... 59 93、写一个获取非行间样式的函数 .......................................... 59 94、事件委托是什么 ...................................................... 59 95、闭包是什么，有什么特性，对页面有什么影响 ............................ 60 96、解释jsonp的原理，以及为什么不是真正的ajax ......................... 60 97、javascript的本地对象，内置对象和宿主对象 ........................... 60 98、document load 和document ready的区别 ............................... 60