HTML5知识点总结（一）

最近在复习前端的基础知识，在这里做一个总结，这是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 重定义标签

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

标签	备注
b	代表内联文本，通常是粗体，没用传递表示重要的意思
i	代表内联文本，通常是斜体，没有传递表达重要的意思
dd	可以同detailsy与figure一同使用，定义包含文本，dialog亦可使用
dt	可以同details与figrue一同使用，汇总细节，dialog也可用
hr	表示主题结束，而不是水平线，虽然显示相同
menu	重新定义用户界面的菜单，配合commond或者menuitem使用
small	表示小字体，例如打印注释或则法律条款
strong	表示重要性而不是强调符号

2、新增了哪些标签

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

标签	备注
article	标记定义一篇文章
header	标记定义一个页面或一个区域的头部
nav	标记定义导航链接
section	标记定义一个区域
aisde	标记定义页面内容的侧边栏
hgroup	标记定义文件中一个区块的相关信息
figure	标记定义一组媒体内容以及他们的标题
figcaption	标记定义figure元素的标题
footer	标记定义一个页面或一个区域的底部
dialog	标记定义一个对话框（会话框）类似微信

2.2 多媒体标签

标签	备注
video	标记定义一个视屏
audio	标记定义音频内容
source	标记定义媒体资源
canvas	标记定义图片
embed	标记定义外部的可交互的内容或插件，比如flash

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

2.3 Web应用标签

状态标签

标签	备注
meter	实时状态显示：气压、气温。 例：<meter value="0.3"></meter>30%
progress	任务过程：安装、 加载。 例：<progress></progress>

列表标签

标签	备注
datalist	为input标记定义一个下拉列表，配合option
details	标记定义一个元素的详细内容，配合summary
summary	标签为<details> 元素定义一个可见的标题。当用户点击标题时会显示出详细信息。

Menu

标签	备注
menu	命令列表（目前所有的主流浏览器都不支持）
menuitem	menu命令列表的标签（只有FireFox9.0+支持）
command	menu标记定义一个命令按钮（只有IE9支持）

2.4 其他标签

注释标签

标签	备注
ruby	标记定义注释或音标
rp	告诉那些不支持ruby的元素的浏览器如何去显示
et	标记定义对rubyd 注释内容文本

其他标签

标签	备注
mark	标记定义有标记的文本（黄色选中状态）
output	标记定义一些输出类型，计算表单结果配合oninput事件
keygen	标记定义表单里生成的键值（加密信息传送）
time	标记定义一个日期/时间，目前所有主流的浏览器都不支持

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、表单元素

自带格式验证

类型	备注
<input type="email">	邮箱
<input type="number">	数字
<input type="url">	地址
<input type="range">	滑块
<input type="color">	颜色
<input type="time">	时间
......

<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('断网了')
}

浏览器支持情况：

事件	Chrome	IE	Firefox	Safari	Opera
ononline	不支持	IE8（IE11 已废弃）	3.0	不支持	不支持