HTML5前端开发知识小结
PART1 前端综合
1.对WEB标准的理解 Web标准是一系列标准的集合：结构标准（XHTML/HTML）、表现标准（CSS）和行为标准（ECMAScript/DOM/BOM）。还有这些代码的书写标准。要实现的Web标准是：结构化文档；内容、表现和行为三者间的分离。
2.浏览器内核差异 IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink。
PART2 HTML 1.HTML的，所谓的“严格模式”和“混杂模式”
（1）声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
（2）严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.和@IMPORT 的区别
（1）属于XHTML标签，而@import是CSS提供的; 会同时被加载，（2）页面被加载的时，而@import引用的CSS会等到页面被加载完再加载; （3）import只在IE5以上才能识别，而是XHTML标签，无兼容问题; （4）方式的样式的权重高于@import的权重。
3.块级元素、行内元素、空（VOID）元素有哪些？
（1）块级元素。默认display属性是block。div ul ol li dl dt dd h1 h2 h3 h4…p。 （2）行内元素。默认display属性是inline。a b span img input select strong。 （3）空元素。功能性元素，标签可以不闭合。 4.常见的HTML浏览器兼容性问题
（1）获取标签的自定义属性。
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。 解决方法:统一通过getAttribute()获取自定义属性。 （2）even对象。
IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。 解决方法：var x = (event.x ? event.x : event.pageX) 5.HTML语义化
（1）用正确的标签做正确的事情！
（2）html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； （3）在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。 （4）搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。 （5）使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
6.IFRAME的缺点
（1）iframe会阻塞主页面的Onload事件；
iframe和主页面共享连接池，（2）而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 解决方法：使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
PART3 HTML5 1.HTML5的离线储存
localStorage 长期存储数据，浏览器关闭后数据不丢失； seionStorage 数据在浏览器关闭后自动删除。
2.COOKIES，SESSIONSTORAGE 和 LOCALSTORAGE 的区别
（1）cookie在浏览器和服务器间来回传递， seionStorage和localStorage不会。 （2）seionStorage和localStorage的存储空间更大。 （3）seionStorage和localStorage有更多丰富易用的接口。 （4）seionStorage和localStorage各自独立的存储空间。
3.如何实现浏览器内多个标签页之间的通信? (阿里) 调用localstorge、cookies等本地存储方式
4.WEBSOCKET如何兼容低浏览器？(阿里) Adobe Flash Socket、ActiveX HTMLFile (IE)、基于 multipart 编码发送 XHR、基于长轮询的 XHR PART4 CSS 1.布局
Table布局，Div+CSS布局，响应式设计。
2.盒子模型
IE 盒子模型、IE的content部分包含了 border 和 pading; （1）有两种，标准 W3C 盒子模型；（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).3.选择器优先级及使用
1.id选择器（ # myid） 2.类选择器（.myclaname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p）
5.子选择器（div > p）(选择父元素为元素的所有
元素。) 6.后代选择器（li a） 7.通配符选择器（ * ）
8.属性选择器（a[rel = \"external\"]） 9.伪类选择器（a: hover, li: nth - child） 优先级：
1.!important > id > cla > tag 2.important 比内联优先级高
4.CSS3新特性
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）、缩放scale(0.85,0.90)，定位translate(0px,-30px)，倾斜skew(-9deg,0deg) 增加了更多的CSS选择器多背景 rgba 5.CSS定义的权重
标签的权重为1，cla的权重为10，id的权重为100。 /*权重为100+1=101*/ #id1 div{ } /*权重为10+1=11*/ .cla1 div{ } /*权重为10+10+1=21*/ .cla1 .cla2 div{ } 6.如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms 7.去除DISPLAY:INLINE-BLOCK显示间隙？(携程) 移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing 8.CSS的浏览器兼容性
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
PART5 JAVASCRIPT：
1.NODE.JS的适用场景？
高并发、聊天、实时消息推送
2JAVASCRIPT如何实现继承？
通过原型和构造器
3.THIS对象的理解
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。 但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象
4.如何判断一个对象是否属于某个类？
使用instanceof （待完善） if(a instanceof Person){ alert(\'yes\'); } 5.NEW操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。 var obj = {}; obj.__proto__ = Base.prototype; Base.call(obj); 6.JAVASCRIPT中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty 7.JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小 {\'age\':\'12\', \'name\':\'back\'} 8.如何解决跨域问题?
jsonp、iframe、window.name、window.postMeage、服务器上设置代理页面
9.模块化怎么做？
立即执行函数,不暴露私有成员 var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})(); 10.DOCUMEN.WRITE和INNERHTML的区别
document.write只能重绘整个页面 innerHTML可以重绘页面的一部分
11.CALL, APPLY方法区别
call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.应用场景:当参数明确时可用call, 当参数不明确时可用apply给合arguments 12.针对 JQUERY 的优化方法？
（1）基于Cla的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。 （2）频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。 比如：var str=$(\"a\").attr(\"href\"); （3）for (var i = size; i
for (var i = size, length = arr.length; i
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
（1）垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
（2）setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
（3）闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
14.如何判断当前脚本运行在浏览器还是NODE环境中？
通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中
