HTML4.01与HTML5之间的差异主要在于，html5专注于内容与结构，而不专注表现。html5增加了Canvas、Video和Audio等标签的支持，并增加了更具语义性的标签或是接口，比如aside，header，footer等，同时也修改或废除一些html的标签与语义，如表单特性，Marquee，frameset等。
<html>告知浏览器这是一个HTML文档，该元素是HTML文档中最外层的元素，html元素也可称为根元素。
1.html标签在html4.01与html5中的差别：
在html4.01中，xmlns属性在XHTML中是必须的。实际上这个属性没有什么实际效果，只是出于验证的需要，我们才加上这个属性。而且xmlns的唯一合法值为：“ http://www.w3.org/1999/xhtml”定义XMLnamespace属性。
2.HTML标签的全局属性（标准属性，16种，红色属性是HTML5中的新属性）：
（1）accesskey：规定激活元素的快捷键
语法：<element accesskey="character">(其中character规定了激活标签的快捷键)
eg:<a href="http://www.w3school.com.cn/tiy/t.asp?f=html_standard_accesskey" accesskey="h">点击这里</a>
支持该属性的标签有：<a>、<area>、<button>、<input>、<label>、<legend>、<textarea>,并且除了Opera浏览器外，其他浏览器都兼容accesskey属性
用户的使用：用户要激活规定的标签，需要按住alt键+规定的快捷键或是按住shift+alt+规定的快捷键就可以激活了。
（2）class：规定元素的一个或多个类名（引用样式表中的类）
（3）contenteditable：规定元素内容是否可编辑
语法：<element contenteditable="true|false">,true规定元素可编辑，false规定元素不可编辑
在添加了这个属性的文本中，用户鼠标点击文本即可进行文本内容的修改，并且子元素会从父元素中继承该属性。
所有浏览器都支持该属性
（4）contextmenu：规定元素的上下文菜单，上下文菜单在用户右键点击元素时显示
语法：<element contextmenu="menu_id">(其中menu_id为要打开的menu标签的id)
eg：
<div contextmenu="menu1">
<menu id="menu1" type="context">
<menuitem label="left"><menuitem/>
<menuitem label="right"><menuitem/>
<menu/>
<div/>目前只有firefox浏览器支持该属性（然而我在firefox中试验，也没发现有效）
（5）data-*：用于存储页面或应用程序的私有定制数据
语法：<element data-*="somevalue">（属性名somevalue中不应该包含任何大写字母，并且在前缀“data-”之后必须有至少一个字符，属性值可以为任意的字符串）
eg:<div id="user" uid="1245" uname="脚本之家"><div/>
定义与用法：
data_*属性用于存储页面或应用程序的私有自定义数据，赋予我们在所有HTML元素上嵌入自定义data属性的能力。这些存储的数据能够被页面的Javascript利用，一创建更好的用户体验（无需使用Ajax或是数据库查询）
*利用dataset属性存取data-*自定义属性的值，这个dataset是h5中js的API的一部分，用于返回一个所有选择data-*属性的DOMStringMap对象，而在调用这个方法的使用，不是使用完整的属性名，如data-uid来存取数据，应该省略data-前缀。而且如果属性名中包含连字符，应该去掉连字符，改用驼峰命名法。
<div id="user" data-id="1234" data-name="脚本之家" data-date-of-birth>码头</div>
<script>
var el=document.querySelector('#user');
console.log(el.id);//'user'
console.log(el.dataset);//一个DOMStringMap
console.log(el.dataset.id);//'1234'
</script>脚本之家关于data-*属性使用的详细讲解：http://www.jb51.net/html5/152511.html
刘哇勇关于类jQuery选择器的讲解：
（6）dir：规定元素中内容的文本方向
语法：<element dir="rtl / ltr">what the fuck!,</elment>//,!what the fuck
所有浏览器都支持该属性，但是在某些标签内则没有任何效果，如：<base>,<br>,<frame>,<frameset>,<hr>,<iframe>,<param>,<script>
（7）draggable：规定元素是否可拖动
语法：<element draggable="true|false|auto">
IE9以前的版本并不支持该属性，这个属性常用语拖放操作中，比如把某个内容拖动收藏夹等。
eg：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>通过拖放实现添加、删除</title>
<style type="text/css">
div>div{
display: inline-block;
padding: 10px;
background-color:#aaa;
margin: 3px;
}
</style>
</head>
<body>
<div style="width:600px;border:1px solid black;">
<h2>可将喜欢的项目拖到收藏夹 </h2>
<div draggable="true" ondragstart="dsHandler(event);">勿忘心安</div>
<div draggable="true" ondragstart="dsHandler(event);">照顾自己</div>
<div draggable="true" ondragstart="dsHandler(event);">Number 9</div>
<div draggable="true" ondragstart="dsHandler(event);">崇拜</div>
</div>
<div id="dest" style="width: 400px;height: 400px;border:1px solid black;float: left;">
<h2 ondragleave="return false;">收藏夹</h2>
</div>
<div id="gb" draggable="false" style="width:100px;height: 100px;border: 1px solid red;float: left;">我是垃圾桶</div>
<script type="text/javascript">
var dest=document.getElementById("dest");//获取收藏夹元素节点
var dsHandler=function(evt){//当开始拖动时触发dsHandler事件
evt.dataTransfer.setData("text/plain","<item>"+evt.target.innerHTML);
/*dataTransfer对象用于传输数据，setData（）函数将指定格式的数据赋值给dataTransfer对象，
参数format定义数据格式也就是数据的类型，data为待赋值的数据
text/plain是无格式正文，代表纯文本格式
* */
}
dest.ondrop=function(evt){
var text=evt.dataTransfer.getData("text/plain");//从dataTransfer对象中获取格式为text/plain的内容
if(text.indexOf("<item>")==0){
var newEle=document.createElement("div");
newEle.id=new Date().getUTCMilliseconds();// 返回date对象中用世界标准时间(UTC)表示的毫秒数(0-999)
newEle.innerHTML=text.substring(6);
newEle.draggle="true";
newEle.ondragstrat=function(evt){
evt.dataTransfer.setData("text/plain","<remove>"+newEle.id);
}
dest.appendChild(newEle);
}
}
document.getElementById("gb").ondrop=function(evt){
var id=evt.dataTransfer.getData("text/plain");
if(id.indexOf("<remove>")==0){
var target=document.getElementById(id.substring(8));
dest.removeChild(target);
}
}
document.ondragover=function(evt){
return false;
}
document.ondrap=function(evt){
return false;
}
</script>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();//阻止默认的事件发生
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);//target可以获得出发事件的目标元素
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>
</html>
（8）dropzone：规定在拖动被拖动数据时是否进行复制、移动或链接
目前没有浏览器支持这个属性，有点尴尬。。。但是有同名的js插件，以后再涉猎吧
（9）hidden：规定元素仍未或不再相关
语法：<element hidden></hidden>(在XHTML中：<element hidden="hidden"></element> )
除了IE之外的浏览器均支持该属性，浏览器不应该显示具有该属性的元素
（10）id：规定元素的唯一id
（11）lang：规定元素内容的语言
语法：<element lang="ISO语言代码">(在XHTML中：<element lang="ISO语言代码" xml:lang="ISO语言代码"></element> )
ISO语言代码如下:http://www.w3school.com.cn/tags/html_ref_language_codes.asp(W3C的 ISO代码参考)
（12）spellcheck：规定是否对元素进行拼写和语法检查
拼写检查主要是针对英文的，在输入英文单词时如果出现了字典中不存在的单词，就会被视为拼写出错的单词,在该单词下方会出现红色的波浪线
语法：<element spellcheck="true|false">
eg:<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
spellcheck属性可以对以下内容进行拼写检查：1.input元素中的文本值（非密码）2.<textarea>元素中的文本3.可编辑元素中的文本
IE9以前的浏览器不支持该属性
（13）style：规定元素的行内css样式
（14）tabindex：规定元素的tab键次序
语法：<element tabindex="number">
以下元素支持tabindex属性：<a>,<area>,<button>,<input>,<object>,<select>,<textarea>等这些可被用户操作的标签。除了safari之外，其他浏览器均支持该属性
（15）title：规定有关元素的额外信息
title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。
提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。
（16）translate：规定是否应该翻译元素内容
所有浏览器都不支持这个属性
三、HTML事件属性
参考文档：http://www.w3school.com.cn/tags/html_ref_eventattributes.asp
body标签中的事件属性：
1.onafterprint：文档打印之后触发的脚本
2.onbeforeprint：文档打印之前触发的脚本
3.onload：文档加载完毕触发的脚本
4.onresize：浏览器窗口大小被更改之后触发的脚本
5.onunload：一旦页面已下载时触发的脚本（或是浏览器窗口被关闭时）
form标签中的事件属性：
1.onblur：元素失去焦点时运行的脚本
2.onchange：元素值被改变时运行的脚本
3.onfocus：晕元素获得焦点时运行的脚本
4.onselect：在元素中文本被选中后触发（即用鼠标选中一段文字，这与让某元素获得焦点是不同的）
5.onsubmit：提交表单时触发
键盘事件属性：
1.onkeydown：当用户按下按键时触发
2.onkeypress：当用户敲击按钮时触发
3.onkeyup：当用户释放按键时触发
鼠标事件：
1.onclick：元素上发生鼠标点击时触发
2.ondblclick：元素上发生鼠标双击时触发
3.onmousedown：按下鼠标按钮时触发
4.onmousemove：鼠标指针移到元素上时触发，鼠标每动一次都会触发一次
5.onmouseout：鼠标指针移出元素上时触发
6.onmouseover：鼠标移到元素上时触发，只在第一次进入时触发
7.onmouseup：鼠标释放按钮时触发
Audio与Video方法，属性，事件
方法：
1.canPlayType()：向音频或是视频添加新的文本轨道
该方法返回下列值之一：
"probably"-浏览器最可能支持该音频/视频类型
"maybe"-浏览器也许支持该音频/视频类型
""-空字符串，浏览器不支持该视频/音频
语法：audio|video.canPlayType(type)
type即规定要检测的音频或是视频类型
常用值：video/ogg; video/mp4; video/webm; audio/mpeg; audio/ogg; audio/mp4
常用值（包含解码器）：
video/ogg;codes="theora,vorbis"
video/mp4;codes="avc1.4D401E, mp4a.40.2"
video/webm; codecs="vp8.0, vorbis"
audio/ogg; codecs="vorbis"
audio/mp4; codecs="mp4a.40.5"
如果包含编解码器，就只会返回"probably"
2.load()：重新加载音频或是视频元素
3.play()：开始播放音频或是视频
4.pause()：暂停当前播放的视频或是音频
属性：
1.autoplay:音视频在加载完成后自动播放，该属性值为布尔值，默认为false
2.buffered:返回表示音视频已缓冲部分的TimeRanges对象
TimeRanges对象表示用户的音视频缓冲范围，缓冲范围指的是已缓冲音视频的时间范围，如果用户在音视频中跳跃播放，会获得多个缓冲范围
TimeRanges有三个对象属性：length，start(index)，end(index)
这三个属性分别表示为
length-获得音视频中已缓冲范围的数量
start(index)-获得某个已缓冲范围的开始位置
end(index)-获得某个已缓冲范围的结束位置
首个缓冲范围的下标是0
eg：获得视频第一段缓冲范围部分，以秒计
myVid=document.getElementById("video1");
alert("Start:"+myVid.buffered.start(0)+"End:"+myVid.buffered.end(0));3.controls:设置或返回浏览器应当显示标准的音视频控件。
标准的音视频控件包括：播放，暂停，进度条，音量，全凭切换，字幕，轨道
4.curentSrc：返回当前视频的URL
5.currentTime：返回当前视频或音频的播放位置，以秒计，设置该属性时，播放会跳跃到指定的位置
6.defaultMuted：设置视频默认静音，该属性目前只有Chrome支持，而且该属性仅会改变默认的静音状态，而不是当前的，要改变当前的，只能使用muted，而muted与defaultMuted用法类似，但是只有IE8以及之前的版本不支持该属性。
7.defaultPlaybackRate：设置或返回视音频的默认播放速度，目前只有Chrome支持该属性，并且用0~1等来代表播放速率，1代表100%，0.5半速，2为倍速，-1表示以正常速度为向后播放
8.duration：返回当前音频、视频的长度，以秒计，如果没有设置音频或视频，则返回NaN
9.ended：检测音视频是否已经结束
10.loop：将视频设置为循环播放，除IE8以及之前的版本之外，其他浏览器都 支持该属性
11.networkState：返回音频/视频的当前网络状态
有四个状态值：
0-音视频尚未初始化
1-音视频是活动的且已选取资源，但并未使用网络
2-浏览器正在下载数据
3-未找到视音频来源
12.paused：设置或返回音视频是否暂停
13.playbackRate：设置或返回音视频播放的速度，目前几乎所有主流浏览器都支持，除了IE8及之前版本
14.played：返回表示音频/视频以播放部分的TimesRanges对象
15.preload：设置或返回音视频是否应该在页面加载后进行加载
有三个值：auto，metadata，none；auto指示一旦页面加载，则开始加载音视频，metadata指示当页面加载后仅加载音视频的元数据，none表示页面加载后不加载音视频
16.readyState：返回视频就绪状态
0=没有关于音频或视频是否就绪的信息
1=关于音频视频就绪的元数据
2=关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
3=当前及至少下一帧的数据时可用的
4=可用数据足以开始播放
17.seekable：获得音频视频可寻址部分的TimeRanges对象
可寻址范围指的是用户在音频视频中可移动播放的时间范围，对于流视频来说，通常可以寻址到任何位置，即使其仍未缓冲
18.seeking：返回用户是否正在音视频中进行查找
19.volume：规定音视频的当前音量，1是默认值100%
事件：
1.canplay：当浏览器可以播放视频音频时
2.canplaythrough：当浏览器可在不因缓冲而停顿的情况下进行播放时
3.durationchange：当音频视频的时长已更改时
4.loadeddata：当浏览器已加载音频视频的当前帧时
5.loadmetadata：当浏览器已加载音频视频的元数据时
6.progress：当浏览器正在下载音频视频时
7.loadstart：当浏览器开始查找音频或视频时
