H5新增特性总结

在很多的面试题中，我们都会看到有H5新增样式属性的选项，那么H5究竟增加了哪些新属性呢？

总的来说H5比H4多了10部分内容新特性，但其暂不支持IE8及IE8以下版本的浏览器

语义标签
H5新定义的语义标签，可以方便开发者清晰构建页面的布局

标签	描述
header	定义了文档的头部区域
footer	定义了文档的尾部区域
nav	定义文档的导航
section	定义文档的节
article	定义文章
aside	定义页面以外的内容
details	定义用户可以看到或者隐藏的额外细节
summary	标签包含details元素的标题
dialog	定义对话框
figure	定义自包含内容，如图表
main	定义文档主内容
mark	定义文档主内容
time	定义日期/时间

增强型表单
添加了一些新的input输入特性，更好的改善了输入的控制和验证

输入类型	描述
color	主要用于选取颜色
date	选取日期
datetime	选取日期(UTC时间)
datetime-local	选取日期（无时区）
month	选择一个月份
week	选择周和年
time	选择一个时间
email	包含e-mail地址的输入域
number	数值的输入域
url	url地址的输入域
tel	定义输入电话号码和字段
search	用于搜索域
range	一个范围内数字值的输入域

新增表单元素

标签	描述
datalist	用户会在他们输入数据时看到域定义选项的下拉列表
progress	进度条，展示连接/下载进度
meter	刻度值，用于某些计量，例如温度、重量等
keygen	提供一种验证用户的可靠方法,生成一个公钥和私钥
output	用于不同类型的输出

新增表单属性

属性	描述
placehoder	输入框默认提示文字
required	要求输入的内容是否可为空
pattern	描述一个正则表达式验证输入的值
min/max	设置元素最小/最大值
step	为输入域规定合法的数字间隔
height/wdith	用于image类型input标签图像高度/宽度
autofocus	规定在页面加载时，域自动获得焦点
multiple	规定input元素中可选择多个值

音频和视频
音频：

<audio controls>    //controls属性提供添加播放、暂停和音量控件。
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。        //浏览器不支持时显示文字
</audio>

视频：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

Canvas绘图
https://www.runoob.com/w3cnote/html5-canvas-intro.html

SVG绘图
什么是SVG?

• SVG指可伸缩矢量图形
• SVG用于定义用于网络的基于矢量的图形
• SVG使用XML格式定义图形
• SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG是万维网联盟的标准

Canvas和SVG的区别

地理定位

使用getCurrentPosition()方法来获取用户的位置。以实现“LBS服务”

拖放API

拖放是一种常见的特性，即捉取对象以后拖到另一个位置。在html5中，拖放是标准的一部分，任何元素都能够拖放。

<div draggable="true" ondragstart="drag(event)"></div>
<script>
function drap(ev){
    console.log(ev);
}
</script>

Web Worker

Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新县城之间数据交换的接口：postMessage、onmessage。

Web Storage

WebStorage是HTML新增的本地存储解决方案之一，但并不是取代cookie而指定的标准，cookie作为HTTP协议的一部分用来处理客户端和服务器的通信是不可或缺的，session正式依赖与实现的客户端状态保持。WebSorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。

websorage拥有5M的存储容量，而cookie却只有4K，这是完全不能比的。

WebSocket

WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。

特点：

（1）握手阶段采用HTTP协议，默认端口是80和443

（2）建立在TCP协议基础之上，和http协议同属于应用层

（3）可以发送文本，也可以发送二进制数据。

（4）没有同源限制，客户端可以与任意服务器通信。

（5）协议标识符是ws（如果加密，为wss），如ws://localhost:8023

本文参考链接
https://www.cnblogs.com/binguo666/p/10928907.html