探寻H5的奥秘

H5的出现，引进了一些新标签和新功能，新标签中比较常用的就是video（视频）和audio（音频）以及表单的几个属性，其中video的一些属性还是值得学习一下的，例如：

video属性：

pc-flash

video width="600"

controls 播放条

autoplay 自动播放

loot 循环

poster 封面图片

---

好了，说完了新标签，下面我们重点还是来聊一聊H5的一些新功能吧。

H5新功能大概有如下：

1.geoLocation

地理定位

应用：微信，陌陌等聊天软件 地图 团购 外卖 等

原理：PC——IP

手机 gps 基站定位

navigator.userAgent

navigator.geolocation ——> chrome google api

longitude 经度

latitude 纬度

altitude 海拔

heading 朝向

speed 速度

ev.code 错误状态码

ev.message 错误信息

---

2.localStorage

localStorage： 大小：5M 直接用 没有过期时间

兼容： IE7+

在测试IE 必须在服务器环境下

标准方法:

存：

localStorage.setItem('userName','aaa');

取：

localStorage.getItem('userName');

删：

localStorage.clear();

全删：

for(var name in localStorage){

delete localStorage[name]

}

事件： onstorage

window.onstorage=function(){};

---

3.重力感应

DeviceMotionEvent

devicemotion 加速度信息

ev.accelerationIncludingGravity 加速度

例：

    document.addEventListener('DOMContentLoaded',function(){
        var oDiv = document.querySelector('#div1');
        if(window.DeviceMotionEvent){
            window.addEventListener('devicemotion',function(ev){
                var acc = ev.accelerationIncludingGravity;
                var x = acc.x;
                var y = acc.y;
                var z = acc.z;
                oDiv.innerHTML = 'x=>'+x+',y=>'+y+',z=>'+z;                },false);
        }

    },false);

---

4.webwoker 多线程

单线程 一件事没有执行完 不能做后面的事

多线程 做一个事的同时 能同时干别的事

js是单线程

---

5.canvas 绘图

canvas 绘图 性能极高 兼容：IE9+

画图的步骤

1.获取画布

var oC = document.querySelector('#c');

2.创建画笔

var gd = oC.getContext('2d');

3.起始点 连接点 -> 路径 //moveTo lineTo

4.closePath

5.描边/填充 stroke/fill

矩形：strokeRect(x,y,w,h)

---

6.优雅降级和渐进增强

渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

二者区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

---

7.移动应用，移动端布局等

1.calc

width:calc(100% - 2px);

2.box-sizing:border-box;

3.弹性盒模型

父级 display:-webkit-box;

子级 -webkit-box-flex:1

垂直水平居中

-webkit-box-align:center;

-webkit-box-pack:center;

移动端常见布局

1.流体布局

width 100% +float

2.定宽

a)width:320px 缺点：留白

b)min-width max-width;

3.相对单位布局

rem 切图 先想象一个完美的布局，然后再算比例 文字 px

iphone5 320 ->视网膜屏幕retina 2x 640

iphone6 375

iphone6p 414

——End