html5的新特性包括哪些,html5的新特性有哪些？html5新特性的总结

我们都应该谁知道html5是html的第五次重大修改，那么，既然是重大修改，肯定会有新增的特性，所以，html5的新增特性有哪些呢？接下来这篇文章讲给大家来总结一下html5的新特性。

首先对于html5是什么意思我们都应该知道，若是不太了解html5，那么你可以看一看这篇文章：html5是什么？html5有什么用？，好了，在知道了html5的具体定义后，我们就来看一看html5的新特性有哪些吧。

html5的新特性有哪些？

一、html5新特性之用于绘画的canvas元素

canvas 元素用于在网页上绘制图形，画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。Your browser does not support the canvas element.

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);

下面来说一下关于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 也新增以下表单元素：

：元素规定输入域的选项列表，使用 元素的 list 属性与 元素的 id 绑定。

：提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。

：用于不同类型的输出，比如计算或脚本输出。

HTML5 新增的表单属性：

placehoder 属性：简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。

required 属性：是一个 boolean 属性。要求填写的输入域不能为空

pattern 属性：描述了一个正则表达式用于验证 元素的值。

min 和 max 属性：设置元素最小值与最大值。

step 属性：为输入域规定合法的数字间隔。

height 和 width 属性：用于 image 类型的 标签的图像高度和宽度。

autofocus 属性：是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。

multiple 属性：是一个 boolean 属性。规定 元素中可选择多个值。

三、html5新特性之用于媒介的video和audio元素

1、html5提供了播放音频文件的标准，即使用元素

实例：

您的浏览器不支持 audio 元素。

说明：

(1)control 属性供添加播放、暂停和音量控件。

(2)在 与 之间你需要插入浏览器不支持的元素的提示文本 。

(3) 元素允许使用多个 元素. 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

(4)元素支持三种音频格式文件: MP3, Wav, 和 Ogg。

2、html5提供了一种通过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拖放

下面给出一个实例：

#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}

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));

}

请把图片拖放到矩形中：

六：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视频教程。

相关推荐：