HTML5的新特性概述

html5作为html的代替者，成为新的标准，而且时至今日，在前端开发中，已经被大家广泛应用，但是对于html5有哪些具体功能和特性，可能没有怎么去总结。下面是我总结的一些h5的新特性，供大家参考：
1. 语义化标签
html标签是我们开发前端界面的骨架，但是以前我们使用html标签布局使用的都是div标签，div标签的语义非常的不清晰，因此html5为了规范这一块，给出了一系列的标签：

<hrader></header> 头部区域标签，块级标签
<footer></footer> 底部区域标签，块级标签
<nav></nav> 导航区域标签，块级标签
<time></time> 时间区域标签，内联标签
<article></article> 文章段落标签，块级标签
<aside></aside> 侧边栏区域标签，块级标签
<mark></mark> 标记记号标签，内联标签
<summary></summary> 单词翻译: 摘要，h5官方文档描述：定义 details 元素的标题，块级标签
<detailes></detailes> 单词翻译：细节，h5官方文档描述：定义元素的细节，块级标签
<section></section> 单词翻译：部分，h5官方文档描述：定义 section，块级标签

2. 新表单类型
我这里描述的表单，主要指的，表单标签本身已经有不少类型了，但是h5为了满足开发需求，同样还新增了不少的类型：

<input type="email" /> e-mail 地址的输入域
<input type="number" /> 数字输入域
<input type="url" /> URL 地址的输入域
<input type="range" /> range 类型显示为滑动条，默认value值是1~100的限定范围，可以通过min属性和max属性自定义范围<input type="range" name="points" min="1" max="10" />
<input type="search" /> 用于搜索域
<input type="color" /> 用于定义选择颜色
<input type="tel" /> 电话号码输入域
<input type="date" /> date类型为时间选择器

HTML5 新增的表单属性

placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required属性，是一个 boolean 属性。要求填写的输入域不能为空 pattern 属性，描述了一个正则表达式用于验证 元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于image 类型的 标签的图像高度和宽度。
autofocus 属性，是一个 boolean属性。规定在页面加载时，域自动地获得焦点。
multiple 属性 ，是一个 boolean 属性。规定 元素中可选择多个值。

3. 视频和音频
视频和音频，它们的功能类似于标签，标签引用的是图片，它们引用的是视频文件和音频文件。

<audio src="audio/putclub.com_Googlewasjusta.mp3" id="audio"></audio>
<button id="start-music">开始播放</button>
<button id="stop-music">暂停播放</button>
var startMusic = document.getElementById('start-music');
var stopMusic = document.getElementById('stop-music');
startMusic.onclick = function () {  //开始播放
        var audioEl = document.getElementById('audio');
        audioEl.play()
    }
stopMusic. onclick = function () {  // 暂停播放
        var audioEl = document.getElementById('audio');
        audioEl.pause()
    }

目前支持的音频格式有: MP3, Wav, 和 Ogg。

<video width="600" height="400" id="video" controls="controls">
    <source src="video/jieda2.mp4" type="audio/mp4"></source>
</video>
<button id="start-tv">视频开始播放</button>
<button id="stop-tv">暂停视频播放</button>
 
var startTv = document.getElementById('start-tv');
var stopTv = document.getElementById('stop-tv');
startTv.onclick = function () {
        var video = document.getElementById('video');
        video.play();
    }
stopTv.onclick = function () {
        var video = document.getElementById('video');
        video.pause();
}

视频和音频常用的几个方法有：

play() 开始播放音频/视频 pause() 暂停当前播放的音频/视频 load() 重新加载音频/视频元素

视频和音频常用的属性有：

controls 属性设置或返回音频/视频是否显示控件（比如播放/暂停等）
defaultPlaybackRate属性设置或返回音频/视频的默认播放速度
duration 属性返回当前音频/视频的长度（以秒计）
ended属性返回音频/视频的播放是否已结束
loop 属性设置或返回音频/视频是否应在结束时重新播放
muted 属性设置或返回音频/视频是否静音
networkState 属性返回音频/视频的当前网络状态
src 属性设置或返回音频/视频元素的当前来源
volume属性设置或返回音频/视频的音量
readyState 属性返回音频/视频当前的就绪状态
played 返回表示音频/视频已播放部分的TimeRanges 对象

4. Canvas绘图
canvas 元素用于在网页上绘制图形,canvas标签本身只是个图型容器，需要使用javaScript脚本来绘制图形。
5. SVG
SVG是指可伸缩的矢量图形，SVG 也是一种使用 XML 描述 2D 图形的语言。由于SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
6. 拖放（Drag 和 drop）
拖放是html5提供一个新的特性，这个特性增加了拖拽事件的api,和定义可以拖拽的属性。举个例子，在h5之前实现拖拽功能，其实用的是一种模拟方式，鼠标onmousedown时，获取当前的一些信息，然后在onmousemove时不断更新推拽对象的left和top值，最后在onmouseup时对推拽对象彻底赋值，并进行释放后一系列的程序操作。
7. 地理定位
地理定位这个特性，故名思意，就是获取用户位置信息的。通过getCurrentPosition()获取一系列定位信息，getCurrentPosition()有两个回调函数参数，获取地理位置成功的回调和失败的回调。
8. 离线存储
HTML5，通过创建 cache manifest 文件，可以创建 web 应用的离线版本。
如果说离线存储是对web的资源文件存储，那么web 存储就是对应用程序里的数据做存储了。web存储提供了两个存储方式:
（1）localStorage,没有时间限制的数据存储
（2）sessionStorage,就是网页还没有关闭的情况下的存储，网页窗口关闭，则数据销毁。
在之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
注意：localStorage和sessionStorage存储的数据都是字符串类型的数据，取出来的数据也是字符串类型，因此如果存储的对象不是字符串，则要转换成字符串数据类型
9. WebSocket
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
10.Web Workers
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。