前端面试题宝典

前端面试题汇总

一、HTML和CSS ............................................................................................................................. 21

1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? .......................... 21 2. 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ ... 21 3. Quirks模式是什么？它和Standards模式有什么区别 ................................................... 21 4. div+css的布局较table布局有什么优点？ ...................................................................... 22 5. img的alt与title有何异同？ strong与em的异同？ ................................................... 22 6. 你能描述一下渐进增强和优雅降级之间的不同吗? ...................................................... 23 7. 为什么利用多个域名来存储网站资源会更有效？ ........................................................ 23 8. 请谈一下你对网页标准和标准制定机构重要性的理解。 ............................................ 24 9. 请描述一下cookies，sessionStorage和localStorage的区别？ .................................... 24 10. 简述一下src与href的区别。 ...................................................................................... 24 11. 知道的网页制作会用到的图片格式有哪些？ .............................................................. 25 12. 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？ .................. 25 13. 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？ ......................................................................... 25 14. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。 ......................................................................................... 25 15. 你如何理解HTML结构的语义化？ .............................................................................. 26 16. 谈谈以前端角度出发做好SEO需要考虑什么？ ......................................................... 27 17. 有哪项方式可以对一个DOM设置它的CSS样式？ ................................................... 28 18. CSS都有哪些选择器？ ................................................................................................... 28 19. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？29 20. 超链接访问过后hover样式就不出现的问题是什么？如何解决？ .......................... 29 21. 什么是Css Hack？ie6,7,8的hack分别是什么？ ......................................................... 30 22. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？ ................................................................................................................................................ 30 23. 什么是外边距重叠？重叠的结果是什么？.................................................................. 31

24. rgba()和opacity的透明效果有什么不同？ ................................................................... 31 25. css中可以让文字在垂直和水平方向上重叠的两个属性是什么？ ............................. 31 26. 如何垂直居中一个浮动元素？ ..................................................................................... 31 27. px和em的区别。 .......................................................................................................... 32 28. 描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？ ............................................................................................................................. 33 29. Sass、LESS是什么？大家为什么要使用他们？ ........................................................... 33 30. display:none与visibility:hidden的区别是什么？ ......................................................... 33 31. CSS中link和@import的区别是： ................................................................................ 34 32. 简介盒子模型： ............................................................................................................. 34 33. 为什么要初始化样式？ ................................................................................................. 34 34. BFC是什么? ..................................................................................................................... 35 35. html语义化是什么？ ...................................................................................................... 35 36. Doctype的作用？严格模式与混杂模式的区别？ ........................................................ 35 37. IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。......................................................................................................................................... 35 38. HTML与XHTML——二者有什么区别？ ....................................................................... 35 39. html常见兼容性问题？ .................................................................................................. 36 40. 对WEB标准以及W3C的理解与认识 .......................................................................... 36 41. 行内元素有哪些?块级元素有哪些?CSS的盒模型? ..................................................... 36 42. 前端页面有哪三层构成，分别是什么?作用是什么? .................................................. 37 43. Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? . 37 44. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？ .................................... 37 45. CSS的盒子模型？ ........................................................................................................... 37 46. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？..................................................................................................................................... 37 47. 如何居中div,如何居中一个浮动元素? ......................................................................... 38 48. 浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？ ................................................................................................... 39 49. 列出display的值，说明他们的作用。position的值， relative和absolute定位原点

是？......................................................................................................................................... 40 50. absolute的containing block计算方式跟正常流有什么不同？ ................................... 40 51. 对WEB标准以及W3C的理解与认识 .......................................................................... 41 52. css的基本语句构成是? ................................................................................................... 41 53. 浏览器标准模式和怪异模式之间的区别是什么? ........................................................ 41 54. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？41 55. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？ ................................................................................................................................................ 42 56. 什么是外边距重叠？重叠的结果是什么？.................................................................. 42 58、描述一个\的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？ ......................................................................................................................... 42 57. 说display属性有哪些？可以做什么？ ........................................................................ 43 58. 哪些css属性可以继承？ ............................................................................................... 43 59. css优先级算法如何计算？ ............................................................................................ 43 60. b标签和strong标签,i标签和em标签的区别？ ......................................................... 43 61. 有那些行内元素、有哪些块级元素、盒模型？ .......................................................... 43 62. 有哪些选择符，优先级的计算公式是什么？行内样式和！important哪个优先级高？ ................................................................................................................................................ 45 63. 我想让行内元素跟上面的元素距离10px，加margin-top和padding-top可以吗？45 64. CSS的盒模型由什么组成？ ........................................................................................... 45 65. 说说display属性有哪些？可以做什么？ .................................................................... 46 66. 哪些css属性可以继承？ ............................................................................................... 46 67. css优先级算法如何计算？ ............................................................................................ 46 二、JS基础 .................................................................................................................................... 46

