设备通用
拖拽与拖放 (Drag & Drop) 与 文件处理 (File API)
过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的 mousedown、mousemove、mouseup的鼠标事件监听来模拟拖拽效果，为 了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，不停的修改元素的位 置，代码要堆很多，而且性能也很差，现在有了HTML5原生的Drag & Drop 拖
拽事件，再结合FileAPI 中的 FileReader，一切变得so easy~
连接
WebSocket
现在，很多网站为了实现即时通讯，
所用的技术都是轮询。这种模式需要浏览
器不断的向服务器发出请求，然而HTTP请 求的header信息是非常长的，这样会占用 很多的带宽和服务器资源。
WebSockets是在一个(TCP)接口进
但是对消费者体验更好的新方式还是出现并颠覆了以前的一切，那就是流媒体和网页游戏。Youtube 等公司把握住潮流飞 速崛起，各种页游公司也如雨后春笋。 但是 HTML 标准没有把握住产业的变化及时演进，浏览器产品也未升级，这块新需求被浏览器插件满足了，那就是 Flash。 这个部署在亿万浏览器里的商业插件俨然成为事实标准。2005 年 Adobe 巨资收购 Macromedia，把 Flash 收归旗下，紧接着大 幅推广 FLV 流媒体和 action script 语言，很明显这桩收购可以列为 IT 并购的经典案例，FLV 流媒体和 Flash 游戏风靡互联网， Adobe 在新的产业升级中攫取了大量的利润。 除了 Flash 这个商业产品成为了事实标准，W3C 还面临一个尴尬，就是另一个私有扩展协议的制造者—IE。IE 当时在桌面 浏览器占有垄断地位，并且扩展了大量的 IE Only 语法，开发者完全不知道这些语言是谁定义的。整个 web 世界，就被两家公 司微软 +Adobe 绑架了。 很多 IT 巨头都坐不住了，尤其是苹果和 Google。PC 操作系统的世界难有突破，Web 浏览器被苹果寄予厚望，而且第一 代 iPhone 只支持网页，那时还没有 Appstore，Safari 是乔布斯非常看重的产品;新贵 Google 虽然大量赞助 Mozilla，但并未对 IE 的地位产生实质影响，收购了 YouTube 后发现底层被 Adobe 控制，也是非常难过，而且 Google 每年给 IE 的搜索框和 Adoble FLV 缴纳的费用真不是小数目。 既然大家都是 W3C 的主席单位，好吧，我们重新开始做 HTML5 吧。 是的，HTML5 其实就是这么诞生的。那是 2007 年，IE 和 Flash 由盛转衰的转折点。
三维、图形与特效
Canvas 画布元素
传统的网页，总是使用GIF或者JPEG来显示图像，这种图形是需要事先画好 的“静态”的图像。而Canvas，则是用Javascript的一种绘图手段。 可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。
<canvas id="canvas" width="300" height="300"></canvas> <script> var ctx = document.getElementById("canvas").getContext("2d"); ctx.fillRect(20, 25, 150, 100); ctx.beginPath(); ctx.arc(220, 110, 100, Math.PI * 1/2, Math.PI * 3/2); ctx.lineWidth = 15; ctx.lineCap = 'round'; ctx.strokeStyle = 'rgba(255, 127, 0, 0.5)'; ctx.stroke(); </script>
行双向通信的技术，PUSH技术类型。能更 好的节省服务器资源和带宽并达到实时通 讯。
在 WebSocket API 中，浏览器和服
务器只需要做一个握手的动作，然后，浏 览器和服务器之间就形成了一条快速通道。 两者之间就直接可以数据互相传送。
桌面通知 (Notifications)
通过桌面通知系统，网站可以在用户桌面弹出一条通知，无论用户是否浏览 当前网页，甚至最小化了浏览器，通知均可到达用户桌面。
离线存储
Web 存储 (Web Storage)
HTML5 提供了两种在客户端存储数据的新方法： localStorage - 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会 过期。 sessionStorage - 用于存储一个会话（session）中的数据，这些数据只有在同一 个会话中的页面才能访问，当会话结束后数据也随之销毁。
速度而且效率不高。
Indexed DataBase
对于存储少量的数据，Web Storage能够很好的完成任务，但是对大量的结构化数据
进行处理时，它就力所不及了，而这正是IndexedDB的应用所在。 IndexedDB严格遵循W3C的同源策略(所谓同源是指，域名，协议，端口相同。 )， 每个源都拥有独立的存储空间，每个存储空间内又可以创建多个数据库，每个数据库可以 包含多个表，每个表都是一个json对象列表，可以存储多个json对象，比如{"name": "sonic", "age": 27}。
随着宽带的普及和电脑性能的增强，人们不再满足于单纯的通过互联网看新闻、收发邮件，消耗更高带宽的娱乐产品开始出 现，就是流视频和网页游戏。其实视频和游戏是古老的需求，在互联网不普及的时候，需求的满足方式是离线传输的 VCD 和游 戏光盘;后来互联网逐渐普及，人们更改了使用方式，通过下载软件+本地媒体播放器来看视频，下载体积较大的端游玩游戏。
CACHE MANIFEST # version 1.0.0 #缓存 — 定义了哪些资源是浏览器可以缓存的 CACHE: /html5/src/logic.js /html5/src/style.css /html5/src/background.png #网络 — 定义了哪些资源是需要用户在线才能使用的 NETWORK: *
HTML5出现背景
自 W3C 于 1999 年发布 HTML4 后，Web 世界快速发展，一片繁荣。人们一度认为 HTML 标准不需要升级了。一些致力于 发展 Web App 的公司另行成立了 WHATWG 组织，直到 2007 年，W3C 从 WHATWG 接手相关工作，重新开始发展 HTML5。 HTML5 的发展史，有用户的需求在推动，有技术开发者的需求在推动，更有巨大的商业利益在推动。 在互联网的早期，对用户而言，能打开浏览器接入到互联网世界就是一个神奇的事情，但互联网发展到 2005 年前后，开始 出现下一个变化，就是宽带互联。
语义
语义化的标签
HTML5 引入了新的 HTML 元素，通过使用这些元素，开发者可以更细致 的描述文档结构，让文档更加易读，搜索引擎也能更好的理解页面中各部分间 的关系，我们也可以搜索到更快，更准确的信息。
十个常用的新标签列表
<article> 定义文章 <aside> 定义文章的侧边栏 <header>定义页眉 <hgroup>定义对网页标题的组合 <nav>定义导航 <section> 定义文档中的区段 <time>定义日期和时间
if (window.webkitNotifications.checkPermission() == 0) { var title = '领跑HTML5支持 傲游升级自主内核', text = '桌面通知时HTML5的独门秘籍'; window.webkitNotifications.createNotification('', title, text).show(); }
localStorage.length; localStorage.key(index); localStorage.setItem('foo', 'bar'); localStorage.getItem('foo'); localStorage.removeItem('foo'); 以前，这些都是由 Cookie 完成的。但是 Cookie 有4KB的大小限制，而且会随HTTP请求一起被传递，无形中拖慢网页 localStorage.clear();
HTML5的八大新特性
语义特性（Class：Semantic）HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数 据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。 本地存储特性（Class: OFFLINE & STORAGE） 基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及 本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。 设备兼容特性 (Class: DEVICE ACCESS) 从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来 了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览 器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。 连接特性（Class: CONNECTIVITY） 更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实 现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个 特性能够帮助我们实现服务器将数据“推送”到客户端的功能。 网页多媒体特性(Class: MULTIMEDIA) 支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。 三维、图形及特效特性（Class: 3D, Graphics & Effects） 基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。 性能与集成特性（Class: Performance & Integration） 没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在 多样化的环境中更快速的工作。 CSS3特性(Class: CSS3) 在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版， Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。
