HTML5新特性
HTML5新特性
- 用于绘画的canvas元素
- 用于媒介回放的video、audio元素
- 对本地离线存储更好的支持
- 新的语义化标签，article,footer,header,nav,section
- 新的表单控件，calendar,date,time,email,url,search
- webworker，websocket，Geolocation
1.canvas
基于js的绘图api
2.audio、video
audio定义音频
video定义视频
属性：autoplay，loop，controls，preload
为媒体元素定义媒体资源，属性src，type
<!-- 音频标签 -->
<audio id="audio">
<source id="s1" src="meng.mp3"></source>
<source id="s2" src="meng.ogg"></source>
音频不支持
</audio>
<!-- 视频标签 -->
<video id="video">
<source id="s1" src="meng.mp3"></source>
<source id="s2" src="meng.ogg"></source>
视频不支持
</video>
音视频例子，详见 音视频实例。
3.datalist
datalist标签定义了input元素可能的选项列表
<input list="browsers">
<datalist id="browsers">
<option value="IE"></option>
<option value="FF"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
</datalist>
4.语义化标签，article,footer,header,nav,section
5.html5拖拽（Drag和Drop）
6.web存储
在客户端存储数据
localStorage：没有时间限制的数据存储
sessionStorage：针对一个会话的数据存储
7.应用程序缓存
<html lang="en" manifest="xxx.appcache">
离线浏览，减少服务端负载，速度快
8.websocket
浏览器通过JS向服务器发出建立websocket连接的请求，连接建立以后，客户端和服务器端就可以通过tcp连接直接交换数据。
9.新的属性和方法
classList:返回DOM元素的class列表（类的名称列表）。是新集合类型DOMTokenList的实例。与其他DOM集合类似。DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法也可以使用方括号语法。
remove(value)方法：表示从列表中删除给定的字符串。
contains(value)方法：表示列表中是否存在给定的值，如果存在就返回”true”，否则返回”false”。
add(value)方法:表示列表中的字符串添加到列表中。如果已经存在就不添加了。
toggle(value)方法:如果列表中已经存在给定的值，删除它;如果列表中没有给定的值，添加它。
<div class="sun sonya bang">啊哈</div>
<div class="sun sonya">啊哈2</div>
//获取要删除类名meng的div
var div = document.getElementsByTagName("div")[0];
alert(div.classList) //sun sonya bang
div.classList.remove("sonya")
alert("div.className: " + div.className) //div.className: sun bang
alert(div.classList.contains("sun")) //true
alert(div.classList.contains("sunyingying")) //false
div.classList.add("haodeli");
alert("div.className: " + div.className) //div.className: sun bang haodeli
var div = document.getElementsByTagName("div");
var i, len;
for(i=0, len = div.length; i< len; i++){
div[i].classList.toggle("bang");
}
alert("div[0].className: " + div[0].className) //div[0].className: sun haodeli
alert("div[1].className: " + div[1].className) //div[1].className: sun sonya bang
document.activeElement 始终会引用DOM中当前获得了焦点的元素 document.hasfocus()方法 这个方法用于确定文档是否获得了焦点。
document.readyState :loadding，正在加载文档。complete，已经加载完文档
document.compatMode ： 判断浏览器模式。值为”CSS1Compat”是标准模式，值为”BackCompat”是混杂模式。
document.charset：表示文档中实际使用的字符集，也可以用来指定新的字符集。默认情况下，charset属性的值为”UTF-16”，但是可以通过meta标签、响应头部或者直接设置charset属性进行修改。
document.defaultCharset：表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。
元素的dataSet属性：添加了自定义数据属性之后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例。DOMStringMap是名值对儿的映射。在这个映射中，每个data-name形式的属性都会有一个对应的属性，只不过属性名没有data-前缀(比如，自定义属性是data-myname，那映射中对应的属性就是myname)。
autofocus ：自动获取焦点