一、HTML版本历史

1993年06月超文本标记语言（第一版）
1995年11月HTML 2.0(RFC 1866)
1996年01月HTML 3.2，W3C推荐标准
1997年12月HTML 4.0，W3C推荐标准(1999年12月，发布HTML 4.01，也是W3C推荐标准)
2000年1月XHTML 1.0，W3C推荐标准
2000年05月ISO HTML，是国际标准化组织(ISO)和国际电工委员会(IEC)标准
2010年01月HTML 5.0公共草案，已被W3C采纳，HTML5的正式标准发布希望今生能够看到。
注：以上标准版本并不完整，主要是因为HTML规范版本的修正混乱及普及效果差强人意，所以造就今天群魔乱舞一般的兼容效果。WEB前端开发人员花费太多的精力在兼容性调整和测试上。
 

二、HTML 5的新特性

简洁的DOCTYPE：
HTML5 只有一个简单的文档类型：<!DOCTYPE html>。它不使用版本，因此该文档类型适用所有版本的HTML。
简单易记的语言标签：
你并不需要在<html> 中使用xmlns 或xml:lang标记。<html lang=”en”> 将对HTML5 有效。
简单易记的编码类型：
你现在可以在meta 标签中使用”charset”：<meta charset=”utf-8″ />
不需要闭合标签：
在HTML5 中，空标签（如：br、img 和input ）并不需要闭合标签。
废弃的标签：
下面这些标签并不被HTML5 支持： <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和<xmp>。
更加语义化的新增标签：
HTML5 新增的一些新标签除了不仅仅是更具语义的<div> 标签的替代品，并不提供额外的功能。这些都是新增的标签：<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>。
 
 

Html5对表单的支持

Html5新增了多个控件类型，如输入网址的url类型，输入电子邮箱地址的email类型，用于输入日期的date类型，更有用于输入颜色的color类型等等。更为神奇的是这些类型还内建表单验证，如required属性就说明该表项不能为空，max属性提供了该表项输入允许的最大值，当然在html4中这些功能也可以通过javascript来实现，但是的内建在html5中的表单验证优越性不言而喻。需要注意的是，现在Html5的输入类型还没有被所有浏览器所支持。
 
  • 新的INPUT类型：color, email, date, month, week, time, datetime, datetime-local, number,range,search, tel, 和url
  • 新属性：required, autofocus, pattern, list, autocomplete 和placeholder
  • 新元素：<keygen>, <datalist>, <output>, <meter> 和<progress>
 
测试代码：
<form>
Email:<input type=” email“ required /></br>
Number:<input type=” number” max=10 /></br>
Date :<input type=” date“></br>
File:<input type=” file“ accept = “p_w_picpath/png” /></br>
<input type=”submit”>
</form>
实例页面： input.html
 

Html5中的Media

Html5 的另一大特点就是不借助其他插件就可播放视频和音频文件，在网页中添加如下代码就可以用一个宽度为320像素、高度为240像素的带控制条的浏览器内置播放器来播放“movie.mp4”视频文件，而不再需要使用Adobe Flash播放器。效果就像这样： video.html
< video src=”movie.mp4″ width=”320″ height=”240″ controls=”controls”>
Your browser does not support the video tag.
</ video>
当然这种直接使用视频源文件的方法会牵扯到视频文件格式的版权问题，所以各主流浏览器都做不到对所有的视频格式都完全支持，这时就需要使用如下的代码来实现视频播放：
< video>
< source src=”movie. mp4“>
< source src=”movie. ogv“>
< object data=”movie. swf“>
<a href=”movie. mp4“>download</a>
</ object>
</ video>
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的，由于视频格式的版权问题，不同的浏览器支持不同的视频格式，所以video 元素含有允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。在上面的那个程序里：
1、如果浏览器支持video元素，也支持H264（mp4格式），那么就使用第一个视频；
2、如果浏览器支持video元素，不支持H264（mp4格式）但支持Ogg，那么用第二个视频；
3、如果浏览器不支持video元素，那么就播放Flash；
4、如果浏览器不支持video元素，也不支持Flash，那么就给出了下载链接，这下就该没有问题了吧。
  • 音频: ogg (ogg, oga), mp3, wav, AAC
  • 视频: ogg (ogv), H.264 (mp4)
不得不提，html5的支持媒体播放的特性会冲击adobe flash在网络媒体中的地位，Adobe公司已经深刻意识到了这个问题，更多信息参见 关于Adobe最新的Flash/HTML5策略的问答。

动画元素Canvas

