1?????? 背景
2008年正式公布，略
2?????? HTML5新特性
2.1???? 离线应用（使用应用缓存）AppCache
2.1.1? 定义
application cache：应用缓存/离线存储
将html/css/js，及其他任何资源文件保存在cache中，以便在离线（断网）状态下，浏览器仍然可以访问这些文件
2.1.2????? 和传统浏览器缓存的区别：
1、 浏览器缓存：
a)???? 协商缓存Last-modified,Etag
浏览器询问服务器，根据响应码304，则使用本地，否则返回新内容
b)???? 彻底缓存cache-control,Expires
在有效期内一直使用缓存
2、 缓存内容
a)???? 离线存储可以存储任意指定要缓存的内容，为整个web服务
b)???? 浏览器缓存只能缓存单个页面，不能指定
3、 离线存储可以动态通知用户更新
?
?
2.1.3? 使用
2.1.3.1 基本元素
=================1、Manifest属性================
<html lang="en" manifest='test.manifest'>
?
==========2、包含的test.manifest,如下============
CACHE MANIFEST ?//必须以这个开头
version 1.0 ?//最好定义版本，更新的时候只需修改版本号
CACHE: ?//定义需要缓存的内容
??? m.png
??? test.js
??? test.css
NETWORK:? //定义需要联网的内容，*表示除了CACHE之外的全部
??? *
FALLBACK
online.html offline.html//每行分别指定在线和离线时使用的文件
a.html? b.html //如在线使用a.html，离线使用b.html
==========================================================
?
=================3、服务端的支持=========================
=====IIS支持==============================================
略
=====Apache支持==========================================
conf/mime.types中添加一段代码：
test/cache-manifest manifest
==========================================================
?
数据请求的过程要点：
首次访问
???????? 根据manifest配置，进行本地存储
再次访问
???????? 请求manifest文件
如果返回码=304
则表示不变，直接取本地缓存
???????? 否则
?????????????????? 重新读取配置，走首次访问流程
2.1.3.2?? JS支持对象window.applicationCache
onchecking
?? //检查manifest文件是否存在
?
ondownloading
?? //检查到有manifest或者manifest文件
?? //已更新就执行下载操作
?? //即使需要缓存的文件在请求时服务器已经返回过了
?
onnoupdate
?? //返回304表示没有更新，通知浏览器直接使用本地文件
?
onprogress
?? //下载的时候周期性的触发，可以通过它
?? //获取已经下载的文件个数
?
oncached
?? //下载结束后触发，表示缓存成功
?
onupdateready
?? //第二次载入，如果manifest被更新
?? //在下载结束时候触发
?? //不触发onchched
?? alert("本地缓存正在更新中。。。");
?? if(confirm("是否重新载入已更新文件")){
?????? applicationCache.swapCache();
?????? location.reload();
?? }
?
onobsolete
?? //未找到文件，返回404或者401时候触发
?
onerror
?? //其他和离线存储有关的错误
?
2.2???? 拖拉功能Drag and Drop
默认提供了该功能，可以很方便的使用，无需自己重写
不仅可以在html页面中拖放，甚至可以将window的任何文件拖到页面中
draggable="true"（FF4以上可支持，IE不支持）
拖放的JS事件
被拖动元素事件
Ondragstart(e)
?????????????????? /*拖拽开始*/
?????? ? e.dataTransfer.effectAllowed = "move";//定义允许的效果"none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", and "uninitialized
?????????????????? e.dataTransfer.setData("text", e.target.innerHTML);//给dataTransfer对象新增text类型的数据
?????????????????? e.dataTransfer.setDragImage(e.target, 10, 20);//将e.target作为拖曳反馈对象
?
ondragend
?????????????????? /*拖拽结束*/
?
目标区域监听事件???????????????
ondragover
???????? /*拖拽元素在目标元素头上移动的时候*/
????????
?
Ondragenter(e)??????
/*拖拽元素进入目标元素头上的时候*/
???????? e.preventDefault();//使当前对象不允许被拖动
?
ondrop
???????? /*拖拽元素进入目标元素头上，同时鼠标松开的时候*/
2.3?? 增加Geolocation（geography location地理定位）
在询问是否共享之后，可将客户端的ip地理位置发给Google Location Services（FF默认）
2.4???? 音频视频支持Audio and Video
2.5???? 表单输入
新增了很多新元素作为表单控件的attribute属性
如pop-up calendars, color selectors, number spinners and many more
3?????? 语法更简洁
3.1???? DOC TYPE
OLD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
HTML5：
<!DOCTYPE html>
3.2???? 字符编码Character Encoding
OLD：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5：
<meta charset="UTF-8">
?
3.3???? <script>标签
OLD：
<script type="text/javascript" src="file.js"></script>
HTML5：
<script src="code.js" async></script>
???????? 且新增属性async
?
Async：异步支持
???????? 做个实验A
???????? <HTML>
???????????????? <HEAD>
? ?????????????????????? <script LANGUAGE="JavaScript" src="sync-test1.js"></script>
???????????????? </HEAD>
?<BODY>
???????? ???????? <img src="22.jpg">
??????? </BODY>
</HTML>
HTML都是从上到下顺序执行
1、? 先下载sync-test1.js。如果里面有定义执行的方法也要先执行
2、? 再下载22.jpg图片。如果js文件里的方法要执行很久，则下面的其他dom元素都将被阻塞。
?
实验B
给script加个defer属性---只有ie支持
<script LANGUAGE="JavaScript" src="sync-test1.js" defer></script>
结果：可将该js进行异步处理，后面的dom元素都不需要等待了
?
实验C
使用async---FF4+都支持，ie不支持
<script src="sync-test1.js" async></script>
结果：可将该js进行异步处理，后面的dom元素都不需要等待了
?
异步有好处，但也有风险
<script src="sync-test1.js" async></script>
<script src="sync-test2.js" async></script>
如果test1和test2之间有顺序依赖就不可以用async，否则会报错
3.4???? <link>标签
OLD：
<link rel="stylesheet" type="text/css" href="style.css" />
HTML5：
???????? <link rel="stylesheet" href="style.css">
?
4?????? 新增dom元素
都比较显而易懂，使用到的时候再查看api
4.1???? <header>
定义了一些样式，不需要使用<div id=”header”>
4.2???? <nav>
可以用作导航菜单，替代<div id=”nav”>
4.3???? <article>
略。
4.4???? <section>
略
4.5???? <aside>
略
4.6???? <figure>
略
4.7???? <footer>
略
5?????? 修改的dom元素
5.1???? <a>
允许包含多个子元素
<a href=”b.js”>
<p>xxx</p>
<font>xxx</font>…
</a>
5.2???? <b><i>
粗体和斜体，已不大推荐使用
5.3???? <hr>
标签水平线，它应该定义内容中的主题变化