解答反馈面试题.doc

Web 前台工程师面试题一 手写页面DIV居中代码（必须保持各页面兼容）Width:1000px;Margin:0px auto;不要写float二 什么是W3C标准W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。结构标准语言（1）XML XML是The Extensible Markup Language(可扩展标识语言)的简写。现推荐遵循的是W3C于2000年10月6日发布的XML1.0。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语言。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。（2）XHTML XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。现推荐遵循的是W3C于2000年1月26日推荐XML1.0。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。表现标准语言CSS是Cascading Style Sheets层叠样式表的缩写。现推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。行为标准（1）DOM DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。(2) ECMAScript ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。现推荐遵循的是ECMAScript 262三怎样才算是符合W3C标准1、 确保所有的标签都使用小写字母2、 确保所有的属性值都放在引号里3、 确保所有成对标签出现的顺序、不成对的标签都用/结束, ”/”和”之间不要有空格四页面定位如何根据页面扩大移动 或调整分辨率符合页面 不让其飞定位的方法有很多种，它们分别是静态(static)，绝对定位(absolute)，固定(fixed)，相对定位(relative)。利用绝对定位来实现，在父级DIV上定义一个相对定位，这样就能调整分辨率符合页面。如果不定义父级的相对定位会默认定义在body上，这样就会让页面飞掉。五get和POST的区别Get 是从服务器上获得数据，post是用来向服务器上传递数据。Get是不安全的，post的所有操作对用户来说都是不可见的。Get的传输量小，而post可以传输大量的数据。六KEEP-ALIVE属性的作用HTTP协议采用“请求-应答”模式，当使用普通模式，即非KeepAlive模式时，每个请求/应答客户和服务器都要新建一个连接，完成 之后立即断开连接（HTTP协议为无连接的协议）；当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服 务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。七SEION和COOKIE的区别1、cookie数据存放在客户的浏览器上，session数据放在服务器上。2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能,考虑到减轻服务器性能方面，应当使用COOKIE4、单个cookie在客户端的限制是3K，就是说一个站点在客户端存放的COOKIE不能3K。八DOM和BOM的区别DHTML技术各项功能的实现都依赖于使用客户端脚本与浏览器宿主及在宿主中输出的Web页面之间的交互，这种交互是通过对象这个技术手段实现的。 BOM即Browser Object Model浏览器对象模型，是在客户端脚本核心的基础上实现的扩展API，通过该API可以使用脚本访问浏览器窗口及其文档对象的各个方面。BOM从IE3.0/NS3.0开始引入。 在BOM API中，把Web浏览器的各个主要外显特性、Web页面及其标记、内容等都封装成一个个对象，通过这些对象提供的成员访问窗口、文档、元素对象等，并在此基础上实现了对象的事件支持机制。所有BOM对象之间存在一定的关联关系。 学习BOM技术主要就是学习如何利用客户端脚本使用BOM对象，通过这些封装的BOM对象可实现很多DHTML功效。 BOM技术不是标准化的Web技术，因浏览器而异。正因为如此大大限制了DHTML技术的应用领域和发展前景。 不同浏览器实现的BOM技术并不统一，这是造成DHTML技术实现差异的主要原因，由此W3C在BOM技术的基础上进行扩充与改善、优化，制定了新的统一技术规范标准，即DOM（Document Object Model）文档对象模型技术。 DOM技术最初是针对XML文档的解析与控制而制定的技术规范，但可把HTML文档XML化成XHTML文档，使用DOM技术来访问Web页面文档中的各类对象。目前W3C为DOM技术规范制定了三个不同的级别，即DOM Level 1/2/3。IE5/NS6开始全面支持DOM Level 1。有时有人也把BOM技术称为DOM Level 0W3C官方没有此说法！。 DOM技术的核心是把XML（包括XHTML）文档结构解析为树状结构，每个标记看作是一个节点Node，各节点之间存在某种关系，并通过这些关系来相互访问。 DOM技术与XML技术密切相关，涉及的技术内容庞杂，学习难度较高，但掌握了BOM技术后再学习DOM技术就有一定的帮助。 不仅可以在JavaScript之类的脚本语言中使用DOM技术，在Java之类的重量级程序设计语言中也广泛使用DOM技术。九JSON的作用和用法1、方便于传输，较少冗余的字符。当然直接传二进制是最好的，但面临难解析的问题。亦可以是xml、纯字符串的方式，但json有其独到的好处。2、方便转换。有很多的json api提供了json字符串转成对象、对象转换成json串的方法。3、易于阅读。json代码的良好结构，可以很直观地了解存的是什么内容。十IMG和ALT、TITLE的区别alt主要是用在图片无法显示时候的代替文字title就只是鼠标放上时显示文字十一. 怎么清除浮动，至少说出三种方法overflow:hidden; clear:both; zoom:1;十二. HTML5中有哪些标签1. 标记定义一篇文章2. 标记定义页面内容部分的侧边栏3. 标记定义音频内容4. 标记定义图片5. 标记定义一个命令按钮6. 标记定义一个下拉列表7. 标记定义一个元素的详细内容8. 标记定义一个对话框(会话框)9. 标记定义外部的可交互的内容或插件10. 标记定义一组媒体内容以及它们的标题11. 标记定义一个页面或一个区域的底部12. 标记定义一个页面或一个区域的头部13. 标记定义文件中一个区块的相关信息14. 标记定义表单里一个生成的键值15. 标记定义有标记的文本16. 标记定义 measurement within apredefined range17. 标记定义导航链接18. 标记定义一些输出类型19. 标记定义任务的过程20. 标记是用在Ruby annotations 告诉那些不支持 Ruby元素的浏览器如何去显示21. 标记定义对rubyannotations的解释22. 标记定义 ruby annotations.23. 标记定义一个区域 24. 标记定义媒体资源25. 标记定义一个日期/时间26. 标记定义一个视频十三. 什么是CSS，CSS的引入方式，优先级的关系CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML等文件样式的计算机语言。 CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。有三种方法可以在站点网页上使用样式表： 外部样式：将网页链接到外部样式表。 内页样式：在网页上创建嵌入的样式表。行内样式：应用内嵌样式到各个网页元素。优先级为 行内 内页 外部。十四.邮编的正则表达式1-9d5(?!d)十五. XHTML与HTML的区别 XHTML 元素必须被正确地嵌套； XHTML 元素必须被关闭；标签名必须用小写字母；XHTML 文档必须拥有根元素。十六. IE6的双边距的出现原因，怎么解决浮动方向和边距方向相同的时候会出现双边距例如以下这个情况.float:left 和 margin-left:5px 一起用时,ie6 左边距会变成10px解决方法为：display:inline;十七. 网页的颜色一般是几种，不超过几种一般要控制在四种十八. 用什么和后台结合的一般做前台的，和php后台语言配合的多，asp和jsp也有。十九. AJAX是干什么的？Ajax的流程1.什么是ajax? ajax的全称是：asynchronousjavascript xml 2.ajax的定义： ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。3.ajax包括： xhtml和css 使用文档对象模型(documentobjectmodel)作动态显示和交互 使用xml和xslt做数据交互和操作 使用xmlhttprequest进行异步数据接收 使用javascript将它们绑定在一起 web开发领域的最新时髦术语其实质是“旧貌换新颜”。ajax（asynchronousjavascriptandxml）是结合了java技术、xml以及javascript等编程技术，可以让开发人员构建基于java技术的web应用，并打破了使用页面重载的惯例。 ajax是使用客户端脚本与web服务器交换数据的web应用开发方法。这样，web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的web用户界面。ajax应用的基本流程1、从web表单中获取需要的数据2 、建立到服务器的url3 、打开到服务器的连接4、 设置服务器在完成后要运行的函数5 、发送请求二十. 什么是闭包闭包简单的解释是，ECMAScript允许inner functions(嵌套函数)：函数可以定义在另外一个函数里面。这些内部的函数可以访问outer function（父函数）的local变量，参数，其它内部函数。当内部函数被构造，并可以在函数外被获得（函数当成返回值），这个内部函数在 outer function返回后被执行（在outer函数外执行），那一个闭包形成了。闭包特征：A、作为一个函数变量的一个引用，当函数返回时，其处于激活状态；B、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。二十一. Null和undefined 的区别null :表示无值;undefined : 表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性。二十二. 描述css reset的作用和用途Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一二十三. Call和apply的区别call, apply都属于Ftotype的一个方法,它是JavaScript引擎内在实现的,因为属于Ftotype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同. 相同点:两个方法产生的作用是完全一样的不同点:方法传递的参数不同二十四.瀑布流，又称瀑布流式布局。是目前比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着瀑布流效果页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格二十五. 行内元素有哪些？块级元素有哪些？CSS的盒模型？块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding二十六. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？标签选择符 类选择符 id选择符继承不如指定 Idclass标签选择后者优先级高二十七. 前端页面有哪三层构成，分别是什么？作用是什么？结构层 Html 表示层 CSS 行为层 js二十八. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)二十九. 你如何对网站的文件和资源进行优化？期待的解决方案包括文件合并；文件最小化/文件压缩；使用CDN托管；缓存的使用三十. 什么是语义化的HTML？直观的认识标签 对于搜索引擎的抓取有好处三十一. 例举3种强制类型转换和2种隐式类型转换？强制（parseInt,parseFloat,number）； 隐式（= - =）三十二. split() join() 的区别前者是切割成数组的形式，后者是将数组转换成字符串三十三. 数组方法pop() push() unshift() shift()Push()尾部添加 pop()尾部删除；Unshift()头部添加 shift()头部删除三十四. IE和DOM事件流的区别1.执行顺序不一样；2.参数不一样；3.事件加不加on；4.this指向问题三十五. 事件委托是什么让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！三十六. 添加 删除 替换 插入到某个接点的方法obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild三十七. 解释jsonp的原理，以及为什么不是真正的ajax动态创建script标签，回调函数Ajax是页面无刷新请求数据操作三十八. javascript的本地对象，内置对象和宿主对象本地对象为array obj regexp等可以new实例化内置对象为gload Math 等不可以实例化的宿主为浏览器自带的document,window 等三十九. document load 和document ready的区别Document.onload 是在结构和样式加载完才执行jsDocument.ready原生种没有这个方法，jquery中有 $().ready(function)四十. ”=”和“=”的不同”=”会自动转换类型，“=”不会四十一. 写出几种ie6 BUG的解决方法？双边距Bug float引起的 使用display:inline3像素问题 使用float引起的 使用display:inline:-3px 超链接hover点击后失效 使用正确的书写顺序link visited hover activele z-index问题 给伏击添加position:relativePng透明 使用Js代码改Min-height最小高度 ！important解决select在ie6下遮盖 使用iframe嵌套为什么没有办法定义1px左右的宽度容器 ie6默认的行高造成 ，使用overflow:hidden; zoom:0.08; line-height:1px;四十二. Css引入的方式有那些？link和import的区别是？导入：内联：嵌入式：区别：link引用CSS会同时加载import引用CSS会等到页面全部被下载完在加载四十三. 如何区别display:none与visibity:hidden?相同:display:none与visibity:hidden都可以隐藏某个元素不同:display在隐藏元素时，将占位空间也去掉visibity只隐藏内容而不占空间四十四. 前端开发优化问题减少http请求次数：css spirit,data uriJS，CSS源码压缩用hash-table来优化查找少用全局变量缓存DOM节点查找的结果图片预载避免在页面的主题布局中使用table,table要等其中的内容完全下载之后才会显示四十五. CSS中哪些属性可以同父元素继承。Color;font-size;font-family;四十六. 如何居中一个浮动元素?设置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽500?高 300?的层，然后设置层的外边距。divWidth:500px;height:300px;Margin: -150px 0 0-250px;position:relative;left:50%;top:50%;四十七. 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？是策划 UI设计需要转换成程序可实施中的必须的中间环节，这个环节直接关系到页面的正确高效稳定还原策划和UI 设计的效果，同时为程序套接做好程序表现基础载体。这个工作的前景，只能是深造技术流的，模块化管理，新的技术不断更新，对于向后兼容思维的逐步放弃，比如真的淘汰掉IE6后，向前的空间还是有的。前端开发工程师的前景是非常不错的。现在各大IT企业都在招聘这方面的人才。WEB2.0的普及会更加促进本行业本工种的繁荣。四十八. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？涉及到人手、分工、同步；先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；标注样式编写人，各模块都及时标注（标注关键样式调用的地方）； 页面进行标注（例如页面模块开始和结束）； CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）JS 分文件夹存放命民以该JS 功能为准英文翻译；图片采用整合的 images.pngpng8 格式文件使用尽量整合在一起使用方便将来的管理四十九. 下拉框的处理事件是Change五十. 键盘的事件有几种？分别是？在JS中，捕获键盘事件的方法总共有三个，分别是onkeydownonkeypressonkeyup，这三个事件函数招待顺序并不一样：onkeydown - onkeypress -onkeyup，在一般情况下，采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中，会发现这几者有些不同的差别。onkeypress事件不能对系统功能键(例如：后退、删除等，其中对中文输入法不能有效响应)进行正常的响应，onkeydown和onkeyup均可以对系统功能键进行有效的拦截，但事件截获的位置不同，可以根据具体的情况选择不同的键盘事件。由于onkeypress不能对系统功能键进行捕获，导致window.event对象的keyCode属性和onkeydown，onkeyup键盘事件中获取的keyCode属性不同，主要表现在onkeypress事件的keyCode对字母的大小写敏感，而onkeydown、onkeyup事件不敏感；onkeypress