一、HTML5新增属性
语义化标签：article、footer、header、nav、section、aside
| article | <article> 标签定义外部的内容。 外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。 |
| header | <header>标签用来表示介绍性的内容，即定义了文档中的页眉 |
| footer | HTML5 <footer>标签用于定义文档的页脚部分。 |
| nav | <nav>标签用于表示HTML页面中的导航，可以是页与页之间导航，也可以是页内的段与段之间导航。 |
| section | <section>标签对文档中的内容进行分块或分段。 |
| aside | aside 跟 article 是一起使用；是辅助 article 区域的内容。也可以理解为整个网页的 辅助区域；（最常见的京东的右侧的工具栏） |
表单控件及属性：datalist、keygen、details、output、calendar、date、time、email、url、search、range
| datalist | <datalist> 标签需要与 <input> 标签配合使用，用来表示可选的列表。 |
| keygen | 规定用于表单的密钥对生成器字段 |
| output | <output> 标签定义不同类型的输出，比如脚本的输出。 |
| details | <details> 标签用于创建一个可展开折叠的元件，用户可以从中检索其他附加的信息。 |
| output | <output> 元素用于不同类型的输出，比如计算或脚本输出 |
| calendar | 日历控件（移动端适用 ） |
| date | 日期 |
| time | 定义日期或时间 |
| 邮箱验证 | |
| search | 搜索圆圈提示 |
| range | 输入范围 |
placeholder、require、step、progress（进度条）等
多媒体元素：
| audio | 定义音频内容 |
| video | 定义视频（video 或者 movie） |
| source | 定义多媒体资源 <video> 和 <audio> |
| embed | 定义嵌入的内容，比如插件。 |
| track | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
新增标签
| fieldset | HTML5 <fieldset>标签用于对表单中的相关元素进行分组 |
| legend | <legend>元素是<fieldset>元素的第一个子元素，定义了<fieldset>元素的标题。 |
| optgroup | <optgroup>标签用来定义一个选项组，即，可以将文档中的选项进行组合。 |
| map | <map>标签用来表示图像映射，也就是指带有可点击区域的图像映射： |
| address | <address>标签，你可以得到某个文档中所属作者或者所有者的相关的联系信息 |
传统表单常用事件：click、change、foucs、blur、keydown、keyup
移动端没有keydown和keyup事件，移动端使用的键盘是虚拟的。移动端多了一个事件类型：input事件。oninput：随操作过程而连续触发。
二、 css3新增属性
border-radius 属性用于创建圆角
box-shadow 用于向方框添加阴影
border-image 属性，可以使用图片来创建边框
新的背景属性
| background-clip | 规定背景的绘制区域。 | |
| background-origin | 规定背景图片的定位区域。 | 背景图片可以放置于 content-box、padding-box 或 border-box 区域。 |
| background-size | 规定背景图片的尺寸。 | 能够以像素或百分比规定尺寸 |
text-shadow 可向文本应用阴影
word-wrap 属性允许文本强制文本进行换行
| hanging-punctuation | 规定标点字符是否位于线框之外。 |
| punctuation-trim | 规定是否对标点字符进行修剪。 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 |
| text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 |
| text-outline | 规定文本的轮廓。 |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 |
| text-shadow | 向文本添加阴影。 |
| text-wrap | 规定文本的换行规则。 |
| word-break | 规定非中日韩文本的换行规则。 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 |
@font-face ： 在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件
转换属性
| transform | 向元素应用 2D 或 3D 转换。 |
| transform-origin | 允许改变被转换元素的位置。 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 |
| perspective | 规定 3D 元素的透视效果。 |
| perspective-origin | 规定 3D 元素的底部位置。 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画属性
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 |
| animation-delay | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
| animation-fill-mode | 规定对象动画时间之外的状态。 |
多列属性
| column-count | 规定元素应该被分隔的列数。 |
| column-fill | 规定如何填充列。 |
| column-gap | 规定列之间的间隔。 |
| column-rule | 设置所有 column-rule-* 属性的简写属性。 |
| column-rule-color | 规定列之间规则的颜色。 |
| column-rule-style | 规定列之间规则的样式。 |
| column-rule-width | 规定列之间规则的宽度。 |
| column-span | 规定元素应该横跨的列数。 |
| column-width | 规定列的宽度。 |
| columns | 规定设置 column-width 和 column-count 的简写属性。 |
repaint重绘：元素的外观改变了，但是没有改变布局
reflow重排：会影响到dom的结构渲染，同时会触发repaint。
visibility:hidden --->产生重绘
display:none ---->产生重排
三、 js进阶
1、JS继承的7种类型
原型继承
function object(O){
function F(){};
F.prototype = o;
return new F();
}从本质上讲，object（）对传入的对象进行了一次浅复制。特点：把父类私有的、公有的都继承到了子类原型上，变为子类公有的。
call继承
function A(){}
A.call(this);call 执行A方法，并把A中的this 改变。特点：把父类私有的属性和方法，克隆一份给子类私有的属性。
冒充对象继承
function B(){
var temp=new A;
for (var key in temp){
this[key] = temp[key];
}
}
B.prototype.constructor=B;
var n = new B;把A的一个实例遍历，把父类私有的和公有的（此处指自己在原型上扩展的方法，内置属性不可遍历）克隆一份给子类私有的。
混合模式继承（原型继承和call继承）
特点：call继承父类的私有的，原型继承继承公有的私有的，相当于私有的拿了两次。
寄生式继承
创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回对象。
function createAnother(o){
var c=object(o);
c.sayHi(){};
return c;
}
var another = createAnother(Person);
another.sayHi();//可执行新对象another不仅有Person的所有属性和方法，还有自己的sayHi()方法。
寄生式组合继承 （object.create()和call继承）
B.prototype=Object.create(A.prototype);把A的原型给B的原型
中间类继承法
arguments是类数组，不能用数组的方法
arguments.__proto__=Array.prototype;这样arguments就可以使用数组的原型上面的方法。只是存在兼容性问题。
2 JS中异步编程的四种情况
（1）定时器（任务队列池）
（2）所有的事件绑定
（3）Ajax读取数据
（4）回调函数（bind）
3、forEach()和map() call() 和bind()
forEach():遍历数组中的每一项，（ie6\7\8不兼容），此方法没有返回值，理论上对原数组不产生影响，但可以通过数组索引来修改原来的数组。
map():遍历数组中的每一项，有返回值，对原数组不产生影响（相当于把原数组克隆一份，把克隆的这一份的数组中对应项改变了）
上述两个方法都有一个传入参数，是一个匿名回调函数。forEach()方法中的this是调用此方法的数组本身。匿名回调函数中的this是默认是window。也都支持第二个参数值，指定匿名回调函数中的This。
| call（obj） | 给forEach()赋值的时候，首先把匿名函数执行，并把匿名函数中的this变为obj,最后把匿名函数执行的返回结果返回，为undefined |
| bind(obj) | ie6\7\8不兼容，只是预先处理，把函数内部this 变为obj ,不立即执行 |
4、数据类型检测
(1)typeof 检测数据类型，返回的是一个字符串。局限性：typeof null = object,不能具体细分是数组还是正则，都返回对象object.
(2)instanceof 检测某一个实例是否属于某个类
对于字面量方式创建出来的结果是基本的数据类型，不是严谨的实例，只要是在当前实例的原型链上，我们检测出来结果都是true，
(3)constructor 构造函数，使用此方法检测不到object。局限性：可以把类的原型重写，重写时可能覆盖constructor
(4)object.prototype.tostring().call(*)
首先获取object原型上的tostring()方法，并且让方法里面的this指向重新定义的。
5、js延迟加载
一般有以下几种方式：