H5的新特性，position，animation和transition，css中的单位

H5的新特性

1、语义化标签
header（头部）、 foot（底部）、nav（导航）、section（定义文档中的章节）、dialog（提示框）、aside（侧边栏）
2、增强型表单
input输入类型： color、date、email、month、number、range（一定范围内数字值的输入域）、search（搜索域）、tel(输入电话号码字段)、time（选择一个时间）、url(url地址的输入域)、week(选择周和年)
表单元素：datalist（元素规定输入域的选项列表，使用 元素的 list 属性与 元素的 id 绑定）、keygen(提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。)、output（用于不同类型的输出，比如计算或脚本输出）
placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证 元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的 标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性 ，是一个 boolean 属性。规定 元素中可选择多个值。
3、视频和音频
提供了播放音频文件的标准,即使用audio元素，control属性供添加、播放、暂停和音量控件
提供了包含视频文件的标准，vedio元素，control提供了播放、暂停、和音量控件来控制视频，可以使用dom操作来控制视频的播放和暂停，如play（）和pause（）方法
4、canvas画图
高斯模糊
5、svg绘图
两者区别：
SVG 是一种使用 XML 描述 2D 图形的语言。
　　Canvas 通过 JavaScript 来绘制 2D 图形。
　　SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。
　　在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
　　Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
6、地理定位
定位用户信息（经纬度）
7、拖放api
dragable属性值为布尔值 ， 拖放的过程分为源对象和目标对象，源对象指自己拖动的对象，目标对象指的是拖动之后要放置的目标位置
拖放的源对象(可能发生移动的)可以触发的事件——3个：
dragstart：拖动开始
drag：拖动中
dragend：拖动结束
整个拖动过程的组成： dragstart1 + dragn + dragend1
拖放的目标对象(不会发生移动)可以触发的事件——4个：
dragenter：拖动着进入
dragover：拖动着悬停
dragleave：拖动着离开
drop：释放
整个拖动过程的组成1： dragenter1 + dragovern + dragleave1
整个拖动过程的组成2： dragenter1 + dragovern + drop*1
dataTransfer：用于数据传递的“拖拉机”对象；
在拖动源对象事件中使用e.dataTransfer属性保存数据：
e.dataTransfer.setData( k, v )
在拖动目标对象事件中使用e.dataTransfer属性读取数据：
var value = e.dataTransfer.getData( k )
8、webworker
运行在后台的js,独立于其他脚本，不影响页面性能
9、Web Storage
使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
客户端存储数据的两个对象为：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除
10、WebSocket
　　WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage()事件来接收服务器返回的数据。

position

1，absolute：

2，fixed
3，relative

4，static

所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位
absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
absolute定位忽略padding，相对位置为相对定位容器的左上角内边框，

animation和transition

1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；

2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；

4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

5、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；

css中的单位

1.px：绝对单位，页面按精确像素展示
2.em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
3.rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

4.vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
5.vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

6.vmin：vw和vh中较小的那个。
7.vmax：vw和vh中较大的那个。

8.%:百分比

9.in:寸

10.cm:厘米
11.mm:毫米

12.pt:point，大约1/72寸

13.pc:pica，大约6pt，1/6寸

14.ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

15.ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)