2014年最新web前端开发面试题

1、这篇文章很好地收集了2014年网络前端开发工程师的面对面问题和参考答案，推荐给你参考。试题目录：1.HTML部分2.CSS部分3.JavaScript部分4.其他问题面试中的注意事项：面试主题：根据你的级别和职位变化，从初级到专家级：范围、深度和方向。主题类型：技术愿景、项目细节、理论知识、算法、开放式问题、案例问题。提问：确保你不理解这些问题，直到面试官开始理解它们。这将大大扩展问题的区分和深度，并了解你的实际能力。因为这种相关的知识是一项长期的研究，绝对不是暂时的。不管答案有多好，面试官(也许是你的直接领导)都会考虑我是否希望这个人成为我的同事。所以态度非常重要。(感觉更像是相亲)高级工程

2、师可能会混淆绝对和相对，所以不要听其自然，因为团队需要你作为一个有可靠才能的人。试题大纲：HTMLCSS:了解网络标准、浏览器内核差异、兼容性、黑客、CSS基础：布局、盒子模型、选择器优先级和用法、HTML5、CSS3、移动适配JavaScript:数据类型、面向对象、继承、闭包、插件、范围、跨域、原型链、模块化、定制事件、内存泄漏、事件机制、异步负载回调、模板引擎、Nodejs、JSON、ajax等。其他：HTTP，安全性，正规化，优化，重构，响应，移动，团队协作，可维护性，搜索引擎优化，UED，架构，职业网络前端工程师知识要点：1.DOM结构:两个节点之间可能存在什么关系，以及如何在节点之

3、间任意移动。2.如何添加、删除、移动、复制、创建和查找节点等。3.事件如何使用事件以及IE和标准DOM事件模型之间的区别。4.这是什么，如何完全执行GET请求，以及如何检测错误。5.严格模式和混杂模式如何触发这两种模式，区分它们的意义是什么？6.框模型的外边界、内边界和边界与IE8浏览器中框模型之间的关系7.块级元素和内联元素如何使用CSS来控制它们，以及如何合理地使用它们8.浮动元素如何使用它们，它们有什么问题以及如何解决它们。9.HTML和XHTML有什么区别？你认为应该使用哪个？为什么？10.JSON 功能、目的和设计结构。HTMLDoctype函数？如何区分严格模式和混杂模式？他们是什

4、么意思？(1)声明位于文件的前面和标签的前面。告诉浏览器的解析器，使用什么文档类型规范来解析该文档？(2)严格的排版模式和JS操作模式基于浏览器支持的最高标准。(3)在混杂模式下，页面以宽松的向后兼容方式显示。模拟旧浏览器的行为，防止网站失败。(4)、DOCTYPE不存在或格式不正确，这将导致文档以混杂模式呈现。什么是内嵌元素？什么是块级元素？什么是空元素？(1)CSS规范规定每个元素都有一个显示属性，决定元素的类型，并且每个元素都有一个默认的显示值。例如，div的默认显示属性值是“块”并成为“块级”元素。Span默认显示属性值为“内联”并且是“内联”元素。(2)内嵌元素有：a b span

5、img输入选择强(强调)块级元素是：divul olli dldtddh1h2h3h4.p(3)众所周知的空元素：鲜为人知的是：链接和import有什么区别？(1)链接是一个XHTML标签，而import是由CSS提供的；(2)当页面被加载时，链接将同时被加载，而由import引用的CSS将等待直到页面被加载。(3)导入只能在IE5之上识别，而链接是XHTML标签，没有兼容性问题；(4)链接样式的权重高于import。浏览器的核心是什么？* IE浏览器的内核三叉戟，Mozilla的壁虎，Chrome的眨眼(WebKit的一个分支)，Opera的内核是Presto，但现在眨眼；常见的兼容性问题？

6、* png24位图片在iE6浏览器上有背景。解决办法是制造八国集团。*浏览器默认边距和填充不同。解决方法是添加一个全局* margin:0划桨：0；统一。* ie6显示，当ie6的两侧远离bug:属性标记float后有横向边距时，边距大于IE6中的设置。浮动ie # box float:left宽度：10 px；margin:0 0 0 100px在这种情况下，工业工程将产生20像素的距离。解决方案是将 _ display:inline内联添加到浮动的标签样式控件。将其转换为内联属性。(_此符号仅由ie6识别)渐进识别的方法逐渐将部分从整体中排除。首先，通过使用标签“9”，IE浏览器被巧妙地从

7、所有情况中分离出来。然后，再次使用 将IE8与IE7和IE6分开，这样IE8已被独立识别。钢性铸铁。bb背景色： # f1ee 18；/*所有标识*/。背景-color : # 00 deff 9；/*IE6、7、8标识*/背景-color:#a200ff。/*IE6，7标识*/_ background-color : # 1e 0bd 1；/*IE6标识*/* IE，您可以使用获取一般属性的方法来获取自定义属性。您也可以使用getAttribute()来获取自定义属性；在火狐下，只有getAttribute()可以用来获取自定义属性。解决方案：通过getAttribute()获取自定义属性。

