HTML5新特性详解

1.geolocation--定位
PC--IP地址
精度比较低
IP库
Chrome -> Google
手机--GPS
window.navigator.geolocation
单次 getCurrentPosition(成功,失败,参数)
enableHighAccuracy 高精度模式-更慢、更费电
timeout 超时时间
maximumAge 缓存时间
结果:
latitude: 34.22844136399747 纬度
​​ longitude: 108.86509354233583 经度
altitude: 405.6882629394531 海拔高度
accuracy: 65 精确度
altitudeAccuracy: 10 高度精确度
heading: null 朝向
speed: null 速度

监听 watchPosition(成功,失败,参数)
2.video、audio
video--视频
参数:
src 地址
autoplay 自动播放
loop 循环播放
poster 封面图片
兼容方法:
<video>
<flash></flash>
</video>
video支持的格式:
IE vmv/mp4
Chrome webq/mp4
firefox ogv/mp4
audio--音频mp3格式

JS接口:
.play() 播放
.pause() 暂停
.currentTime 当前播放位置(s)
.duration 长度(s)
.volume 音量(0-100)
.muted 静音 boolean

3.localStorage/sessionStorage
4.WebSQL 不维护了
5.WebWorker --浏览器上实现的多进程
主机 > 程序 > 进程 > 线程 > 纤程

web端
主进程 UI进程
子进程(工作进程) 看不见的;只能完成计算、数据请求这些操作

优点:
1、充分利用资源(多个进程同时工作)
2、防止主进程卡主

缺点:
1、不能执行任何UI操作,子进程只能执行计算型任务

结论:
WebWorker在工作中用的很少--web中计算型任务就不多

6.文件操作、拖拽--
// ondragenter 进入
// ondragleave 离开
// ondragover 悬停
// ondrop 松开鼠标
都是H5新加的事件,是DOM3的一部分,最好使用oDiv.addEventListener('事件', function(){}, false);事件绑定的方式。

tinymce 富文本编辑插件
7.manifest--指定资源哪些要缓存,哪些不缓存。找不到的资源就去读别的资源
8.canvas

猜你喜欢

转载自www.cnblogs.com/caicai521/p/11262116.html