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
网友评论