1:视频播放器
2:地理定位css
咱们的支持html5 的浏览器给咱们提供一个接口(api),能够用来获取你当前的位置.html
主要是经过geolocation(地理位置),对象 ,去访问硬件,来获取到经纬度..html5
1 if (navigator.geolocation){ 2 navigator.geolocation.getCurrentPosition(showPosition); 3 } else{ 4 x.innerHTML="Geolocation is not supported by this browser.";} 5 }
咱们获取到的是一个经纬度。咱们调用地图。咱们调用百度地图.(街景地图)web
3: 拖拽
html5 里面支持拖拽
1)当前拖拽的元素
ondrag 应用于拖拽元素,整个拖拽过程都会调用
ondragstart 应用于拖拽元素,当拖拽开始时调用
ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素,当拖拽结束时调用
2)目标元素
ondragenter 应用于目标元素,当拖拽元素进入时调用
ondragover 应用于目标元素,当停留在目标元素上时调用
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素,当鼠标离开目标元素时调用
4: web 存储
咱们经过sessionStorage 和 localStorage 这两个对象能够向本地保存数据。api
1 setItem(key,value) 2 getItem(); 3 removeItem(); 4 clear();
经过这个对象sessionStorage 演示了这四个方法. (设计到数据的操做就是增删改查..)
localStorage 保存数据 ;方法的同样的
sessionStorage 与 localStorage 区别
①localStorage 的数据永久保存
②sessionStorage 关闭浏览器就没有了
5:应用级别的缓存(缓存文件,css,js 图片.)
咱们新建一个html 文件 而后我要为这个html 文件制定缓存的
首先第一步,我要新建一个 demo.appcache
而后在html 里面引用这个 demo.appcache 文件
manifest="demo.appcache"
而后咱们要指定缓存的数据 ,在 demo.appcache 缓存文件里面指定
第一行:
CACHE MANIFEST
我须要指定那些文件须要缓存
CACHE:
须要缓存的文件的路径
NETWORK:
那些文件须要网络才能访问.浏览器