最近在复习前端的基础知识，在这里做一个总结，这是HTML5篇。

新特性

1. 取消了过时的显示效果标记<font></font>和<center></center>…
2. 新增语义化标签
3. 新增多媒体标签（video视频,audio音频）
4. 增加更多表单类型
5. 新增canvas绘图标签
6. 增加了标签拖动、数据存储等一些API

HTML5优缺点

优点

1. 提高可用性和改进用户的友好体验；
2. 可以给网站带来更多的多媒体元素（视频和音频）；
3. 可以很好的替代FLASH和Sliverlight;
4. 当涉及到网站的抓取和索引的时候，对于SEO很友好；
5. 将被大量应用于移动应用程序和游戏；
6. 可移植性好。

缺点

该标准并未能很好的被浏览器所支持。因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。

1、删除或重定义了哪些标签

1.1 删除的标签

纯表现的元素

besefont、 big、center、 font、s、strike、tt、u

对可用性产生负面影响的元素

frame、frameset、noframes

产生混肴的元素

acronym、 applet、 isindex、dir

1.2 重定义标签

显示不变，只是表达的含义进行了重新定义的标签

2、新增了哪些标签

2.1 结构标签（块状元素）——有意义的div

2.2 多媒体标签

标签的意义：多媒体标签的出现意味着多媒体的发展以及支持不适用插件的情况下即可操作媒体文件，极大提升了用户体验。

2.3 Web应用标签

状态标签

列表标签

Menu

2.4 其他标签

注释标签

其他标签

2.5 语义化标签兼容性

对于不支持HTML5语法的浏览器（如：IE8及以下版本浏览器），要想使用这些新标签，需要那个通过JavaScript创建该标签。具体做法如下（以<header>标签为例）：

1. 在CSS中设置标签样式为块级

header { display: block; }

1. 通过JavaScript的DOM方式创建该标签

document.createElement('header');

由于HTML5新增的标签很多， 如果用上述方法创建标签也比较麻烦，所以我们可以通过简单引用html5shiv.js文件解决这个问题。

3、多媒体

3.1 音频

<audio src="" controls autoplay="autoplay" loop></audio>
<!--
controls: 在页面显示音频控件
autoplay="autoplay": 自动播放（谷歌浏览器不支持音频自动播放）
loop: 循环播放
-->

3.2 视频

<video src="" controls autoplay muted loop></video>
<!--
controls: 在页面显示音频控件
autoplay='autoplay': 自动播放（谷歌浏览器与`muted`属性同用可自动播放）
muted: 配合`autoplay`可以做到谷歌浏览器自动播放，但是，是静音状态
-->

不同格式音视频的兼容性

<video controls autoplay loop>
    <source src="1.mp4">
    <source src="1.ogg">
    对不起，您的浏览器不支持，请升级。
</video

从上至下播放浏览器第一个可支持的视频格式。

4、表单元素

自带格式验证

<form autocomplete="on" novalidate></form>
<!--
autocomplete: on表示开启智能提示；off表示关闭智能提示
novalidate: 关闭智能验证
-->

<form action="" method="get" id="fm">
  <input type="text" value="" autofocus placeholder="请输入名字" required>
  <input type="submit" value="提交">
</form>
<input type="text" name="name" form="fm">
<!--
autofocus: 自动获取焦点
placeholder: 文本框提示信息
required: 该属性出现，当前的表单元素必须有验证
form: 该属性出现在表单标签中，值设置为form标签的ID值，该标签可以提交
-->

<input type="text" value="" list="url_list">
<datalist id="url_list">
    <option value="https://www.baidu.com">百度</option>
    <option value="https://www.google.com">谷歌</option>
    <option value="https://www.youku.com">优酷</option>
    <option value="https://www.qq.com">腾讯</option>
</datalist>

查看效果

5、自定义属性

<div id="dv" data-name="名字" data-age="20" data-user-sex="男"></div>

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 接口读取文件内容。

<input type="file" id="f1">
<input type="submit" id="btn1" value="上传">

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.ononline=function(){
    alert('连接上了')
}
window.onoffline=function(){
    alert('断网了')
}

浏览器支持情况：