web前端面试题总结
HTML+CSS
什么是web标准，起到些什么作用，如何理解W3C组织制定的标准
（1）web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可提高搜索机器人对网页内容的搜索几率。--- SEO
（2）建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容。
（3）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版更方便
（4）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性
遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。
xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，更严谨更纯净的 HTML 版本（可扩展超文本标签语言）
最主要的不同：
XHTML 元素必须被正确地嵌套，必须被关闭，标签名必须用小写字母，必须拥有根元素（<html>根元素中）。
Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
DOCTYPE（是Document Type文档类型的简写）是一组机器可读的规则，它们指示(X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD（文档类型定义）,一般放在(X)HTML文档开头声明）用以告诉其他人这个文档的类型风格。
区别：严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如<br/>，混杂模式则是一种向后兼容的解析方法。
触发：根据不同的DTD触发，如果没有声明，那么默认为混杂模式。
行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border,margin，padding
什么是FOUC？如何避免？
Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再重新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head里
CSS引入的方式有哪些? link和@import的区别是?
<link href="aa.css" rel="stylesheet"/>
内联样式（在 HTML元素内部）内嵌（位于<head>标签内部）外链导入
区别：link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
link无兼容性，@import CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
CSS 属性选择器
优先级：！important>内联> Id>class>标签>继承
前端页面：结构层 Html表示层 CSS行为层 js
css的基本语句构成：选择器{属性1:值1;属性2:值2;……}
内核：Ie(Ie内核)火狐（Gecko）谷歌（webkit）Opera (Presto)
写出几种IE6 BUG的解决方法
1. 双边距BUG，当一个盒子右浮动的同时有一个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了，而且都有同方向的margin，则只有最靠近浮动方向的元素有双边距bug
给float的元素添加一个display：inline或ie6写一个hack，其值是正常值的一半，
2. 3像素问题使用单float引起的后面的元素也加上float样式
3. ie6如果不设置任何父标签a:hover{}则ie6就会停止对a的子标签hover解读
给父标签a:hover{}添加一些样式
4.Ie6/ie7如果只是对一个子元素设定z-index，这个值再高，也不能覆盖与父元素同级的其他元素。所以现在通用的解决方法是对子元素的父元素也定义一个z-index的值
5. PNG图片有灰底的 使用js代码(网上有)或者使用gif图片
6. 不支持Min-height最小高度利用IE6不识别!important来实现（height:auto!important;
height:500px; min-height:500px; ）
7. IE6下，浏览器将select元素视为窗口级元素，这时DIV无论z-index设置的多高都是无法遮住select元素的，使用iframe（select同级别元素）嵌套，div里嵌套iframe可以将select遮住
8.为什么没有办法定义1px左右的高度容器（IE6默认的行高（默认字体大小）造成的，使用over:hidden）
9. IE5-8不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
标签上title与alt属性的区别是什么?
Alt 当图片不显示是用文字代表。
Title 为该属性提供信息
.解释css sprites，如何使用。
Css 精灵是网页图片应用处理方式，把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
浏览器解析CSS的两种模式：
标准模式(strict mode按W3C标准解析执行代码)和怪异模式(quirks mode使用浏览器自己的方式解析执行代码)与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，默认怪异模式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明
你如何对网站的文件和资源进行优化？
1、 文件合并（目的是减少http请求）：合并JavaScript和CSS文件、CSS Sprites、图像映射 （Image Map）和使用Data URI来编码图片，某些大众的js，可以直接用官网的链接来访问，而不是根目录，如jquery.js
2、 文件压缩：减少文件下载的体积，优化图片质量jpg,压缩js和css代码（GZIP 压缩你的 JS 和 CSS 文件，服务器脚本）, 删除不必要的空格、注释,将inline的script和css移到外部文件
3、 使用 CDN （内容分发网络）来托管资源；源站内容发布到最接近用户的边缘节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率
4、 缓存的使用（并且多个域名来提供缓存）
5. 优化页面元素加载顺序, 首先加载页面最初显示的内容和与之相关的JavaScript和CSS然后加载DHTML相关的东西,像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载
6.优质代码，不要使用嵌套tables布局，结构清晰
display: block;和display:inline;的区别
block元素特点：
1.处于常规流中时，如果width没有设置，会自动填充满父容器
2.可以应用margin/padding
3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
5.忽略vertical-align
inline元素特点
1.水平方向上根据direction依次布局
2.不会在元素前后进行换行
3.受white-space控制
4.margin/padding在竖直方向上无效，水平方向上有效
5.width/height属性对非替换行内元素无效，宽度由元素内容决定
6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定
6.浮动或绝对定位时会转换为block
7.vertical-align属性生效
Line-height的百分比是针对当前字体的大小来设置的
Javascript
JavaScript中function定义函数的几种方法
用Function构造函数定义的函数，代码如下：
| var multiply = new Function('x', 'y', 'return x * y;'); |
函数声明，这种方式也是最为常见的一种：
| function multiply(x, y) { return x * y; } |
函数表达式，声明为匿名函数然后赋值给一变量，很常见的方式：
| var multiply = function(x, y) { return x * y; } |
函数表达式，但是函数声明为命名函数再赋值给一变量
| var multiply = function multi(x, y) { return x * y; } |
函数声明方式的函数可以在函数定义之前就调用
javascript的typeof返回哪些数据类型
Object number function boolean underfind
.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== – ===）
事件绑定和普通事件有什么区别
普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个
事件模型:
捕获型事件
目前除IE浏览器外，其它主流的Firefox, Opera, Safari都支持标准的DOM事件处理模型（通过元素的addEventListener方法注册，该方法既支持注册冒泡型事件处理，又支持捕获型事件处理，但是捕获型事件先发生）
.ajax请求的时候get和post方式的区别
一个在url后面（注意缓存问题）一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的
js 中的函数其实是对象，函数名是对 Function 对象的引用。
call和apply的区别
都可以用来代替另一个对象调用一个方法，但传入的参数列表形式不同
只是：如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
func来替换 func1，即执行func函数，参数是var1,var2,var3
ajax解析JSON数据
格式为{“name“: “value“,...}
eval() 函数可计算某个字符串，并执行其中的的 JavaScript代码
JSON字符串:var str1 = '{ "name": "cxh","sex": "man" }';
JSON对象: varstr2 = { "name": "cxh", "sex": "man" };
JSON字符串转换为JSON对象
1.var obj = eval('('+ str + ')');
2.var obj =str.parseJSON();
3.var obj =JSON.parse(str);鉴于安全性考虑使用parse更靠谱
作用域:封闭的，不影响外部的空间。不过在 JavaScript函数可以嵌套，也就是说作用域是可以嵌套的。而为了更好也把使用域联系起来，它使用了一个在多数现代码语言中都实行的理念——闭包。如果用一句话来解析闭包——外部不能访问内部变量，内部可以外部变量,在 JavaScript有两种形式的使用域——全局/函数级使用域。换句话说，除了全局作用域，只有函数级作用域，像 if 、while、for...in等代码块是不会创建作用域的
1. console.log(typeof sofish);// 1___
2. console.log(momo);// 2___
3. function sofish(){
4. var ciaocc ='a beauty';
5. };
6. sofish();
7. var momo;
8. console.log(ciaocc);// 3___
函数和变量在代码解析的时候，会提到作用域的最顶端（这叫声明提前，变量只是定义声明提前了，即不会报错，但是值不会提前）代码，执行的时候机器看到的代码是其实是这样的：
1. //函数和变量被提到最顶端
2. function sofish(){
3. var ciaocc='a beauty';
4. };
5. var momo;
6.
7. console.log(typeof sofish);// 1___
8. console.log(momo);// 2___
9.
10. sofish();
11. console.log(ciaocc);// 3___
第 1个输出的是 'function'，第 2个输出的是 undefined，但为什么最后一个是 Error —— ReferenceError:ciaocc is not defined
弹出undefined,变量i在one函数里声明提前，但是没有同仁，弹出undefined,内部作用域能找到变量，即不会再外部作用域里寻找。
js用currentStyle和getComputedStyle获取css样式（非行间）
用js的style属性可以获得html标签的样式，但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢？在IE下可以用currentStyle，而在火狐下面我们需要用到getComputedStyle。
1. <html xmlns="http://www.w3.org/1999/xhtml">
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4. <title>js用currentStyle和getComputedStyle获取css样式</title>
5. <style type="text/css">
6. #div1{width:100px; height:100px; background:red;}
7. </style>
8. <script type="text/javascript">
9. function getStyle(obj, attr)
10.{
11. if(obj.currentStyle)
12. {
13. return obj.currentStyle[attr];
14. }
15. else
16. {
17. return getComputedStyle(obj,false)[attr];
18. }
19. }
20.window.onload=function()
21. {
22. var oDiv=document.getElementById('div1');
23. alert(getStyle(oDiv,'width'))
24.}
25. </script>
26.</head>
27.
28.<body>
29. <div id="div1"></div>
30.</body>
</html>
事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
.bind()只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。jQuery 1.3新增的.live()方法代替.bind()方法。live()方法会把click事件绑定到$(document)对象，生成不必要的jQuery对象，导致性能损失；(function($){$("#info_table td").live("click",function(){/*显示更多信息*/}); })(jQuery);使用叫做“早委托”的hack，在整个dom元素加载之前调用live可以减少jquery对象的生成，解决上述缺点。(function($){...})(jQuery)是一个“立即执行的匿名函数”，这时候刚好document元素可用，而整个DOM还远未生成。
jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：
$("td",$("#info_table")[0]).live("click",function(){/ 显示更多信息 /});“受托方”就从默认的$(document)变成了$("#info_table")[0]，节省了冒泡的旅程。只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#info_table td").live...可以，但$("#info_table").find("td").live...不行；
为了突破单一.bind()方法的局限性，实现事件委托，jQuery 1.3引入了.live()方法。后来，为解决“事件传播链”过长的问题，jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题，jQuery 1.4.2干脆直接引入了一个新方法.delegate()
$("#info_table").delegate("td","click",function(){/*显示更多信息*/});
使用.delegate()有如下优点（或者说解决了.live()方法的如下问题）：
直接将目标元素选择符（"td"）、事件（"click"）及处理程序与“受拖方”$("#info_table")绑定，不额外收集元素、事件传播路径缩短、语义明确；
支持在连缀的DOM遍历方法后面调用，即支持$("table").find("#info").delegate...，支持精确控制；
jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题，将会增加一对新的事件方法：.on()和.off()：
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);
闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。也就是说，内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。-----个人理解就是：闭包是能够读取其他函数内部变量的函数，即在外面可以调用函数中的函数的变量，其实他就是将函数内外部连接起来的桥梁。
如下面例子4：
这段代码有以下两个特点：
1、函数b嵌套在函数a内部；2、函数a返回函数b；
引用关系如下图：
这样在执行完var c = a()后，变量c实际上是指向了函数b，b中用到了变量i，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：
当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个我们通常所谓的“闭包”。
当函数b执行的时候亦会像以上步骤一样。因此，执行时b的作用域链包含了3个对象：b的活动对象、a的活动对象和window对象，如下图所示：
如图所示，当在函数b中访问一个变量的时候，搜索顺序是：
1. 先搜索自身的活动对象，如果存在则返回，如果不存在将继续搜索函数a的活动对象，依次查找，直到找到为止。
2. 如果函数b存在prototype原型对象，则在查找完自身的活动对象后先查找自身的原型对象，再继续查找。这就是Javascript中的变量查找机制。
3. 如果整个作用域链上都无法找到，则返回undefined。
三、闭包的用途及优势
（一）、用途
1、闭包可以读取函数内部变量 2、将函数内部变量的值始终保存在内存中
例子5：
这个例子中的result实际上就是闭包函数b，他一共运行两次，第一次值99，第二次值为100，这就说明i一直在内存中，而不是在第一次a函数调用之后就自动清除。另外还需注意iAdd=function(){i++;}，这里iAdd是全局变量，且它的值为匿名函数，其实也是一个闭包。
（二）、优势
1、保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。
2、在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。
3、通过保护变量的安全实现JS私有属性和私有方法（不能被外部访问）。
函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。
如何阻止事件冒泡和默认事件
canceBubble return false
添加删除替换插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
解释jsonp的原理，以及为什么不是真正的ajax
$.ajax({
//timeout: 3000, //超时时间设置，单位毫秒
url: "/Ajax/AjaxHandler?callback=" + callback +"?",
dataType: "jsonp",
async: false,
data: paramsJson, //传入参数
jsonpCallback: callback, //异步执行成功后，回调函数
success: function(json){
alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
},
error: OnError //异步执行失败后，回调函数
});
但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
javascript的本地对象，内置对象和宿主对象
ar o=new Object();/var o=new Object;/var o={}创建对象
o=null; 可以强制性的废除对象
本地对象为array objregexp等可以new实例化
内置对象为gload Math等不可以实例化的
宿主为浏览器自带的document,window等
documentload 和documentready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)
”==”和“===”的不同
是使用“==”时，如果两边类型不同，js引擎会把它们转换成相同类型然后在进行比较，而“===”则不会进行类型转换，因此当两边不是属于同一个类型，肯定不相等
== 判断规则：
如果两个值类型相同，进行 ===比较。
如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
如果一个是null、一个是undefined，那么[相等]。
如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
如果任一值是 true，把它转换成 1再比较；如果任一值是 false，把它转换成 0再比较。
如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说（比较麻烦，我也不大懂）
任何其他组合，都[不相等]。
变量在无初始值或者其值为 0、-0、null、”"、false、undefined或者 NaN时，它的值为 false。否则，其值为 true。
javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合,安全策略,防止恶意进攻。
编写一个数组去重的方法
1.创建一个新的数组存放结果
2.创建一个空对象
3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。
说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。
Array.prototype.unique3= function (){
var res = [];
var obj_temp = {};
for (var i = 0; i <this.length; i++) {
if (!obj_temp [this[i]]) {
res.push(this[i]);
obj_temp [this[i]] = 1;
}
}
return res;
}
var arr = [112, 112, 34, '你好', 112, 112, 34, '你好', 'str', 'str1'];
alert(arr.unique3());
Angular Js优秀的前端JS框架，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等, Angular更适合于CRUD的管理系统开发。特性，比如模板、指令对于界面的渲染逻辑也能起到简化作用。总结：最根本的改善就在于MVC 的引入，适合于交互较多的客户端项目
reactJS、ember.js等框架者
IONIC React native
html css javascript 加载的顺序
加载的总体原则是顺序加载，即从页面的head到body结束顺序加载,首先会加载link里面的css文件。但是在这里要记住，css文件和image文件跟html代码是并行下载的, 加载js需要加载完整个js文件后，才会往下走代码。不会并行下载。、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
前端的框架
ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。
Flex，easyui，MiniUI，jQuery UI，YUI
AJAX 开发框架：
1. jQuery是一个轻量级的Javascript库
2. MooTools是一个简洁、模块化、面向对象的JavaScript库
3. Prototype是Sam Stephenson写的一个非常优雅的JavaScript基础类库，对JavaScript做了大量的扩展，旨在简化动态Web应用程序的开发。
在jQuery中，我们可以使用以下方法实现URL的编码和解码。
encodeURIComponent(url)and decodeURIComponent(url)
document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用，我们可以在页面中使用多个document.ready()，但只能使用一次onload()。
响应式布局
一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本
缺点：
· 兼容各种设备工作量大，效率低下
· 代码累赘，会出现隐藏无用的元素，加载时间加长
· 其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
· 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
怎么设计？
CSS3中的Media Query（媒介查询）
3、语法结构及用法
@media 设备名 only（选取条件） not（选取条件） and（设备选取条件），设备二{sRules}
在link中使用@media：
<link rel=“stylesheet” type=“text/css” media=“only screen and（max-width： 480px），onlyscreen and（max-device-width： 480px）”href=“link.css”/>
在样式表中内嵌@media：
@media （min-device-width:1024px） and （max-width:989px），screen and（max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and（orientation:portrait） {srules}
1. <style type="text/css">
2. @media screen and (min-width: 480px) {
3. // CSS rules go here
4. }
5. @media screen and (min-width: 600px) {
6. // CSS rules go here
7. }
8. @media screen and (min-width: 768px) {
9. // CSS rules go here
10.}
11. @media screen and (min-width: 910px) {
12.// CSS rules go here
13. }
14.</style>
列偏移使用 .col-md-offset-*类可以将列向右侧偏移
列排序
通过使用 .col-md-push-*（left，向右移动）和.col-md-pull-*（right,向左移动）类就可以很容易的改变列（column）的顺序
模态框 modal，Dropdowns下拉菜单，滚动监听 scrollspy，Tooltips，弹出框 popover，警告信息 alert.js，Collapse控制显示隐藏，Carousel轮播—定制改变Less变量
overflow: hidden;
white-space: nowrap;让内容不可以自动换行，始终在一行显示
word-break: keep-all;在换行的时候保持每个单词的完整性，不让一个单词因换行而被拆开
text-overflow: ellipsis;用省略号来显示没有显示出来的文本
box-sizing: content-box|border-box|inherit;
content-box为默认的盒模型的设置，border-box任何内边距和边框都将在已设定的宽度和高度内进行绘制，这样在移动端切图的时候对于浮动的元素宽度百分比就不用考虑边框了。
pointer-events: auto | none;
pointer-events属性有两个值，默认是auto，none表示让鼠标穿透该对象，不捕获鼠标事件。
对与定位的absolute元素，给其的宽度设定百分比的时候，它是相对于他的position:relative元素来的，高度与此类推。
当你把一个元素设置成弹性的盒子，仅有它的直接子元素可伸缩，更深层的后代元素不会起作用。
em尺寸：所有现代浏览器下默认字体尺寸是16px，这时1em=16px。然后你人为的把body里面定义font-size:12px;（把浏览器默认16px改小了），此刻1em=12px，如果0.8em实际等于12px*0.8；em的用处是你要整个网页字体统一变大变小你只要改body里面font-size的值就行了。em会继承父元素的字体大小
过渡：transition: width 1s linear 2s;
定义动画
animation:myfirst5s;
@-webkit-keyframesmyfirst /* Safari和 Chrome */
{
from{background: red;}
to{background: yellow;}
}
@keyframesmyfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100%{background: red; left:0px; top:0px;}
}
JavaScript中的所有事物都是对象：字符串、数组、数值、函数等。JS中并没有类的概念
function ClassA() { this.a='a'; }
function ClassB() {this.b='b'; }
ClassB.prototype=new ClassA();
ClassB.prototype.a='changed!!';
var objB=newClassB();
alert(objB.a);
每个子类对象都执有同一个原型的引用，
所以子类对象中的原型成员实际是同一个
Prototype 原型