面试 总结

HTML

1.你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？

IE：trident内核 firefox：gecko内核 safari：weikit内核 cheome（opera）：Blink

2.每个HTML文件开头都有DOCTYPE,知道这是做什么的么？

告诉浏览器按照何种规范解析页面（html or xhtml）

3.Quirks模式是什么，它和Standards模式有什么区别？怪异模式/标准模式

• Quirks模式是ie6之前采用兼容之前的布局方式。
• 在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度， 而在Quirks
• 模式下，IE的宽度和高度还包含了padding和border。
• 在Standards模式下，给等行内元素设置wdith和height都不会生效，而 在quirks模式下，则会生效。

4.Div+css的布局较table布局有什么优点

改版方便、加载更快、结构化清晰、表现与结构相分离、seo更友好

5.img的alt和title有何异同？Strong和em的异同？

•  Alt是img的特有属性，用于图片无法加载显示、读屏器阅读图片，可提高图片可 访问性，搜索引擎会重点分析。
•  Title为元素提供附加的提示信息，用于鼠标滑到元素上的时候显示。
•  Stong为粗体强调，em为斜体强调，更强烈

6.为什么利用多个域名来存储网站资源会更有效？

• Cdn缓存更方便、突破浏览器并发限制、
• Cookieless, 节省带宽，尤其是上行带宽 一般比下行要慢
• 防止不必要的安全问题( 上传js窃取主站cookie之类的)

7.简述一下src和href 的区别

•  Src指向外部资源的位置，用于替换当前元素，如js脚本、图片等元素
•  Href指向网络资源所在的位置，用于在当前文档和引用资源间确定联系，加载css

8.知道什么是微格式吗？

是一种开放的数据格式，可以让机器可读的语义化XHTML词汇的集合。让网站内容 在 搜索引擎结果界面可以显示额外的提示。

9.用户刷新网页，一次js请求一般情况有哪些地方会有缓存处理？

Dns处理、cdn处理、浏览器缓存、服务器缓存

10.请谈一下你对网页标准和指定标准机构重要性的理解

都是为了便于优化，减少bug，降低开发成本，提高seo，提高网站易用性

11. 你如何理解HTML结构的语义化

•  去掉样式后页面呈现清晰的结构
•  屏幕阅读器会根据你的标记来“读”你的网页
•  搜索引擎会更好的理解页面
•  便于团队开发和维护

12. 谈谈以前端角度出发做好seo需要考虑什么

• 语义化HTML标签
• 合理的title、description、keywords
• 重要的html代码放钱钱
• 少用iframe，搜索引擎不会抓取iframe中的内容
• 图片加上alt

13. 如何进行网站性能性优化

• 减少HTTP请求：合并文件、压缩文件、使用css精灵、减少iframe
• 图片延迟加载、使用css精灵
• 将样式放在页面顶部，将js放在页面底部，js、css都外部引入

14. 页面布局中常听过结构与表现分离，那么结构是？表现是？

xhtml或html、css

15. 怎么样才能让层显示在FLASH之上呢?

给FLASH设置透明:

16. XML描述的是。

数据的本身

17.如果站点服务器支持安全套接层(SSL)，那么所有URL开头是。

SHTTP

18.WWW的组成主要包括。

URL、HTML、HTTP

19.网页制作工具按其制作方式分，可以分为？

标记型网页制作工具、“所见即所得”型网页制作工具

20.母版页的作用是什么?

母版页相当于网页的模板。在其他网页中，只要引用了母版页，母版页的页面就可以自 动显示出来，设计者可以修改引用的母版页中预留的部分，其它部分保持不变，这样就 可以使多个页面的风格保持一致，给网页设计带来了很大的方便。

22.css sprite是什么，有事么特点

•  将多个小图片拼接到一个图片中，通过background-position和元素尺寸来显示。
•  减少http请求，提高页面加载速度、更换风格方便
•  图片合并麻烦、维护麻烦

23. Link和@import的区别

•  Link是html方式，@import是css方式
•  浏览器对link的支持早于@import
•  @import必须在样式规则之前，可以在css 文件中引用其他文件
•  总体来说：link优于@import

