html5中新增了哪些新特性
小编给大家分享一下html5中新增了哪些新特性，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
专注于为中小企业提供网站设计制作 、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业定陶免费做网站 提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
html5的新特性：1、用于绘画的canvas元素；2、用于媒介回放的video和audio元素；3、对本地离线存储的更好的支持；4、新的特殊内容元素，比如article、header、nav等；5、新的表单控件，比如date、time等。
一、HTML5概念：
1、什么是HTML5：
（1）HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准；
（2）HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
2、HTML5的起步：
（1）HTML5 是 W3C（World Wide Web Consortium，万维网联盟） 与 WHATWG 合作的结果
（2）为 HTML5 建立的一些规则：
a.新特性应该基于 HTML、CSS、DOM 以及 JavaScript
b.减少对外部插件的需求（比如 Flash）
c.更优秀的错误处理
d.更多取代脚本的标记
e.HTML5 应该独立于设备
f.开发进程应对公众透明
3、新特性：
（1）用于绘画的 canvas 元素
（2）用于媒介回放的 video 和 audio 元素
（3）对本地离线存储的更好的支持
（4）新的特殊内容元素，比如 article、footer、header、nav、section
（5）新的表单控件，比如 calendar、date、time、email、url、search
二、HTML5视频：
1、Web 上的视频：
（1）大多数视频是通过插件（比如 Flash）来显示的，然而，并非所有浏览器都拥有同样的插件
（2）HTML5 规定了一种通过 video 元素来包含视频的标准方法
2、视频格式：
（1）Ogg格式：
带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
（2）MPEG4格式：
带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
（3）WebM格式：
带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
3.如何工作：
（1）示例代码：
... （2）controls 属性供添加播放、暂停和音量控件，可加入宽度和高度， 与 之间插入的内容是供不支持 video 元素的浏览器显示的
（3）video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
Your browser does not support the video tag.
4.各浏览器对不同格式的支持情况：
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
5. 标签的属性：
属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮
height pixels 设置视频播放器的高度
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性
src url 要播放的视频的 URL
width pixels 设置视频播放器的宽度
三、HTML 5 Video + DOM：
1、使用 DOM 进行控制：
（1）HTML5 元素同样拥有方法、属性和事件；
（2）方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说， 元素开始播放、已暂停，已停止，等等
2.方法、属性以及事件：
方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration timeupdate
ended ended
error abort
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width
在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用
四.HTML5 音频:
1、Web 上的音频:
（1）大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件
（2）HTML5 规定了一种通过 audio 元素来包含音频的标准方法
（3）audio 元素能够播放声音文件或者音频流
2.audio 元素支持的三种音频格式：
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √
3.如何工作：
（1）示例代码：
（2）control 属性供添加播放、暂停和音量控件， 与 之间插入的内容是供不支持 audio 元素的浏览器显示的
（3）audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：
Your browser does not support the audio tag.
（4） 标签的属性：
属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮
loop loop 如果出现该属性，则每当音频结束时重新开始播放
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性
src url 要播放的音频的 URL
五.HTML5 拖放：
1.拖放（Drag 和 drop）是 HTML5 标准的组成部分：
（1）拖放是一种常见的特性，即抓取对象以后拖到另一个位置
（2）在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
2.拖动相关设置：
（1）设置元素为可拖放：
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
（2）规定拖动元素：
ondragstart 和 setData()
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
} 数据类型是 “Text”，值是可拖动元素的 id (“drag1”)
（3）放到何处 - ondragover：
ondragover 事件规定在何处放置被拖动的数据；
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault() （4）进行放置 - ondrop：
当放置被拖数据时，会发生 drop 事件；
ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
} （5）注意点：
a.调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
b.通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
c.被拖数据是被拖元素的 id (“drag1”)
d.把被拖元素追加到放置元素（目标元素）中
3.拖动示例代码：
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));
}
六.Canvas：
1.什么是Canvas：
（1）HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像
（2）画布是一个矩形区域，您可以控制其每一像素
（3）canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
2.创建canvas元素：
示例代码：
3. 通过 JavaScript 来绘制：
（1）canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 （2）使用 id 来寻找 canvas 元素，然后，创建 context 对象，然后进行绘制
（3）fillRect 方法拥有参数 (0,0,150,75)：
在画布上绘制 150x75 的矩形，从左上角开始 (0,0)
（4）可以通过canvas绘制出点、线条、圆、渐变背景、图像
七.内联 SVG：
1.什么是SVG:
（1）SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
（2）SVG 用于定义用于网络的基于矢量的图形
（3）SVG 使用 XML 格式定义图形
（4）SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
（5）SVG 是万维网联盟的标准
2.SVG 的优势：
（1）SVG 图像可通过文本编辑器来创建和修改
（2）SVG 图像可被搜索、索引、脚本化或压缩
（3）SVG 是可伸缩的
（4）SVG 图像可在任何的分辨率下被高质量地打印
（5）SVG 可在图像质量不下降的情况下被放大
3.把 SVG 直接嵌入 HTML 页面：
八.Canvas vs SVG：
1.SVG：
（1）SVG 是一种使用 XML 描述 2D 图形的语言
（2）SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器
（3）在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形
2.Canvas：
（1）Canvas 通过 JavaScript 来绘制 2D 图形
（2）Canvas 是逐像素进行渲染的。
（3）在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象
3.Canvas 与 SVG 的比较：
（1）Canvas：
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
（2）SVG：
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
九.地理定位：
1.定位用户的位置：
（1）HTML5 Geolocation API 用于获得用户的地理位置
（2）鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的
2.使用地理定位：
（1）使用 getCurrentPosition() 方法来获得用户的位置
（2）返回用户位置的经度和纬度的代码示例：
（3）示例代码解释：
检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度
3.处理错误和拒绝：
（1）getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数
（2）示例代码：
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
} （3）错误代码：
Permission denied - 用户不允许地理定位
Position unavailable - 无法获取当前位置
Timeout - 操作超时
4.在地图中显示结果：
（1）如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图
（2）示例代码：
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML=" 5.getCurrentPosition() 方法 - 返回数据：
（1）若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性
（2）属性：
属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间 6.Geolocation 对象 - 其他有趣的方法：
（1）watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）
（2）clearWatch() - 停止 watchPosition() 方法
十. Web 存储：
1.在客户端存储数据：
（1）HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
（2）之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器 的请求来传递，这使得 cookie 速度很慢而且效率也不高
（3）在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能
（4）对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据
（5）HTML5 使用 JavaScript 来存储和访问数据
2.localStorage 方法：
（1）localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用
（2）如何创建和访问 localStorage：
localStorage.lastname="Smith";
document.write(localStorage.lastname);
（3）对用户访问页面的次数进行计数的例子：
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
3.sessionStorage 方法：
（1）sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除
（2）如何创建并访问一个 sessionStorage：
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
（3）对用户在当前 session 中访问页面的次数进行计数的例子：
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
十一.HTML 5 应用程序缓存：
1.什么是应用程序缓存：
（1）HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问
（2）应用程序缓存为应用带来三个优势：
a.离线浏览 - 用户可在应用离线时使用它们
b.速度 - 已缓存资源加载得更快
c.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
（3）使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本
2.HTML5 Cache Manifest 实例:
带有 cache manifest 的 HTML 文档（供离线浏览）的示例：
The content of the document......
