HTML5 有关学习及整理
日期：2014-05-17 浏览次数：20625 次
1.前言
HTML5从2004年提出，到2007年被W3C所接纳并成立了新的HTML团队，再到2008年1月第一份正式草案的发布，已经有相当长的一段时间。但是其仍然还在继续发展、完善中，估计还需要十年左右的时间才能成为W3C真正的标准。目前Firefox、Chrome浏览器、Opera、Safari（版本4以上）、Internet
Explorer 9已支持HTML5技术。
2.正文
HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。目标是取代1999年所制定的HTML 4.01和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如AdobeFlash、MicrosoftSilverlight，与OracleJavaFX的需求，并且提供更多能有效增强网络应用的标准集。
具体来说，HTML5添加了许多新的语法特征，其中包括<video>, <audio>, 和<canvas>元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素包括<section>, <article>, <header>, 和<nav>,是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素，像<a>,<cite>和<menu>被修改，重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。
新的API接口：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 客户端的Web存储
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
<script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除
<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>
- 对本地离线存储的更好的支持
如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
- Web Workers 后台JS运行脚步技术
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
- Server-Sent 事件-单向消息传
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
HTML语法的变化