1. javascript的typeof返回哪些数据类型 ............................................................................ 46 2. 例举3种强制类型转换和2种隐式类型转换? .............................................................. 47 3. split() 、join() 的区别 ....................................................................................................... 47 4. 数组方法pop() push() unshift() shift() .............................................................................. 47 5. 事件绑定和普通事件有什么区别 .................................................................................... 47 6. IE和DOM事件流的区别 .................................................................................................. 48

7. IE和标准下有哪些兼容性的写法 ..................................................................................... 48 8. call和apply的区别 ........................................................................................................... 49 9. b继承a的方法 ................................................................................................................. 49 10. 如何阻止事件冒泡和默认事件 ..................................................................................... 50 11. 添加删除替换插入到某个接点的方法 ......................................................................... 50 12. javascript的本地对象，内置对象和宿主对象 .............................................................. 50 13. window.onload 和documentready的区别 .................................................................... 50 14. ”==”和“===”的不同 .......................................................................................................... 51 15. javascript的同源策略 ...................................................................................................... 51 16. JavaScript是一门什么样的语言，它有哪些特点？ ..................................................... 51 17. JavaScript的数据类型都有什么？ ................................................................................. 52 18. 已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架) ....................................................................................................................................... 53 19. 希望获取到页面中所有的checkbox怎么做？(不使用第三方框架) .......................... 53 20. 设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架) ........................................................................................................................................... 53 21. 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？ ....... 53 22. 看下列代码输出为何？解释原因。 ............................................................................. 54 23. 看下列代码,输出什么？解释原因。............................................................................. 54 24. 看下列代码,输出什么？解释原因。............................................................................. 54 25. 看代码给答案。 ............................................................................................................. 56 26. 已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。 ....................................................................................................... 56 27. 已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。 ............................................................................................................... 56 28. var numberArray = [3,6,2,4,1,5]; （考察基础API） ...................................................... 57 29. 输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26 .............................................................................................................................. 57 30. 将字符串”{$id}{$name}”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式） ...................................................................................... 58

31. 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义 ..................................................................................... 58 32. foo = foo||bar ，这行代码是什么意思？为什么要这样写？ ..................................... 59 33. 看下列代码，将会输出什么?(变量声明提升) ............................................................. 59 34. 用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。 ........... 60 35. 把两个数组合并，并删除第二个元素。...................................................................... 61 36. 怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）......................................................................................................................................... 61 37. 有这样一个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}。 ......... 62 38. 正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？ ..................................................................................... 63 39. 看下面代码，给出输出结果。 ..................................................................................... 63 40. 写一个function，清除字符串前后的空格。（兼容所有浏览器） ........................... 64 41. Javascript中callee和caller的作用？ ........................................................................... 65 42. Javascript中, 以下哪条语句一定会产生运行错误？答案( B C ) ........................... 66 43. 以下两个变量a和b，a+b的哪个结果是NaN？答案( AC ) ............................... 66 44. var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的？答案( B ) .................. 66 45. 下面的JavaScript语句中，（ D ）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空 ................................................................................................................. 66 46. 要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（ A ） ................................................................................................................................................ 67 47. 以下哪条语句会产生运行错误：（AD） ..................................................................... 67 48. 以下哪个单词不属于javascript保留字：（B） .......................................................... 67 49. 请选择结果为真的表达式：（C） ............................................................................... 68 50. Javascript中, 如果已知HTML页面中的某标签对象的id=”username”，用____document.getElementById(‘username’)___ _方法获得该标签对象。 ........................ 68 51. typeof运算符返回值中有一个跟javascript数据类型不一致，它是________”function”_________。 .......................................................................................... 68

本文来源：https://www.bwwdw.com/article/phoh.html