html5相关笔记（二）
1.document.querySelector("button:nth-child()3")，是可以获取到元素的，html5新增的获取dom对象的api是支持css3新的选择器的。
2.html5新增的语义化标签，多媒体盒子标签 figure，专门用来放视频标签、音频标签、图片标签等，<figure><figcaption>视频</figcaption></figure>
3.这是css字图图标的一个库http://fontawesome.dashgame.com/，使用的时候只需要引用相应的文件，然后只有引用类即可，实现的原理是，内部给这个类添加了一个伪元素，所以只要添加这个类，就会产生一个伪元素，伪元素的content属性，赋值了字体图标的值，所以就会显示出一个图标来，注意看清楚css文件中是怎么写的，因为不同版本的css文件中代码有不同的地方，如3.2版本的都会自动给你设置字体，而4.7版本的需要你自己设置字体，或者多添加一个字体的类。
4.谷歌浏览器在设置video标签的currentTime属性时无效，并且会把currentTime属性赋值为0，但是火狐可以，所以自己制作视频控制条时还是会存在兼容性的问题
◆视频对象.play() 表示播放
◆视频对象.pause() 表示暂停
◆视频对象.oncanplay=function(){}表示视频加载完毕可以播放的时候
◆视频对象.duration 表示获取视频的总时间长度，单位为秒
◆视频对象.ontimeupdate=function(){}表示视频播放时，当前的播放时间变化的时候
◆视频对象.currentTime 表示获取视频当前已经播放的时间，其实也可以设置，但是谷歌浏览器中无法设置，设置后会被清零。
◆视频对象.webkitRequestFullScreen() 表示视频全屏
5.在html5中，任何元素都可以拖拽，但是默认可以拖拽的元素有图片和超链接，其它元素如果想实现拖拽，可以通过给元素设置draggable="true"，这样就开启了元素拖拽的功能
◆拖拽元素的事件监听
◇ondrag 应用于拖拽元素，整个拖拽过程都会一直在调用
◇ondragstart 应用于拖拽元素，当拖拽开始时调用
◇ondragleave 应用于拖拽元素,当鼠标离开了原来那个不会动元素的范围内时调用，但是鼠标还是按住了拖拽的那个元素，只不过是离开了那个元素原本位置的范围。
◇ondragend 应用于拖拽元素，当拖拽结束时调用
◆拖拽到某个目标元素的监听事件
◇ondragenter 应用于目标元素，当拖拽元素进入时调用（也是针对鼠标，当鼠标按住拖拽的元素时，鼠标移入到目标元素的范围内，才会触发这个事件）
◇ondragleave 应用于目标元素，当鼠标离开目标元素时调用（也是针对鼠标，当鼠标按住拖拽的元素时，鼠标移入到目标元素的范围内后，再移出目标元素范围内，才会触发这个事件）
◇ondragover 应用于目标元素，当停留在目标元素上时调用（也是针对鼠标，当鼠标按住拖拽的元素时，鼠标移入到目标元素的范围内，只要在目标元素的范围内，就会连续触发这个事件），这个事件默认行为是不接受拖拽元素的，如果想让目标元素接受拖拽元素的话，需要在事件方法中的事件驱动里加一句event.preventDefault取消事件的默认行为，只有这样ondrop事件才会触发，当前目标元素接受拖拽元素。
◇ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
6.取消事件的默认行为 ，在js中可以使用event.preventDefault()和函数末尾的return false，这两种都可以取消事件的行为，但是都有兼容性的问题【
//取消事件的默认行为
if (event.preventDefault) {
event.preventDefault();
} else {
return false;
}
】，在jquery中使用 event.preventDafault()可以取消事件的默认行为，兼容性很好。
7.html5中允许页面上的任一元素全屏显示
◆元素.requetFullscreen() 开启全屏显示
◆元素.cancleFullscreen() 关闭全屏显示
◆但是兼容性问题值得注意，不同的浏览器需要添加前缀：webkitRequestFullScrenn()、mozRequestFullScrenn()、webkitCancleFullScreen() 、mozCancleFullScreen()
◆html5全屏的兼容性写法【
//兼容性写法
if (box.requestFullscreen) {
box.requestFullscreen();
} else if (box.webkitRequestFullScreen) {
box.webkitRequestFullScreen();
} else if (box.mozRequestFullScreen) {
box.mozRequestFullScreen();
} else {
alert("您的浏览器暂时不支持html5全屏效果");
}
】
8.html5 中 Web存储
◆在html4中使用document.cookie来存储本地的数据 ，可以用来存储大小约4kb的数据，解析起来很不方便，cookie一般用于存储用户名和密码。
◆html5中的Storage 存储
◇window.sessionStorage（会话存储，存到浏览器缓存中）【
设置与读取方便，容量为5M，只能够存乎此字符串，可以使用JSON.stringfy()将对象编码后存储，生命周期为关闭浏览器窗口，在同一个窗口下数据可以共享
】
◇window.localStorage（本地存储，存到本地磁盘中）【
设置与读取方便，容量为20M，只能够存取字符串，可以使用JSON.stringfy()将对象编码后存储，永久生效，除非手动删除，可以多窗口共享
】
◇Storage使用的方法【
setItem(key,value) 设置存储内容，
getItem(key) 读取存储内容，
removeItem(key) 删除键值为key的存储内容，
clear() 清空所有存储内容，
key(n) 以索引值来获取存储内容的键
】
★WebSQL、IndexDB已经被w3c 放弃了..，因为生命周期差异，存储空间差异。
9.html5中的检测网络状态
◆window.ononline 用户网络连接时被调用 ,但是很多浏览器早已不支持这种写法了，所以只能够使用这种方式 window.addEventListener("online", function () {});
◆window.onoffline 用户网络断开时被调用，但是很多浏览器早已不支持这种写法了，所以只能够使用这种方式 window.addEventListener("offline", function () {});
◆无论是online还是offline，都是惰性的事件，只有突然间来网或者突然间断网才会有效果，否则无效。
◆window.navigator.onLine 用户网络只要是连接的，返回值就为true。
10.应用缓存，在html5可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件即可
◆可配置需要缓存的资源
◆网络无连接应用也可以用
◆本地读取缓存资源，提高访问速度，增强用户体验
◆减少请求，缓解服务器负担
◆创建一个文件，文件后缀名为 .appcache，文件中书写的格式【
CACHE MANIFEST
# 注释以#开头
#下面是要缓存的文件
CACHE:
http://baidu.com/Upload/Image/01.jpg
http://baidu.com/Upload/Image/02.jpg
#指定必须联网才能访问的文件
NETWORK:
http://baidu.com/Upload/Image/03.jpg
http://baidu.com/Upload/Image/04.jpg
#当当前页面无法访问时回退的页面
FALLBACK:
http://baidu.com/404.html
】
,让html文件与这个缓存文件关联起来【
<html manifest="01.appcache">
】，只需要在html标签中加入一个属性然后属性值为这个文件的名字即可。
◆应用程序缓存可以缓存css、js、image、html等。
◆这个文件里的内容是写死的，但是可以使用一些文件流程序动态生成这个文件。
11.地理定位，在html5中使用地理信息的API来获取用户的地理信息，这样就可以基于用户位置开发互联网应用，既基于位置服务（Location Base Service）
◆获取地理信息的方式【
◇IP地址
◇三维坐标：GRS（Global Positioning System 全球定位系统）、Wi-Fi、 手机信号
◇用户自定义数据
】
◆获取地理信息的方式比【
◇IP地址：优点：任何地方都可以使用，在服务器端处理。缺点：不精确（经常出错，一般精确到城市级），运算代价大。
◇GRS：优点：很精确。缺点：定位时间长，耗电量大，室内效果差，需要额外硬件设备支持。
◇Wi-Fi：优点：精确，在室内使用简单、快捷。缺点：在乡村这些Wi-Fi接入点少的地区无法使用。
◇手机信号：优点：相当精确可在室内使用简单、快捷。缺点：需要能够访问手机或其modem设备。
◇用户自定义数据：优点：可获得比程序定位服务更准确的位置数据，用户自行输入可能比自动检测更快。缺点：可能不准确，特别是当用户位置变更后。
】
◆在html5地理定位API进行定位时，必须要得到用户的明确许可，这是html5中地理定位的协议里提供的保护用户隐私的机制。
★注意，pc端需要电脑设置了允许浏览器有定位的权限才能够定位成功，否则就会定位失败。
★【
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息，navigator.geolocation.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息。
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)
position.coords.latitude纬度
position.coords.longitude经度
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式
】
◆navigator.geolocation 表示通过bom对象中的navigator对象来获取地理定位的对象
◆navigator.geolocation.getCurrentPosition(function(position){
console.log("定位成功")；
console.log("经度:"+position.coords.longitude+"纬度"+position.coords.latitude);
},function(error){
console.log("定位失败")；
console.log(error)；
});
◆获取到了经纬度之后，就可以通过一些地图API（百度地图、谷歌地图、高德地图）来具体进行定位
12.推荐一个查询全球定位信息的网站：http://www.gpsspg.com/（全球定位信息查询（经纬度、手机号、基站、身份证号、行政区））
13.一个图片制作成全景的html5页面的程序：pano2vr.exe，这个程序很好用，很好玩儿。
2.html5新增的语义化标签，多媒体盒子标签 figure，专门用来放视频标签、音频标签、图片标签等，<figure><figcaption>视频</figcaption></figure>
3.这是css字图图标的一个库http://fontawesome.dashgame.com/，使用的时候只需要引用相应的文件，然后只有引用类即可，实现的原理是，内部给这个类添加了一个伪元素，所以只要添加这个类，就会产生一个伪元素，伪元素的content属性，赋值了字体图标的值，所以就会显示出一个图标来，注意看清楚css文件中是怎么写的，因为不同版本的css文件中代码有不同的地方，如3.2版本的都会自动给你设置字体，而4.7版本的需要你自己设置字体，或者多添加一个字体的类。
4.谷歌浏览器在设置video标签的currentTime属性时无效，并且会把currentTime属性赋值为0，但是火狐可以，所以自己制作视频控制条时还是会存在兼容性的问题
◆视频对象.play() 表示播放
◆视频对象.pause() 表示暂停
◆视频对象.oncanplay=function(){}表示视频加载完毕可以播放的时候
◆视频对象.duration 表示获取视频的总时间长度，单位为秒
◆视频对象.ontimeupdate=function(){}表示视频播放时，当前的播放时间变化的时候
◆视频对象.currentTime 表示获取视频当前已经播放的时间，其实也可以设置，但是谷歌浏览器中无法设置，设置后会被清零。
◆视频对象.webkitRequestFullScreen() 表示视频全屏
5.在html5中，任何元素都可以拖拽，但是默认可以拖拽的元素有图片和超链接，其它元素如果想实现拖拽，可以通过给元素设置draggable="true"，这样就开启了元素拖拽的功能
◆拖拽元素的事件监听
◇ondrag 应用于拖拽元素，整个拖拽过程都会一直在调用
◇ondragstart 应用于拖拽元素，当拖拽开始时调用
◇ondragleave 应用于拖拽元素,当鼠标离开了原来那个不会动元素的范围内时调用，但是鼠标还是按住了拖拽的那个元素，只不过是离开了那个元素原本位置的范围。
◇ondragend 应用于拖拽元素，当拖拽结束时调用
◆拖拽到某个目标元素的监听事件
◇ondragenter 应用于目标元素，当拖拽元素进入时调用（也是针对鼠标，当鼠标按住拖拽的元素时，鼠标移入到目标元素的范围内，才会触发这个事件）
◇ondragleave 应用于目标元素，当鼠标离开目标元素时调用（也是针对鼠标，当鼠标按住拖拽的元素时，鼠标移入到目标元素的范围内后，再移出目标元素范围内，才会触发这个事件）
◇ondragover 应用于目标元素，当停留在目标元素上时调用（也是针对鼠标，当鼠标按住拖拽的元素时，鼠标移入到目标元素的范围内，只要在目标元素的范围内，就会连续触发这个事件），这个事件默认行为是不接受拖拽元素的，如果想让目标元素接受拖拽元素的话，需要在事件方法中的事件驱动里加一句event.preventDefault取消事件的默认行为，只有这样ondrop事件才会触发，当前目标元素接受拖拽元素。
◇ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
6.取消事件的默认行为 ，在js中可以使用event.preventDefault()和函数末尾的return false，这两种都可以取消事件的行为，但是都有兼容性的问题【
//取消事件的默认行为
if (event.preventDefault) {
event.preventDefault();
} else {
return false;
}
】，在jquery中使用 event.preventDafault()可以取消事件的默认行为，兼容性很好。
7.html5中允许页面上的任一元素全屏显示
◆元素.requetFullscreen() 开启全屏显示
◆元素.cancleFullscreen() 关闭全屏显示
◆但是兼容性问题值得注意，不同的浏览器需要添加前缀：webkitRequestFullScrenn()、mozRequestFullScrenn()、webkitCancleFullScreen() 、mozCancleFullScreen()
◆html5全屏的兼容性写法【
//兼容性写法
if (box.requestFullscreen) {
box.requestFullscreen();
} else if (box.webkitRequestFullScreen) {
box.webkitRequestFullScreen();
} else if (box.mozRequestFullScreen) {
box.mozRequestFullScreen();
} else {
alert("您的浏览器暂时不支持html5全屏效果");
}
】
8.html5 中 Web存储
◆在html4中使用document.cookie来存储本地的数据 ，可以用来存储大小约4kb的数据，解析起来很不方便，cookie一般用于存储用户名和密码。
◆html5中的Storage 存储
◇window.sessionStorage（会话存储，存到浏览器缓存中）【
设置与读取方便，容量为5M，只能够存乎此字符串，可以使用JSON.stringfy()将对象编码后存储，生命周期为关闭浏览器窗口，在同一个窗口下数据可以共享
】
◇window.localStorage（本地存储，存到本地磁盘中）【
设置与读取方便，容量为20M，只能够存取字符串，可以使用JSON.stringfy()将对象编码后存储，永久生效，除非手动删除，可以多窗口共享
】
◇Storage使用的方法【
setItem(key,value) 设置存储内容，
getItem(key) 读取存储内容，
removeItem(key) 删除键值为key的存储内容，
clear() 清空所有存储内容，
key(n) 以索引值来获取存储内容的键
】
★WebSQL、IndexDB已经被w3c 放弃了..，因为生命周期差异，存储空间差异。
9.html5中的检测网络状态
◆window.ononline 用户网络连接时被调用 ,但是很多浏览器早已不支持这种写法了，所以只能够使用这种方式 window.addEventListener("online", function () {});
◆window.onoffline 用户网络断开时被调用，但是很多浏览器早已不支持这种写法了，所以只能够使用这种方式 window.addEventListener("offline", function () {});
◆无论是online还是offline，都是惰性的事件，只有突然间来网或者突然间断网才会有效果，否则无效。
◆window.navigator.onLine 用户网络只要是连接的，返回值就为true。
10.应用缓存，在html5可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件即可
◆可配置需要缓存的资源
◆网络无连接应用也可以用
◆本地读取缓存资源，提高访问速度，增强用户体验
◆减少请求，缓解服务器负担
◆创建一个文件，文件后缀名为 .appcache，文件中书写的格式【
CACHE MANIFEST
# 注释以#开头
#下面是要缓存的文件
CACHE:
http://baidu.com/Upload/Image/01.jpg
http://baidu.com/Upload/Image/02.jpg
#指定必须联网才能访问的文件
NETWORK:
http://baidu.com/Upload/Image/03.jpg
http://baidu.com/Upload/Image/04.jpg
#当当前页面无法访问时回退的页面
FALLBACK:
http://baidu.com/404.html
】
,让html文件与这个缓存文件关联起来【
<html manifest="01.appcache">
】，只需要在html标签中加入一个属性然后属性值为这个文件的名字即可。
◆应用程序缓存可以缓存css、js、image、html等。
◆这个文件里的内容是写死的，但是可以使用一些文件流程序动态生成这个文件。
11.地理定位，在html5中使用地理信息的API来获取用户的地理信息，这样就可以基于用户位置开发互联网应用，既基于位置服务（Location Base Service）
◆获取地理信息的方式【
◇IP地址
◇三维坐标：GRS（Global Positioning System 全球定位系统）、Wi-Fi、 手机信号
◇用户自定义数据
】
◆获取地理信息的方式比【
◇IP地址：优点：任何地方都可以使用，在服务器端处理。缺点：不精确（经常出错，一般精确到城市级），运算代价大。
◇GRS：优点：很精确。缺点：定位时间长，耗电量大，室内效果差，需要额外硬件设备支持。
◇Wi-Fi：优点：精确，在室内使用简单、快捷。缺点：在乡村这些Wi-Fi接入点少的地区无法使用。
◇手机信号：优点：相当精确可在室内使用简单、快捷。缺点：需要能够访问手机或其modem设备。
◇用户自定义数据：优点：可获得比程序定位服务更准确的位置数据，用户自行输入可能比自动检测更快。缺点：可能不准确，特别是当用户位置变更后。
】
◆在html5地理定位API进行定位时，必须要得到用户的明确许可，这是html5中地理定位的协议里提供的保护用户隐私的机制。
★注意，pc端需要电脑设置了允许浏览器有定位的权限才能够定位成功，否则就会定位失败。
★【
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息，navigator.geolocation.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息。
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)
position.coords.latitude纬度
position.coords.longitude经度
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式
】
◆navigator.geolocation 表示通过bom对象中的navigator对象来获取地理定位的对象
◆navigator.geolocation.getCurrentPosition(function(position){
console.log("定位成功")；
console.log("经度:"+position.coords.longitude+"纬度"+position.coords.latitude);
},function(error){
console.log("定位失败")；
console.log(error)；
});
◆获取到了经纬度之后，就可以通过一些地图API（百度地图、谷歌地图、高德地图）来具体进行定位
12.推荐一个查询全球定位信息的网站：http://www.gpsspg.com/（全球定位信息查询（经纬度、手机号、基站、身份证号、行政区））
13.一个图片制作成全景的html5页面的程序：pano2vr.exe，这个程序很好用，很好玩儿。