8、* IE，即使对象有X和Y属性，但没有Pagex和Pagey属性；在火狐下，事件对象有页面和页面属性，但没有X和Y属性。*解决方法：(条件注释)缺点是在IE浏览器下，额外的HTTP请求数量可能会增加。*默认情况下，小于12px的文本将被强制以12px显示在Chrome中文界面下。您可以添加CSS属性-网络工具包-文本-大小-调整：无；下定决心。访问超链接后，悬停样式不会出现。单击的超链接样式没有悬停和活动。解决方案是改变CSS属性：的顺序l-V-H-A : A :链接 A :已访问 A :悬停 A :活动 html5有哪些新特性，哪些元素被删除了？如何处理HTML5新标签的浏览器兼容性问题？如

9、何区分超文本标记语言和超文本标记语言？* HTML5不再是SGML的子集。它主要是关于图像、位置、存储、多任务和其他功能的增加。*绘画画布用于媒体回放的视频和音频元素本地离线存储本地存储长期存储数据，关闭浏览器后数据不会丢失；浏览器关闭后，会话存储的数据会自动删除。语义上更好的内容元素，如文章、页脚、标题、导航、章节表单控制、日历、日期、时间、电子邮件、url、搜索新技术网络工作者、网络社会、地理定位*删除的元素纯表达式的元素：basefont，big，center，font，s，strike，tt，u；对可用性有负面影响的元素：框架、框架集、非框架；支持HTML5新标签：* IE8/IE7/

10、IE6支持由文档生成的标记。这个特性可以用来使这些浏览器支持新的HTML5标签。浏览器支持新标签后，您需要添加标签的默认样式：*当然，最好的方法是直接使用成熟的框架，而html5shim框架是最常用的框架。如何区分：DOCTYPE声明新结构元素功能元素语义理解？用正确的标签做正确的事情！语义html是为了使页面内容结构化，便于浏览器和搜索引擎分析。它也以没有样式CCS的文档格式显示，并且易于阅读。搜索引擎爬虫依靠标签来确定每个关键词的上下文和权重，这有利于搜索引擎优化。它使得阅读源代码的人更容易将网站分成几个块，以便于阅读、维护和理解。HTML5的离线存储？本地存储长期存储数据，在浏览器关闭后

11、数据不会丢失。关闭浏览器后，会话存储数据会自动删除。描述一个语义html代码。(许多新标签(如、和等。)已添加到HTML5)基于语义设计原则)div id=header H1标题/h1H2聚焦网络前端技术/h2/diviframe的缺点是什么？*iframe阻止主页上的Onload事件；*iframe与主页共享连接池，而浏览器对同一域的连接有限制，这将影响页面的并行加载。在使用iframe之前，需要考虑这两个缺点。如果需要使用iframe，最好使用javascript。向iframe动态添加src属性值可以避免上述两个问题。请描述cookies、会话存储和本地存储之间的区别？Cookie在浏览

12、器和服务器之间来回传递。会话存储和本地存储不会话存储和本地存储具有更大的存储空间；会话存储和本地存储有更丰富和易于使用的界面。会话存储和本地存储的独立存储空间；如何实现浏览器中多个标签之间的通信？(阿里)调用本地存储方法，如本地存储和cookieswebSocket如何与低级浏览器兼容？(阿里)XHR基于多部分编码，XHR基于长轮询钢性铸铁CSS的盒子模型怎么样？(1)有两种类型：IE盒模型和标准W3C盒模型；工业工程的内容部分包括边框和填充；(2)框模型：内容、填充、边距、边框。什么是CSS选择器？哪些属性可以继承？优先级算法是如何计算的？CSS3中新的伪类是什么？* 1.id选择器(# m

13、yid)2.类选择器(。myclassname)3.标签选择器(div，h1，p)4.相邻选择器(h1 p)5.副选择器(ul li)6.后代选择器(阿利)7.通配符选择器(*)8.属性选择器(arel=external)9.伪类选择器(a3360hover，li3360nth-child)*可继承的样式：font-sizefont-familycolor，ulliddddt*不可继承的样式：边框填充边距宽度高度；*优先级最近原则，在相同权重下，以风格定义中最接近的为准；*装载方式应以最后装载的位置为准。优先级是：！重要id类别标签重要比内联具有更高的优先级例如，CSS3添加了虚拟类：p :第一类型选择属于其父元素的第一个元素的每个元素。p :最后类型选择属于其父元素的最后一个元素的每个元素。p :类型唯一选择每个对其父元素唯一的元素。P:only