HTML5
什么是HTML5 ？
HTML5 约等于 HTML + CSS 3 +Javascript + API
HTML5是一个新的网络标准，现仍处于发展阶段。目标是取代现有的HTML 4.01和XHTML 1.0 标准。它希望能够减少互联网富应用（RIA）对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API.
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML5 是 W3C 与 WHATWG 合作的结果。
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
为 HTML5 建立的一些规则：
- 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
- 减少对外部插件的需求（比如 Flash）
- 更优秀的错误处理
- 更多取代脚本的标记
- HTML5 应该独立于设备
- 开发进程应对公众透明
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 时间表
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5的八大新特性
语义：
语义化的标签：
HTML5 引入了新的HTML 元素，通过使用这些元素，开发者可以更细致的描述文档结构，让文档更加易读，搜索引擎也能更好的理解页面各个部分间的关系，我们也可以搜索到更快，更准确的信息。
十个常用的新标签：
<article> 定义文章
<!DOCTYPE html>
<html>
<body>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
</body>
</html>
<aside> 定义文章的侧边栏
<figure> 一组媒体对象以及文字
<header>定义页眉
<hgroup>定义对网页标题的组合
<nav>定义导航
<figcaption> 定义figure 的标题
<footer>定义页脚
<section> 定义文档中的区段
<time>定义日期和时间
被弃用的标签：<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<s>、<isindex>、<noframes>、<frameset> 、<strike>、<tt>、<u>和<xmp>。
增强的表单控件：
离线存储：
Web 存储：
HTML5 提供了两种在客户端存储数据的新方法：
localStorage-用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期。
sessionStorage -用于存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，当会话结束后数据也随之销毁。
localStorage.length;
localStorage.key(index);
localStorage.setItem('foo', 'bar');
localStorage.getItem('foo');
localStorage.removeItem('foo');
localStorage.clear();
以前，这些都是由Cookie 完成的。但是Cookie 有4KB的大小限制，而且会随HTTP请求一起被传递，无形中拖慢网页速度而且效率不高。
Indexed Database:
对于存储少量的数据，Web Storage能够很好的完成任务，但是对大量的结构化数据进行处理时，它就力所不及了，而这正是indexedDB的应用所在。
IndexedDB严格遵循W3C的同源策略，每个源都拥有独立的存储空间，每个存储空间内又可以创建多个数据库，每个数据库可以包含多个表，每个表都是一个json对象列表，可以存储多个json对象，比如{"name": "sonic", "age": 27}。
同源策略
同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指，域名，协议，端口相同。
当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一
脚本时候会检查这个是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
Application Cache
使用Application Cache，你可以指定哪一个文件是浏览器缓存保留的并提供给用户离线使用。这时候你的的网站工作起来就像是线上一样，并且他们不会感觉到和真正在线使用有任何差异。
那么，哪一部分文件是浏览器要保存的呢？这一切都定义在缓存清单文件中。
什么是应用程序缓存（Application Cache）？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
设备通用：
拖拽与拖放(Drag & Drop) 与文件处理(File API)
过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的鼠标事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，不停的修改元素的位置，代码要堆很多，而且性能也很差，现在有了HTML5原生的Drag & Drop 拖拽事件，再结合FileAPI 中的FileReader，一切变得so easy~
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
连接：
WebSockets
现在，很多网站为了实现即时通讯，所用的技术都是轮询。这种模式需要浏览器不断的向服务器发出请求，然而HTTP请求header信息是非常长的，这样会占用很多的带宽和服务器资。WebSockets是在一个(TCP)接口进行双向通信的技术，SH技术类型能更好的节省服务器资源和带宽并达到实时通。
在WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
多媒体：
音频和视频(Audio + Video)
音频和视频(Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。
当前，video 元素支持三种视频格式：
ogg 适用于Firefox、Opera 以及 Chrome 浏览器。
MPEG 4 要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型
WebM
<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
</body>
</html>
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式.
HTML5 <video> - 使用 DOM 进行控制
Web 上的音频
直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。
| IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
|---|---|---|---|---|---|
| Ogg Vorbis | √ | √ | √ | ||
| MP3 | √ | √ | √ | ||
| Wav | √ | √ | √ |
source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg">
三维、图形与特效
Canvas 画布元素
传统的网页，总是使用GIF或者JPGE来显示图像，这种图形是需要事先画好的“静态”的图像。而Canvas，则是用Javascript的一种绘图手段。
可以用它来画图、合成图像、或者做简单的（和不那么简单的）动画。
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<!DOCTYPE HTML>
<html><body>
<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");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
<!--var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);-->
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> svg </title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
</body>
</html>
Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
性能与集成
XMLHttpRequest
作为XMLHttpRequest的改进版，XMLHttpRequest Level 2在功能上有了很大的改进。支持跨源LMLHttpRequest和进度事件（Progress events）。
更多
Geolocation ——获取浏览器用户的地理信息
postMessage ——实现跨文档跨域的消息传输
Web Workers ——Javascript多线程工作解决方案
Custom data-* attributes——定义合法的DOM属性
And so on …
示例：
http://onecm.com/projects/canopy/
http://mrdoob.com/projects/chromeexperiments/ball_pool/
http://experiments.instrum3nt.com/markmahoney/ball/parent.html
http://www.canvasdemos.com/2009/04/03/colorscube/
http://internetris.net/
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