HTML5 的 canvas 元素可以使用 JavaScript 直接在网页上绘制图像。在canvas中，画布是一个很重要的概念，画布是一个矩形区域，利用canvas可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素十分简单，只需要向 HTML5 页面添加 canvas 元素，规定元素的 id、宽度和高度：
< canvas id=” myCanvas” width=”200″ height=”100″></ canvas>
然后通过 JavaScript 来绘制，canvas 元素本身是没有绘图能力的，因此所有的绘制工作必须在 JavaScript 内部完成：
<script type=”text/javascript”>
var c=document.getElementById(“ myCanvas“);
var cxt=c. getContext(“ 2d“);
cxt. fillStyle=”#FF0000″;
cxt. fillRect(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById(“ myCanvas“);
然后，创建 context 对象：
var cxt=c. getContext(“2d”);
getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt. fillStyle=”#FF0000″;
cxt. fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。fillRect 方法拥有参数 (0,0,150,75)。意思是：在画布从左上角开始 (0,0)绘制一个 150×75 的矩形，很简单吧。上面的例子是最简单的例子，canvas是十分强大的，现在大多数html5的Demon页面都是在展示html5强大的动画能力，通过canvas完全可以实现与flash动画相媲美的页面，下面的几个网页供大家惊叹：
一个神奇的茶壶（拖动茶壶就会发现不可思议的事情）
 

Drag&Drop

HTML5为元素新增了用于拖拽的属性draggable，这个属性决定了元素是否能被拖拽， 如果draggable=”true”，则元素可被拖拽，否则只能选择元素的文本。下面几行简单的代码可以简单的说明Html5的Drag&Drop特性：
<section>
<p draggable=” true”   οndragstart=” dragstartHandler(event)”>
Drag me!Drag me!!</p><br/>
<p draggable=” false“>Don’t drag me!!</p>
</section>
Section区块中包含两行文本，第一行文本的draggable = true，即可拖拽的，且声明了发生dragstart事件是调用的函数；第二行文本draggable = false，即不可拖拽的。下面的<script>实现了发生dragstart事件时调用的函数，显示一个提示框。
<script>
function dragstartHandler(e)
{alert(‘dragstart’);}
</script>
实例页面： drag.html
运行这段代码可以发现，当拖拽第一行文本时会弹出一个提示框，而拖拽第二行文本时除了复制文本以外没有任何反应，这是因为当拖拽第一行文本时会触发ondragstart事件，从而调用相应的处理函数产生一个提示框。同样的定义其他拖拽事件如ondragenter、ondragover、ondragover、ondrop等的动作函数就可以完成一个完整的拖拽动作，实现想要实现的目的。
下面是一个网络上的demon供大家尝鲜：
把本地文件直接拖拽上传： http://sofish.de/file/demo/drag-and-drop-files.html

 

Html 5的Application Cache

现在，web应用的火爆已经是不折不扣的现实，并且相对传统的应用,web应用不需要安装，所占空间小的特性使其具备传统软件应用所不具备的优势，然而，目前制约web应用最大的问题在于网络连接不能够无时无处。在飞机上，汽车上，火车上，有很多地方都无法被网络信号所覆盖，因此web应用也就无法使用。
HTML5的离线存储使得这个问题迎刃而解。HTML5的web storage API 采用了离线缓存，会生成一个清单文件（manifest file），这个清单文件实质就是一系列的URL列表文件，这些URL分别指向页面当中的HTML,CSS,Javascrpit,图片等相关内容。
一个Mainfest file实例：
–  CACHE MANIFEST
/demo/test/style.css
/demo/test/jquery.min.js
/demo/test/test.html
当使用离线应用时，应用会引入这一清单文件，浏览器读取这一文件，下载相应的文件，并将其缓存到本地。使得这些web应用能够脱离网络使用，而用户在离线时的更改也同样会映射到清单文件中，并在重新连线之后将更改返回应用，工作方式与我们现在所使用的网盘有着异曲同工之处。

 

Local storge

Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。此外，在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage，但是这几种方式都存在兼容性方面的局限性，因此真正使用起来并不理想。针对以上情况，HTML5中给出了更加理想的解决方案：假如你需要存储复杂的数据则可以使用Web Database，可以像客户端程序一样使用SQL（不过Web Database标准当前正陷于僵局之中，而且目前已经实现的浏览器很有限）；假如你需要存储的只是简单的数据则可以使用Web Storage。
Web Storage实际上由两部分组成：sessionStorage与localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
下面一段代码同时包含sessionStorage和localStorage用于统计页面的访问次数：
<script>
if ( sessionStorage.pagecount)
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
else
sessionStorage.pagecount=1;
document.write(“Visits “+ sessionStorage.pagecount + ” time(s).”);
if ( localStorage.pagecount)
localStorage.pagecount=Number(localStorage.pagecount) +1;
else
localStorage.pagecount=1;
document.write(“Visits “+ localStorage.pagecount + ” time(s).”);
</script>
多次刷新页面 locaStorage.html可以发现，两种计数每刷新一次就增加1，如果把页面关闭然后再打开，那么sessionStorage计数将会从0开始重新计数，而localStorage仍然继续上次的计数。这正是因为sessionStorage仅仅存储本次会话中的数据，而localStorage则会持久的存储数据
 
 
 
HTML5中的通信API
主要包括两个方面的内容：
跨文档通信（Cross Document Messaging）
XMLHttpRequest Level 2
跨文档通信（Cross Document Messaging）
以前，出于安全考虑，在浏览器内部的跨文档通信是被禁止的。所谓的浏览器内部的通信，是指在框架（frames）、标签（tabs）和窗口（windows）之间的通信能力。
发送消息使用postMessage():
chatFrame.contentWindow.postMessage('Hello, World', 'http://www.example.com/');
接收方：
window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
    switch(e.origin) {
        case "friend.example.com":
        // process message
        processMessage(e.data);
        break;
    default:
        // message origin not recognized
        // igoring message
    }
}
“message”事件是一个DOM事件，它有两个属性：
属性 内容
data   实际发送的数据。
origin   发送方的源（the sender's origin)
接收消息的一方通过检测origin属性，就可以只处理来源于可信任源的消息，以保证安全性。
postMessage提供子框架与其容器的异步通信功能，它同样也可以应用于同源的文档之间的通信，于是，postMessage就成为了在JS上下文（JavaScript context）之间通信的基本方式，包括HTML5 Web Workers之间的通信。