HTML5第二天笔记.doc

HTML5API  目录 目录 1 第1章 新增API 3 1.1 多媒体 3 1.2 拖拽 8 1.3 拖拽 8 1.3.1 拖拽元素 8 1.3.2 目标元素 8 1.3.3 事件监听 8 1.4 历史 9 1.5 地理定位 9 1.5.1 获取地理信息方式 9 1.5.2 隐私 10 1.5.3 API详解 10 1.6 Web存储 11 1.6.1 特性 11 1.6.2 window.sessionStorage 11 1.6.3 window.localStorage 11 1.6.4 方法详解 12 1.6.5 其它 12 1.7 全屏 12 1.8 网络状态 13 1.9 应用缓存 13 1.9.1 优势 13 1.9.2 缓存清单 14 1.9.3 manifest文件格式 14 1.9.4 事件监听 14 1.9.5 其它 14 新增API 多媒体 方法：load() 加载、play() 播放、pause() 暂停 属性：currentTime 视频播放的当前进度、 duration:视频的总时间 paused:视频播放的状态. 事件： oncanplay:?事件在用户可以开始播放视频/音频（audio/video）时触发。 ontimeupdate:通过该事件来报告当前的播放进度. onended:播放完时触发 全屏：video.webkitRequestFullScreen(); 拖拽 在HTML5的规范中，我们可以通过为元素增加draggable=true来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。 拖拽元素 页面中设置了draggable=true属性的元素 目标元素 页面中任何一个元素都可以成为目标元素 事件监听 拖拽元素 ondrag 应用于拖拽元素，整个拖拽过程都会调用 ondragstart 应用于拖拽元素，当拖拽开始时调用 ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用 ondragend 应用于拖拽元素，当拖拽结束时调用 目标元素 ondragenter 应用于目标元素，当拖拽元素进入时调用 ondragover 应用于目标元素，当停留在目标元素上时调用 ondrop 应用于目标元素，当在目标元素上松开鼠标时调用 ondragleave 应用于目标元素，当鼠标离开目标元素时调用 历史 提供window.history，对象我们可以管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。 旧版本浏览器.. history.back() 回退 history.forward() 前进 地理定位 在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service) 获取地理信息方式 1、IP地址 2、三维坐标 GPS（Global Positioning System，全球定位系统） 目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：1.美国 Global Positioning System （全球定位系统） 简称GPS；.2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo?satellite navigation system（伽利略卫星导航系统） 简称GALILEO（伽利略）；4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ；印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS；以上6个系统中国都能使用。 Wi-Fi 手机信号 3、用户自定义数据 如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。 隐私 HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。 API详解 navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息 navigator