CSS

1.css有哪些选择器

派生选择器（html标签）、id选择器、类选择器、属性选择器

2.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

display:none、visibility：hidden、宽高为0，opacity:0;z-index:-1000;

3.什么是Css Hack？ie6,7,8的hack分别是什么？

不同浏览器对css的支持和解析不一样，针对不同的浏览器写不同的CSS 的过程

•  background-color:red\9;       /*all ie*/  
•  background-color:yellow\0;    /*ie8*/ 
• +background-color:pink;        /*ie7*/ 
• _background-color:orange;      /*ie6*/

6.Sass、LESS是什么？大家为什么要使用他们(less 只是在 CSS 语法上做了扩展)

他们是CSS预处理器,是CSS上的一种抽象层,一种特殊的语法/语言编译成CSS。

• 结构清晰，便于扩展
• 可以方屏蔽浏览器私有语法差异。
• 可以轻松实现多重继承。
• 完全兼容 CSS 代码。

  7.知道css有个content属性吗？有什么作用？有什么应用？  　　

css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。
　　 最常见的应用是利用伪类清除浮动。
　　 .clearfix:after {content:".";display:block;height:0;visibility:hidden;clear:both; } 
　　 .clearfix { *zoom:1;  } 
 

IE BUG

1、 当float和margin同时使用时， IE6的双倍边距BUG

加上display:inline

2、 为什么无法定义1px左右高度的容器？

IE6,因为默认的行高，解决：overflow:hidden | zoom:0.08 | line-height:1px

3.超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过不在具有hover和active，顺序：L-V-H-A（link,visited,hover,active）

4. Ie6不支持min-height，解决办法是使用css hack

!--[if ie 6]

Div{min-height:100px;  height:auto !Important;  height:100px;}

![end]--

5. ol内li的序号全为1，不递增。

li设置样式{display：list-item}

6. Ie6在设置height 小于font-size时的高度值为font-size，

font-size：0；

7. Ie6-7不支持display：inline-block的解决方法设置inline并触发haslayout

Display:inline-block; *display:inline; *zoom:1

Js

1.javascript 有哪几种数据类型

六种基本数据类型 Undefined、null、string、boolean、number、symbol

一种引用类型 Object

2.Js有哪几种方法定义函数

函数声明表达式、function操作符、function构造函数

3.js有哪些方法定义对象

对象字面量：var obj={}、构造函数：var obj=new Object()、Object.creatr()

开放式

一般问题

1、你关注的博客、技术论坛有那些？（具体频道）

csdn、张鑫旭、白像、梦想天空、前端开发 、腾讯cdc（用户体验）、ued学院 2、你常用的开发环境是怎样的？比如操作系统，文本编辑器，浏览器，及其他工具等。

Eclipse+jdk+tomcat、sublime、chrome调试工具

3、你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充 ，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

• “优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

旧版的浏览器你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

• “渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。

4、你都使用那些工作来测试代码的性能？

