所属分类：web前端开发
首先对于html5是什么意思我们都应该知道，若是不太了解html5，那么你可以看一看这篇文章：html5是什么？html5有什么用？，好了，在知道了html5的具体定义后，我们就来看一看html5的新特性有哪些吧。
html5的新特性有哪些？
一、html5新特性之用于绘画的canvas元素
canvas 元素用于在网页上绘制图形，画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
微博登录
QQ登录<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>
登录后复制<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script>登录后复制下面来说一下关于svg的内容：svg是用于描述二维矢量图形的一种图形格式。
svg有三种用法：
把svg直接当成图片放在网页上。
svg实现动画。
svg图片的交互和滤镜效果。
说明：
（1）Canvas 通过 JavaScript 来绘制 2D 图形。
（2）Canvas 是逐像素进行渲染的。
（3）在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包 括任何或许已被图形覆盖的对象。
（4）svg是一种使用 XML 描述 2D 图形的语言。
（5）svg基于XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
（6）在svg中，每个被绘制的图形均被视为对象。如果svg对象的属性发生变化，那么浏览器能够自动重现图形。
更多关于canvas和svg的内容可以参考：HTML5 canvas和HTML5 内联SVG
二、html5新特性之更加丰富强大的表单
html5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
html5 也新增以下表单元素：
<datalist>：元素规定输入域的选项列表，使用 <input> 元素的 list 属性与 <datalist> 元素的 id 绑定。
<keygen>：提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。
<output>：用于不同类型的输出，比如计算或脚本输出。
HTML5 新增的表单属性：
placehoder 属性：简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性：是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性：描述了一个正则表达式用于验证<input> 元素的值。
min 和 max 属性：设置元素最小值与最大值。
step 属性：为输入域规定合法的数字间隔。
height 和 width 属性：用于 image 类型的 <input> 标签的图像高度和宽度。
autofocus 属性：是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性：是一个 boolean 属性。规定<input> 元素中可选择多个值。
三、html5新特性之用于媒介的video和audio元素
1、html5提供了播放音频文件的标准，即使用<audio>元素
实例：<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
登录后复制说明：
（1）control 属性供添加播放、暂停和音量控件。
（2）在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
（3）<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
（4）<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg。
2、html5提供了一种通过video元素来包含视频的标准方法。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
登录后复制说明：
（1）control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停，如 play() 和 pause() 方法。
（2）video元素提供了width和height属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
（3）标签之间插入的内容是提供给不支持video元素的浏览器显示的。
（4）video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）。
四、html5新特性之html5地理定位
HTML5 Geolocation（地理定位）用于定位用户的位置。
window.navigator.geolocation {
getCurrentPosition: fn 用于获取当前的位置数据
watchPosition: fn 监视用户位置的改变
clearWatch: fn 清除定位监视
} 登录后复制获取用户定位信息：
navigator.geolocation.getCurrentPosition(
function(pos){
console.log('用户定位数据获取成功')
//console.log(arguments);
console.log('定位时间：',pos.timestamp)
console.log('经度：',pos.coords.longitude)
console.log('纬度：',pos.coords.latitude)
console.log('海拔：',pos.coords.altitude)
console.log('速度：',pos.coords.speed)
}, //定位成功的回调
function(err){
console.log('用户定位数据获取失败')
//console.log(arguments);
} //定位失败的回调
)登录后复制五、html5新特性之html5拖放
拖放（Drag 和 drop）是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放；拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。
想要了解更多拖放中的内容可以参考：HTML拖放
下面给出一个实例：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把图片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/xxx.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html>登录后复制六：html5新特性之html5 Web存储
在客户端存储数据：
html5 提供了两种在客户端存储数据的新方法：
（1）localStorage - 没有时间限制的数据存储：localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
（2）sessionStorage - 针对一个 session 的数据存储：sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
七、html5新特性之html5应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存（Application Cache）？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
（1）离线浏览 - 用户可在应用离线时使用它们
（2）速度 - 已缓存资源加载得更快
（3）减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
八、html5新特性之html5 Web Workers
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
九、html5新特性之html5服务器发送事件
html5服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
十、html5新特性之html5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
关于后面这几个特性的更多内容大家可以去看一看：HTML5 完整版手册
以上就是给大家总结的十个html5的新特性，当然了，如果想更深入的学习html5，这里给大家推荐关于html5视频教程。
相关推荐：
HTML5新特性dataset的使用方法
HTML5 中的一些有趣的新特性
以上就是html5的新特性有哪些？html5新特性的总结的详细内容，更多请关注zzsucai.com其它相关文章！
