Getting started with HTML5(整理)
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>
标签水平线，它应该定义内容中的主题变化