HTML 5 简介
HTML5 是下一代的 HTML。
什么是HTML5？
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5是如何起步的？
HTML5 是 W3C 与WHATWG 合作的结果。
编者注：W3C 指 World Wide Web Consortium，万维网联盟。
编者注：WHATWG指 Web Hypertext Application Technology Working Group。
WHATWG致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
为 HTML5建立的一些规则：
· 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
· 减少对外部插件的需求（比如 Flash）
· 更优秀的错误处理
· 更多取代脚本的标记
· HTML5 应该独立于设备
· 开发进程应对公众透明
新特性
HTML5 中的一些有趣的新特性：
· 用于绘画的 canvas 元素
· 用于媒介回放的 video 和 audio 元素
· 对本地离线存储的更好的支持
· 新的特殊内容元素，比如 article、footer、header、nav、section
· 新的表单控件，比如 calendar、date、time、email、url、search
浏览器支持
最新版本的Safari、Chrome、Firefox 以及 Opera支持某些 HTML5 特性。InternetExplorer 9 将支持某些 HTML5 特性。
HTML 5视频
HTML 5 Video + DOM
HTML5<video> - 使用 DOM 进行控制
HTML5<video> 元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
下例中简单的方法，向我们演示了如何使用<video> 元素，读取并设置属性，以及如何调用方法。
实例
为视频创建简单的播放/暂停以及调整尺寸控件：
播放/暂停大中小
Yourbrowser does not support HTML5 video.
上面的例子调用了两个方法：play()和 pause()。它同时使用了两个属性：paused和 width。
HTML5<video> - 方法、属性以及事件
下面列出了大多数浏览器支持的视频方法、属性和事件：
| 方法 | 属性 | 事件 |
| 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 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
HTML 5 拖放
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持
InternetExplorer 9、Firefox、Opera 12、Chrome以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。
HTML5拖放实例
下面的例子是一个简单的拖放实例：
实例
<!DOCTYPE HTML>
<html>
<head>
<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>
<div id="div1"οndrοp="drop(event)"
οndragοver="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif"draggable="true"
οndragstart="drag(event)" width="336"height="69" />
</body>
</html>
它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。
设置元素为可拖放
首先，为了使元素可拖动，把draggable 属性设置为 true ：
<img draggable="true" />
拖动什么 -ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData()方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是"Text"，值是可拖动元素的 id("drag1")。
放到何处 -ondragover
ondragover事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用ondragover 事件的 event.preventDefault()方法：
event.preventDefault()
进行放置 -ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释：
· 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
· 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在setData() 方法中设置为相同类型的任何数据。
· 被拖数据是被拖元素的 id ("drag1")
· 把被拖元素追加到放置元素（目标元素）中
HTML 5 Canvas
HTML5 内联 SVG
Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVGDOM 中的每个元素都是可用的。您可以为某个元素附加JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas通过 JavaScript 来绘制 2D 图形。
Canvas是逐像素进行渲染的。
在canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas与 SVG 的比较
下表列出了canvas 与 SVG 之间的一些不同之处。
Canvas
· 依赖分辨率
· 不支持事件处理器
· 弱的文本渲染能力
· 能够以 .png 或 .jpg 格式保存结果图像
· 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
· 不依赖分辨率
· 支持事件处理器
· 最适合带有大型渲染区域的应用程序（比如谷歌地图）
· 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
· 不适合游戏应用
HTML 5 Web 存储
在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法：
· localStorage - 没有时间限制的数据存储
· sessionStorage - 针对一个 session 的数据存储
之前，这些都是由cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
localStorage方法
localStorage方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如何创建和访问localStorage：
实例
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
下面的例子对用户访问页面的次数进行计数：
实例
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount)+1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
sessionStorage方法
sessionStorage方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个sessionStorage：
实例
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
下面的例子对用户在当前session 中访问页面的次数进行计数：
实例
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) thissession.");
</script>
HTML 5 应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存（Application Cache）？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
· 离线浏览 - 用户可在应用离线时使用它们
· 速度 - 已缓存资源加载得更快
· 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
浏览器支持
所有主流浏览器均支持应用程序缓存，除了Internet Explorer。
HTML5Cache Manifest 实例
下面的例子展示了带有 cachemanifest 的 HTML 文档（供离线浏览）：
实例
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
CacheManifest 基础
如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每个指定了manifest 的页面在用户对其访问时都会被缓存。如果未指定manifest 属性，则页面不会被缓存（除非在manifest 文件中直接指定了该页面）。
manifest文件的建议的文件扩展名是：".appcache"。
请注意，manifest文件需要配置正确的 MIME-type，即"text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest文件
manifest文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest文件可分为三个部分：
· CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
· NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
· FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
第一行，CACHEMANIFEST，是必需的：
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
NETWORK
下面的NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的：
NETWORK:
login.asp
可以使用星号来指示所有其他其他资源/文件都需要因特网连接：
NETWORK:
*
FALLBACK
下面的FALLBACK 小节规定如果无法建立因特网连接，则用"offline.html" 替代/html5/ 目录中的所有文件：
FALLBACK:
/html5/ /404.html
注释：第一个 URI 是资源，第二个是替补。
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
· 用户清空浏览器缓存
· manifest 文件被修改（参阅下面的提示）
· 由程序来更新应用缓存
实例 - 完整的Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
关于应用程序缓存的注释
请留心缓存的内容。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新manifest 文件。
注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
HTML 5 Web Workers
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
什么是 WebWorker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
webworker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 webworker 在后台运行。
浏览器支持
所有主流浏览器均支持 webworker，除了 Internet Explorer。
HTML5Web Workers 实例
下面的例子创建了一个简单的 webworker，在后台计数：
计数：
启动Worker 停止 Worker
检测 WebWorker 支持
在创建 webworker 之前，请检测用户的浏览器是否支持它：
if(typeof(Worker)!=="undefined")
{
// Yes! Webworker support!
// Some code.....
}
else
{
// Sorry! No WebWorker support..
}
创建 webworker 文件
现在，让我们在一个外部JavaScript 中创建我们的 web worker。
在这里，我们创建了计数脚本。该脚本存储于"demo_workers.js" 文件中：
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。
注释：webworker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
创建 WebWorker 对象
我们已经有了 webworker 文件，现在我们需要从 HTML 页面调用它。
下面的代码检测是否存在worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行"demo_workers.js" 中的代码：
if(typeof(w)=="undefined")
{
w=newWorker("demo_workers.js");
}
然后我们就可以从 webworker 发生和接收消息了。
向 webworker 添加一个 "onmessage" 事件监听器：
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
当 webworker 传递消息时，会执行事件监听器中的代码。event.data中存有来自 event.data 的数据。
终止 WebWorker
当我们创建 webworker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。
如需终止 webworker，并释放浏览器/计算机资源，请使用 terminate() 方法：
w.terminate();
完整的 WebWorker 实例代码
我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：
实例
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <outputid="result"></output></p>
<button οnclick="startWorker()">StartWorker</button>
<button οnclick="stopWorker()">StopWorker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=newWorker("demo_workers.js");
}
w.onmessage =function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry,your browser
does not supportWeb Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
WebWorkers 和 DOM
由于 webworker 位于外部文件中，它们无法访问下例JavaScript 对象：
· window 对象
· document 对象
· parent 对象
HTML 5 服务器发送事件
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent事件 - 单向消息传递
Server-Sent事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter更新、估价更新、新的博文、赛事结果等。
浏览器支持
所有主流浏览器均支持服务器发送事件，除了Internet Explorer。
接收Server-Sent 事件通知
EventSource对象用于接收服务器发送事件通知：
实例
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data +"<br />";
};
例子解释：
· 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是"demo_sse.php"）
· 每接收到一次更新，就会发生 onmessage 事件
· 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中
检测Server-Sent 事件支持
在上面的 TIY 实例中，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：
if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
//Some code.....
}
else
{
// Sorry! No server-sent events support..
}
服务器端代码实例
为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。
服务器端事件流的语法是非常简单的。把"Content-Type" 报头设置为"text/event-stream"。现在，您可以开始发送事件流了。
PHP 代码(demo_sse.php)：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
ASP 代码 (VB)(demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
代码解释：
· 把报头 "Content-Type" 设置为"text/event-stream"
· 规定不对页面进行缓存
· 输出发送日期（始终以 "data: " 开头）
· 向网页刷新输出数据
EventSource对象
在上面的例子中，我们使用onmessage 事件来获取消息。不过还可以使用其他事件：
| 事件 | 描述 |
| onopen | 当通往服务器的连接被打开 |
| onmessage | 当接收到消息 |
| onerror | 当错误发生 |
扫一扫
7036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
