HTML5冲刺

html5特性及知识点

1、新标签
1)div语义不强，针对结构部署，提供了以下新标签
nav/main/header/footer/article/aside
ie9将把以上元素全部解析为行内元素，
引入第三方js插件：html5shiv.min.js
2)<progress></progress>
有两个属性。max:最大值 value:当前进度值
<meter></meter>
度量器
3)设置默认浮雕效果
<fieldset>
<legend>your content</legend>
</fieldset>

2、表单属性更新
1)新增type属性
color/data/datetime/number/url/email/range
2)新增其他特性
输入提示占位：placeholder="文本"
自动获取焦点：autofocus
输入记忆：autocomplete on打开 off关闭
必须输入：required
正则验证：pattern="正则表达式"
multiple:选择上传 多个文件或者允许键入多个文本，如邮箱，默认以逗号分隔
form属性：form="id"; id是给某一form标签设定的Id属性值，这样在表外设置该form标签时，该Input标签内容将一并被提交
3)input list属性/datalist标签
既可以通过箭头选择，又可以自己输入
<form action="demo_form.asp">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>

3、新增表单事件
1)oninput:监听当前指定元素内容的改变，一旦改变，将触发该事件
与onkeyup较为相似，但onkeyup不会对鼠标粘贴操作进行响应
，以及对快捷键的响应也不尽相同
2)oninvalid：当验证不通过时触发，如pattern属性的正则匹配

4、多媒体标签
audio/video
1)标签属性：
width：宽度
height:高度
src:资源url
autoplay:自动播放
loop:循环播放
currentTime：播放进度
duration：总时间
paused:视频播放状态

2)包裹标签
<source></source>被包裹在以上两个标签内用于设定资源属性
属性：
src:资源url
type:"video/mp4" <!--设置资源属性-->
3)方法：
.load()加载
.play()播放
.pause() 暂停

5、选取元素新方式
document.querySelector([selector]) 获取满足条件的第一个元素
document.querySelectorAll([selector]) 获取满足条件的所有元素伪数组

6、操作类新方式
1)el.classList 返回当前元素所有的样式列表
2)el.classList.add('className','value') 向元素添加指定类，一次只能添加一类
3)el.classList.remove('className') 从该元素的classList中移除指定类
4)el.classList.toggle('className') 类切换

7、全屏接口(兼容问题)
1)进入全屏
function full(ele) {
if (ele.requestFullscreen) {
ele.requestFullscreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.webkitRequestFullscreen) {
ele.webkitRequestFullscreen();
} else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
}
}
2)退出全屏
function exitFullscreen() {
if(document.exitFullScreen) {
document.exitFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
}

3)判断当前是否全屏
function isFullScreen() {
return !! (
document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.msFullScreen
);
}

8、FileReader接口
1)创建读取对象：var reader=new FileReader()
说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中
2)对象相关方法
readAsText(file):读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8
readAsBinaryString(file):读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。
例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
readAsDataURL(file):读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件
(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，
并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。
abort():中断读取
3)文件存储在input表单元素的files属性中，它是一个数组
files[index]即为2)中的实参
4)
FileReader提供一个完整的事件模型，用来捕获读取文件时的状态
* .onabort:读取文件中断片时触发
* .onerror:读取错误时触发
* .onload:文件读取成功完成时触发
* .onloadend:读取完成时触发，无论成功还是失败
* .onloadstart:开始读取时触发
* .onprogress:读取文件过程中持续触发*/

9、拖拽接口
1)为标签添加属性draggable=“true”后该元素即可被鼠标拖拽
图片和超链接默认可以拖拽
2)拖拽事件
应用于被拖拽的元素的有
ondrag 拖拽整个过程都会触发
ondragstart 拖拽开始时
ondragleave 鼠标离开拖拽元素时触发
ondragend 拖拽结束时触发

应用于目标元素的有
ondragenter 进入目标元素后
ondragover 在目标元素上方
ondrop 释放鼠标后
ondragleave 鼠标离开目标元素后

2)事件源对象
全局拖拽时，用document触发以上事件
e.target 的值即为当前被拖拽的元素
通过事件捕获来捕捉拖拽元素
在e内存在e.dataTransfer
可通过事件源对象的dataTransfer来实现数据的存储与获取
e.dataTransfer.setData(format,data);
format:数据类型，text/html text/url-list
data：数据,一般是字符串值
通过e.dataTransfer.setData存储的数据只能在ondrop事件内获取
通过e.dataTransfer.getData(format)获取
浏览器默认阻止ondrop事件
在html5中,遇到ondrop()事件无效，可能原因是浏览器的默认操作，需执行事件阻止系统的默认操作。

obj.ondragover = function(e){

e.preventDefault();

}

obj.ondrop = function(e){

e.preventDefault();

}

10、地理定位接口
1)navigator.geolocation
2)/*1.获取地理信息成功之后的回调
* 2.获取地理信息失败之后的回调
* 3.调整获取当前地进信息的方式*/
//navigator.geolocation.getCurrentPosition(success,error,option);
/*option:可以设置获取数据的方式
* enableHighAccuracy:true/false:是否使用高精度
* timeout:设置超时时间，单位ms
* maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位是ms*/
获取的是经纬度

11、web存储
1)sessionstorage
特点：仅在当前会话下有效，关闭页面后被清除
一般为5MB大小，仅在客户端（即浏览器）中保存，不参与和服务器的通信，
提供相应的操作方法，本质上是存储到当前页面的内存中
方法：以window来调用
setItem(key,value) 以键值对的方式存储数据
getItem(key) 获相应存储数据
removeItem(key) 移除相应数据
clear() 清空存储
2)localstorage
除非被清除，否则永久保存。不同浏览器间不共享数据
一般为20MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信
方法完全一致
3)应用程序缓存
创建自己希望缓存的资源，在断开网络时也能显示相应内容
要创建cache manifest 文件
优点：可配置需要缓存的资源，提高浏览速度，减少请求次数

使用步骤：html标签中包含manifest属性
<html manifest="fileName">
fileName是应用缓存清单文件的路径，扩展名为appcache

该文件的写法：
CACHE MANIFEST
#注释
#需要缓存的文件列表
CACHE：
../img.jpg
../img.gif
# *:缓存所有文件
#不再缓存范围内的文件列表
NETWORK:
../img.png
#文件获取失败时的替代文件列表
FALLBACK
../img.png ../img.bmp
# /:所有文件

classList属性：这个属性是新集合类型DOMTokenList的实例。其包含以下属性和方法：

->length

->item（）（也可以用方括号语法）：取得每个元素

->add（）：将给定的字符串值添加到列表中。如果值已经存在，就不添加。

->contains（）：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。

->remove（）：从列表中删除给定的字符串。

->toggle（）：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。