•例如JSPerf (http://jsperf.com/)

•例如Dromaeo (http://dromaeo.com/)

5、什么是FOUC？你如何来避免FOUC？

如果使用import方法对CSS进行导入,会导致某些页面在的IE出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效,简称为FOUC.

原因大致为：

• 使用import方法导入样式表。
• 将样式表放在页面底部
• 有几个样式表，放在html结构的不同位置。

解决方法：使用LINK标签将样式表放在文档HEAD中

6、你能说说你其中你觉得最好的项目么？

优时代，ps+css3+html5+js+jq+bootstrap

Pc端使用bootstrap框架，实现半响应式布局，利用css3实现良好交互效果。

App端使用html5实现各个页面的制作。

前台、商户和后台，调试各种样式问题及兼容性问题

7、你以前用过什么javascript框架和类库吗？各有什么特点？

JQuery,简单灵活，简化了对dom的操作

8、你都了解哪些后台动态脚本语言？、

C#，JAVA，PHP、js

9、说说html5添加的新特性中哪些你最瞩目？

新的文档类、

新增与表单相关的属性（autofocus、placeholder、required等）

语义Header和Footer 

Audio  、Video、 Canvas、SVG等的支持

HTML相关问题

1、浏览器标准模式和怪异模式之间的区别是什么？

标准模式：浏览器按W3C标准解析执行代码；

怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

他们最大的不同是对盒模型的解析。

2、使用XHTML的局限有那些？

• xhtml要求严格：放弃了一些语义不好的标签，必须有head、body，每个dom必须 要闭合。一些老的浏览器并不兼容。
• IE不支持application/xhtml+xml类型
• 一些老的浏览器不支持，最新的浏览器都将支持application/xhtml+xml媒体类型。

3、如果网页内容需要支持多语言，你会怎么做？

使用统一的UTF-8编码

4、在HTML5的页面中可以使用XHTML的语法吗？

可能有的浏览器会渲染出来，别的浏览器就不行了，会导致你的程序在展现上与你的预 期会有很大的差异，同时ie系对html5的支持也比较差的。

5、在HTML5中如何使用XML？

透过 javascript(jQuery) 去解析 xml、透过后端程序(php, jsp, c# ..)，载入 xml 

6、’data-’属性的作用是什么？

data-是HTML5为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。

7、请描述一下cookies、sessionStorage和localStorage的区别？

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不 必要地来回传递。

sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。

共同点：

• 都是保存在浏览器端，且同源的。

区别：

• cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
• 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
• 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
• 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
• Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
• Web Storage 的 api 接口使用更方便

CSS相关问题

1、描述css reset的作用和用途。

reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。

2、清除浮动的方法有那些，分别适用于什么情形。

• 添加额外标签，<div style=”clear:both”></div>
• 使用 br标签和其自身的 html属性 <br clear="all" /> 
• 父元素设置 overflow：hidden
• 使用:after 伪元素

由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。 

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

3、你最喜欢的图片替换文字的方法是什么。（适合屏幕阅读器的图像替换技术）

Phark 的方法----text-indent:-5000px;

Gilder/Levin 的方法 (推荐)---空标签，absolute

4、在书写高效CSS文件时会有哪些问题需要考虑。

CSS书写顺序、使用CSS缩写属性、简写命名、16进制颜色代码缩写

• 位置属性(position, top, right, z-index, display, float等) 
• 大小(width, height, padding, margin) 
• 文字系列(font, line-height, letter-spacing, color- text-align等) 
• 背景(background, border等) 
• 其他(animation, transition等) 

  5、请写一个简单的幻灯效果页面 →如果不使用JS来完成，可以加分。

hr

1、请你自我介绍一下你自己？

回答提示：一般人回答这个问题过于平常，只说姓名、年龄、爱好、工作经验，这些在简历上都有。其实，企业最希望知道的是求职者能否胜任工作，包括：最强的技能、最深入研究的知识领域、个性中最积极的部分、做过的最成功的事，主要的成就等，这些都可以和学习无关，也可以和学习有关，但要突出积极的个性和做事的能力，说得合情合理企业才会相信。企业很重视一个人的礼貌，求职者要尊重考官，在回答每个问题之后都说一句“谢谢”，企业喜欢有礼貌的求职者。

2、你觉得你个性上最大的优点是什么？

适应能力比较强。

求知欲强，钻研新的技能。Web更新很快，不断学习，否则更不上发展的步伐

3、说说你最大的缺点？

不太会说no、性格直 不够圆滑、考虑问题有时候不是很全面

4、你对加班的看法？

如果工作需要我会义不容辞加班，但尽量提高工作效率，减少不必要的加班。

5、你对薪资的要求？ 

公司给定的一个范围

6、在五年的时间内，你的职业规划？

富的经验和沟通能力，当然主要还是配合公司的发展。

7、你朋友对你的评价？

摩羯座工作狂

8、你还有什么问题要问吗？

主要职责、新入职的员工是否有培训、什么时候出结果

员工福利、五险一金基数、加班、实习薪资

9、如果录用了你，但工作一段时间却发现你根本不适合这个职位，你怎么办？

会不断的去学习，减少差距

10、在完成某项工作时，你认为领导要求的方式不是最好的，自己还有更好的方法，你应该怎么做？

首先尊重和服从领导的安排，找机会委婉的表明自己的想法，再看领导是否改变想法，若无，依然遵从。

11、如果你的工作出现失误，给本公司造成经济损失，你认为该怎么办？

• 首先是想方设法去弥补或挽回经济损失。
• 如果是我的责任，我甘愿受罚；如果是团队中别人的失误，应该互相帮助共同完成。
• 总结经验教训，避免以后再次发生。 

12、如果你做的一项工作受到上级领导的表扬，但你主管领导却说是他做的，你该怎样？

第一次应该不会提，接二连三的会主动找主管领导来沟通①我认识到自己的错误②他更加变本加厉的来威胁我，那我会找我的上级领导反映此事。

13、谈谈你对跳槽的看法？

正常的“跳槽”能促进人才合理流动。频繁的跳槽对单位和个人双方都不利。

14、工作中你难以和同事、上司相处，你该怎么办？

我会从自身找原因、会找机会跟他们沟通、做好本职工作，虚心向他人学习。

  15、假设你成绩比较突出，得到领导的肯定。但你发现同事们越来越孤立你，你怎么办？

自己检讨寻找原因、或者及时沟通、多参与集体或者促进友情

16、你对于我们公司了解多少？

在面试前上网查一下该公司主营业务。

17、你能为我们公司带来什么呢？

就我的能力，我可以做一个优秀的员工在组织中发挥能力带来高效率和更多的收益

18、最能概括你自己的三个词是什么？

适应能力强、心态好、责任心

19、你的业余爱好是什么？

回答提示：找一些富于团体合作精神的，这里有一个真实的故事：有人被否决掉，因为他的爱好是深海潜水。主考官说：因为这是一项单人活动， 我不敢肯定他能否适应团体工作。

20、喜欢这份工作的哪一点？

回答提示：相信其实大家心中一定都有答案了吧！每个人的价值观不同，自然评断的标准也会不同，但是，在回答面试官这个问题时可不能太直接就把自己心理的话说出来，尤其是薪资方面的问题，不过一些无伤大雅的回答是不错的考虑，如交通方便，工作性质及内容颇能符合自己的兴趣等等都是不错的答案，不过如果这时自己能仔细思考出这份工作的与众不同之处，相信在面试上会大大加分。

21、说说你对行业、技术发展趋势的看法？

用户对互联网产品的用户体验有了更高的要求，这意味着前端开发人员也会有更多的挑战和机会。

由网页制作到Web前端工程师这个职业名词的转变就意味着Web前端开发已经越来越趋向专业化、职业化

Web前端技术更新迅速，生命力极强 22、就你申请的这个职位，你认为你还欠缺什么？

对于这个职位和我的能力来说，我相信自己是可以胜任的，只是缺乏经验，这个问题我想我可以进入公司以后以最短的时间来解决，我的学习能力很强，我相信可以很快融入公司的企业文化，进入工作状态。

23、你欣赏哪种性格的人？

容易相处 说话直接

24、你通常如何处理别人的批评？

接受批评，是我的问题会及时道歉，不是会适当发表自己的意见

25、什么会让你有成就感？

提前完成任务或得到领导的赞赏和器重。

26、你为什么愿意到我们公司来工作？

回答提示：对于这个问题，你要格外小心，如果你已经对该单位作了研究，你可以回答一些详细的原因，像“公司本身的高技术开发环境很吸引我。”、“我同公司出生在同样的时代，我希望能够进入一家与我共同成长的公司。”、“你们公司一直都稳定发展，在近几年来在市场上很有竞争力。”、“我认为贵公司能够给我提供一个与众不同的发展道路。”这都显示出你已经做了一些调查，也说明你对自己的未来有了较为具体的远景规划。

27、你和别人发生过争执吗？你是怎样解决的？

回答提示：这是面试中最险恶的问题，其实是考官布下的一个陷阱，千万不要说任何人的过错，应知成功解决矛盾是一个协作团体中成员所必备的能力。假如你工作在一个服务行业，这个问题简直成了最重要的一个环节。你是否能获得这份工作，将取决于这个问题的回答。考官希望看到你是成熟且乐于奉献的。他们通过这个问题了解你的成熟度和处世能力。在没有外界干涉的情况下，通过妥协的方式来解决才是正确答案。

28、问题：你做过的哪件事最令自己感到骄傲？

刚毕业时一头雾水，通过不断学习和实践，到独立完成项目

29、新到一个部门，一天一个客户来找你解决问题，你努力想让他满意，可是始终达不到群众得满意，他投诉你们部门工作效率低，你这个时候怎么作？

• 首先，我会保持冷静。
• 其次，我会反思一下客户不满意的原因。
• 再次，根据原因采取相对的对策。如果是自己确有不周到的地方，按照服务规定作出合理的安排，并向客户作出解释；如果是客户不太了解政策规定而造成的误解，我会向他作出进一步的解释，消除他的误会；如果是客户提出的要求不符合政策规定，我会明确地向他指出。
• 最后，我会把整个事情的处理情况向领导作出说明，希望得到他的理解和支持。

30、对这项工作，你有哪些可预见的困难？（最好具体，待优化）

工作中出现一些困难是正常的，但是只要肯学习、肯坚持、做好准备，任何困难都是可以克服。

31、如果我录用你，你将怎样开展工作？

首先听取领导的指示和要求，然后就有关情况进行了解和熟悉，接下来制定一份近期的工作计划并报领导批准，最后根据计划开展工作。

32、你希望与什么样的上级共事？

希望我的上级能够在工作中对我多指导，对我工作中的错误能够立即指出。

33、您在前一家公司的离职原因是什么？

34、假如你晚上要去送一个出国的同学去机场，可单位临时有事非你办不可，你怎么办？

• 干完工作去机场，皆大欢喜。
• 如果工作不是很紧急，可以跟领导打声招呼，先去机场然后回来加班。
• 如果很紧急，是不是可以要其他同事来代替以下工作、只能先完成工作

35、谈谈你过去做过的成功案例？

回答提示：举一个你最有把握的例子，把来龙去脉说清楚，而不要说了很多却没有重点。切忌夸大其词，把别人的功劳到说成自己的，很多主管为了确保要用的人是最适合的，会打电话向你的前一个主管征询对你的看法及意见，所以如果说谎，是很容易穿梆的。

36、谈谈你过去的工作经验中，最令你挫折的事情？

回答提示：曾经接触过一个客户，原本就有耳闻他们以挑剔出名，所以事前的准备功夫做得十分充分，也投入了相当多的时间与精力，最后客户虽然并没有照单全收，但是接受的程度已经出乎我们意料之外了。原以为从此可以合作愉快，却得知客户最后因为预算关系选择了另一家代理商，之前的努力因而付诸流水。尽管如此，我还是从这次的经验学到很多，如对该产业的了解，整个team的默契也更好了。

37、如何安排自己的时间？会不会排斥加班？

合理安排自己的任务，尽量提高效率，避免加班。若有需要，会配合。

38、为什么我们要在众多的面试者中选择你？

根据我对贵公司的了解，以及我的专业、积累的经验，相信能够胜任这个职位。同时我在工作态度、性格方面，我觉得能和同事都合作愉快。

39、为什么选择这个职务？

这是我的兴趣和专长，也有近两年的工作经验，相信我一定能胜任这个职务的。

40、谈谈如何适应办公室工作的新环境？

多学习、对领导安排的任务有计划的完成、对新同事友善 遇到不明白的要虚心请教

41、工作中学习到了些什么？

技能上有很大的提升，比如代码的规范啊、浏览器兼容、用户体验等方面。

想更高效率的完成项目，就应该及时和产品经理、设计、开发人员沟通。

42、你并非毕业于名牌院校？

虽然不是毕业于名牌院校，因为之前学习的技能和工作经验，我相信我有能力胜任贵公司现在工作 

43、怎样看待学历和能力？

学历的高低只是进入一个企业的敲门砖，而能力的高低能决定今后职场的发展。如果贵公司明确只招本科及以上，我肯定无法通过面试。可如果一个专科生都能完成的工作，您又何必花更高的薪资去招一位学历高的呢？