├── 2015面试题参考答案.md ├── Markdown学习指南.md └── README.md /2015面试题参考答案.md: -------------------------------------------------------------------------------- 1 | #2015年最新前端开发面试题回答参考 2 | 3 | 只供参考，回答错误就不负责任啦 4 | 5 | ## 目录 6 | 7 | 1. [前言](#preface) 8 | 1. [HTML 部分](#html) 9 | 1. [CSS 部分](#css) 10 | 1. [JavaScript 部分](#js) 11 | 1. [其他问题](#other) 12 | 1. [优质网站推荐](#web) 13 | 14 | 15 | 16 | ## 前言 ## 17 | 18 | 本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！ 19 | 20 | 21 | ###面试有几点需注意：(来源程劭非老师 github:@wintercn) 22 | 23 | 1. 面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。 24 | 25 | 1. 题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。 26 | 27 | 1. 进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。 28 | 29 | 1. 回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲） 30 | 31 | 1. 资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。 32 | 33 | 34 | 35 | **前端开发面试知识点大纲：** 36 | 37 | HTML&CSS： 38 | 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 39 | 40 | JavaScript： 41 | 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。 42 | 43 | 其他： 44 | HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯 45 | 46 | 作为一名前端工程师，**无论工作年头长短都应该必须掌握的知识点**： 47 | 48 | 此条由 王子墨 发表在 [前端随笔](http://julying.com/blog/front-end-engineers-must-master-knowledge/) 49 | 50 | 1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 51 | 52 | 2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。 53 | 54 | 3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。 55 | 56 | 4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。 57 | 58 | 5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。 59 | 60 | 6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型 61 | 62 | 7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们 63 | 64 | 8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。 65 | 66 | 9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。 67 | 68 | 10、JSON —— 作用、用途、设计结构。 69 | 70 | 71 | 72 | 73 | **备注：** 74 | 75 | 根据自己需要选择性阅读，面试题是对理论知识的总结，让自己学会应该如何表达。 76 | 77 | 资料答案不够正确和全面，**欢迎补充**答案、题目；最好是现在网上没有的。 78 | 79 | 格式不断修改更新中。 80 | 81 | 82 | ## HTML 83 | 84 | - Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? 85 | 86 | （1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器， 87 | 用什么文档类型 规范来解析这个文档。 88 | 89 | （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 90 | 91 | （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 92 | 93 | （4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 94 | 95 | - 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 96 | 97 | （1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 98 | 比如div默认display属性值为“block”，成为“块级”元素； 99 | span默认display属性值为“inline”，是“行内”元素。 100 | 101 | （2）行内元素有：a b span img input select strong（强调的语气） 102 | 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p 103 | 104 | （3）知名的空元素： 105 |
106 | 鲜为人知的是： 107 | 108 | 109 | 110 | - link 和@import 的区别是？ 111 | 112 | 113 | （1）link属于XHTML标签，而@import是CSS提供的; 114 | 115 | （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; 116 | 117 | （3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题; 118 | 119 | （4）link方式的样式的权重 高于@import的权重. 120 | 121 | - 浏览器的内核分别是什么? 122 | 123 | * IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink； 124 | 125 | 126 | - 常见兼容性问题？ 127 | 128 | * png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8. 129 | 130 | * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 131 | 132 | * IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 133 | 134 | 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 135 | 136 | 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别) 137 | 138 | 渐进识别的方式，从总体中逐渐排除局部。 139 | 140 | 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 141 | 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 142 | 143 | css 144 | .bb{ 145 | background-color:#f1ee18;/*所有识别*/ 146 | .background-color:#00deff\9; /*IE6、7、8识别*/ 147 | +background-color:#a200ff;/*IE6、7识别*/ 148 | _background-color:#1e0bd1;/*IE6识别*/ 149 | } 150 | 151 | * IE下,可以使用获取常规属性的方法来获取自定义属性, 152 | 也可以使用getAttribute()获取自定义属性; 153 | Firefox下,只能使用getAttribute()获取自定义属性. 154 | 解决方法:统一通过getAttribute()获取自定义属性. 155 | 156 | * IE下,even对象有x,y属性,但是没有pageX,pageY属性; 157 | Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 158 | 159 | * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。 160 | 161 | * Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 162 | 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决. 163 | 164 | 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: 165 | L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} 166 | 167 | 168 | 169 | - html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 170 | HTML5？ 171 | 172 | 173 | * HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 174 | 175 | * 绘画 canvas 176 | 用于媒介回放的 video 和 audio 元素 177 | 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； 178 | sessionStorage 的数据在浏览器关闭后自动删除 179 | 180 | 语意化更好的内容元素，比如 article、footer、header、nav、section 181 | 表单控件，calendar、date、time、email、url、search 182 | 新的技术webworker, websockt, Geolocation 183 | 184 | * 移除的元素 185 | 186 | 纯表现的元素：basefont，big，center，font, s，strike，tt，u； 187 | 188 | 对可用性产生负面影响的元素：frame，frameset，noframes； 189 | 190 | 支持HTML5新标签： 191 | 192 | * IE8/IE7/IE6支持通过document.createElement方法产生的标签， 193 | 可以利用这一特性让这些浏览器支持HTML5新标签， 194 | 195 | 浏览器支持新标签后，还需要添加标签默认的样式： 196 | 197 | * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 198 | 201 | 如何区分： DOCTYPE声明\新增的结构元素\功能元素 202 | 203 | 204 | - 语义化的理解？ 205 | 206 | 用正确的标签做正确的事情！ 207 | html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 208 | 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。 209 | 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。 210 | 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 211 | 212 | - HTML5的离线储存？ 213 | 214 | localStorage 长期存储数据，浏览器关闭后数据不丢失； 215 | sessionStorage 数据在浏览器关闭后自动删除。 216 | 217 | - (写)描述一段语义的html代码吧。 218 | 219 | （HTML5中新增加的很多标签（如：
、