最近在复习前端的基础知识，在这里做一个总结，这是HTML5篇。
新特性
取消了过时的显示效果标记和
...
新增语义化标签
新增多媒体标签(video视频,audio音频)
增加更多表单类型
新增canvas绘图标签
增加了标签拖动、数据存储等一些API
HTML5优缺点
优点
提高可用性和改进用户的友好体验；
可以给网站带来更多的多媒体元素(视频和音频)；
可以很好的替代FLASH和Sliverlight;
当涉及到网站的抓取和索引的时候，对于SEO很友好；
将被大量应用于移动应用程序和游戏；
可移植性好。
缺点
该标准并未能很好的被浏览器所支持。因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。
1、删除或重定义了哪些标签
1.1 删除的标签
纯表现的元素
besefont、 big、center、 font、s、strike、tt、u对可用性产生负面影响的元素
frame、frameset、noframes产生混肴的元素
acronym、 applet、 isindex、dir1.2 重定义标签
显示不变，只是表达的含义进行了重新定义的标签
标签
备注
代表内联文本，通常是粗体，没用传递表示重要的意思
代表内联文本，通常是斜体，没有传递表达重要的意思
可以同detailsy与figure一同使用，定义包含文本，dialog亦可使用
可以同details与figrue一同使用，汇总细节，dialog也可用
表示主题结束，而不是水平线，虽然显示相同
重新定义用户界面的菜单，配合commond或者menuitem使用
表示小字体，例如打印注释或则法律条款
表示重要性而不是强调符号
2、新增了哪些标签
2.1 结构标签(块状元素)——有意义的div
标签
备注
标记定义一篇文章
标记定义一个页面或一个区域的头部
标记定义导航链接
标记定义一个区域
标记定义页面内容的侧边栏
标记定义文件中一个区块的相关信息
标记定义一组媒体内容以及他们的标题
标记定义figure元素的标题
标记定义一个页面或一个区域的底部
标记定义一个对话框(会话框)类似微信
2.2 多媒体标签
标签
备注
标记定义一个视屏
标记定义音频内容
标记定义媒体资源
标记定义图片
标记定义外部的可交互的内容或插件，比如flash
标签的意义：多媒体标签的出现意味着多媒体的发展以及支持不适用插件的情况下即可操作媒体文件，极大提升了用户体验。
2.3 Web应用标签
状态标签
标签
备注
实时状态显示：气压、气温。 例：30%
任务过程：安装、 加载。 例：
列表标签
标签
备注
为input标记定义一个下拉列表，配合option
标记定义一个元素的详细内容，配合summary
标签为 元素定义一个可见的标题。当用户点击标题时会显示出详细信息。
Menu
标签
备注
命令列表(目前所有的主流浏览器都不支持)
menu命令列表的标签(只有FireFox9.0+支持)
menu标记定义一个命令按钮(只有IE9支持)
2.4 其他标签
注释标签
标签
备注
标记定义注释或音标
告诉那些不支持ruby的元素的浏览器如何去显示
标记定义对rubyd 注释内容文本
其他标签
标签
备注
标记定义有标记的文本(黄色选中状态)
标记定义一些输出类型，计算表单结果配合oninput事件
标记定义表单里生成的键值(加密信息传送)
标记定义一个日期/时间，目前所有主流的浏览器都不支持
2.5 语义化标签兼容性
对于不支持HTML5语法的浏览器(如：IE8及以下版本浏览器)，要想使用这些新标签，需要那个通过JavaScript创建该标签。具体做法如下(以标签为例)：
在CSS中设置标签样式为块级
header { display: block; }通过JavaScript的DOM方式创建该标签
document.createElement('header');由于HTML5新增的标签很多， 如果用上述方法创建标签也比较麻烦，所以我们可以通过简单引用html5shiv.js文件解决这个问题。
3、多媒体
3.1 音频
3.2 视频
不同格式音视频的兼容性
对不起，您的浏览器不支持，请升级。
从上至下播放浏览器第一个可支持的视频格式。
4、表单元素
自带格式验证
类型
备注
邮箱
数字
地址
滑块
颜色
时间
......
百度
谷歌
优酷
腾讯
5、自定义属性
HTML5通过 "data-属性名" 的方式创建自定义属性。
JavaScript 通过dataset对象获取自定义属性。
注：获取dataset中的属性名需要改成驼峰式命名，如 user-sex 改为 userSex
var dv = document.getElementById('dv')
var dt = dv.dataset;
var str = ''
str = dt.name + ',' + dt.age + ',' + dt.userSex;
dv.innerText = str;执行上方代码或 点击这里 查看打印结果
6、读取文件
通过 FileReader 接口读取文件内容。
var f1 = document.querySelector('#f1');
var btn1 = document.querySelector('#btn1');
btn1.onclick = function(){
// 获取上传文件
var fl1 = f1.files[0];
// 读取文件，创建读取文件的对象
var fReader = new FileReader();
// 读取文件
fReader.readAsText(fl1);
// 开始读取文件的加载事件
fReader.onload = function() {
var style= document.createElement('style');
var result = fReader.result;
style.innerHTML = result;
document.querySelector('head').appendChild(style)
}
}新建 style.txt 文件，编辑内容：
#btn1{
width: 70px;
height: 30px;
border: none;
background-color: green;
font-size: 14px;
color: #fff;
}运行程序，上传 style.txt 文件，查看样式变化。
点击此处 快速运行
7、网络状态检测
7.1 navigator.onLine
var state = window.navigator.onLine;
// 返回布尔值，网络联通为true，反之为false
if(state){
alert('在线')
}else{
alert('离线')
}主流浏览器都支持。
7.2 document.ononline
window.οnοnline=function(){
alert('连接上了')
}
window.οnοffline=function(){
alert('断网了')
}浏览器支持情况：
事件
Chrome
IE
Firefox
Safari
Opera
ononline不支持
IE8(IE11 已废弃)
3.0
不支持
不支持
