标签：二进制 简介 container end 全球 invalid 离线应用 返回 pat
新增的语法结构表单验证
1、新的页面结构以及宽松的语法规范：
<!doctype html>
<meta charset=“utf-8”/>
2、新的结构化元素：语义化标签：
<header></header> 页眉。主要用于页面的头部的信息介绍，也可用于板块头部
<hgroup></hgroup> 页面上的一个标题组合。一个标题和一个子标题，或者标语的组合
<hgroup>
<h1>妙味课堂</h1>
<h2>带您进入富有人情味的IT培训</h2>
</hgroup>
<nav></nav> 导航 （包含链接的的一个列表）比ul少了一些默认的局限性
<nav><a href=“#”>链接</a><a href=“#”>链接</a></nav>
<nav>
<p><a href=“#”>首页</a></p>
<p><a href=“#”>课堂</a></p>
</nav>
<footer></footer>页脚 页面的底部 或者 版块底部
<section> <section> 页面上的版块。用于划分页面上的不同区域,或者划分文章里不同的节
<article></ article > 用来在页面中表示一套结构完整且独立的内容部分。可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。
<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
aside 的内容应该与 article 的内容相关：
被包含在<article>中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等
在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
<figure> < figure > 用于对元素进行组合。一般用于图片或视频。
<figcaption> <figcaption> figure的子元素，用于对figure的内容进行说明。
<figure>
<img src=“miaov.png”/>(注意没有alt)
<figcaption> 妙味课堂 photo ? 妙味趣学</figcaption>
</figure>
<time></time>用来表现时间或日期
<p> 我们在每天早上 <time>9:00</time> 开始营业。</p>
<p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。 </p>
<datalist></datalist>选项列表。与 input 元素配合使用，来定义 input 可能的值。
当输入的时候，会出现下拉菜单，里面有可能的选项。当输入选项前几个字母会匹配含有的选项值。
<input type="text" list="valList" />
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
<details></details>用于描述文档或文档某个部分的细节。该元素用于摘录引用等，应该与页面的主要内容区分开的其他内容
属性： Open 进入页面时属性默认展开
< summary></summary> details 元素的标题
<details>
<summary>妙味课堂</summary> （显示）
<p>国内将知名的IT培训机构</p> （隐藏）
</details>
<dialog></dialog>定义一段对话 ：
<dialog>
<dt>老师</dt>
<dd>2+2 等于？</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>答对了！</dd>
</dialog>
<address></address> 定义文章 或页面作者的详细联系信息
<mark></mark> 需要标记的词或句子（字体的背景默认为黄色标记）
<keygen>给表单添加一个公钥
<form action="http://www.baidu.com" method="get">
用户: <input type="text" name="usr_name" />
公钥: <keygen name="security" />
<input type="submit" />
</form>
<progress><progress>定义进度条
<progress max="100" value="76">
<span>76</span>%
</progress>
3、IE下的兼容
1）标签
针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript创建标签来解决他们
方法如下：
在页面的头部加下：
<script>
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
……
</script>
2）样式
HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里要对这些标签定义一下它默认的display，一般为display：block
3)直接引入兼容插件
4、表单forms
1）新的输入型控件：type=" "
email : 电子邮箱文本框，跟普通的没什么区别。当输入不是邮箱的时候，验证通不过。移动端的键盘会有变化。
tel : 电话号码
url : 网页的URL
search : 搜索引擎。chrome下输入文字后，会多出一个关闭的X
range : 特定范围内的数值选择器。属性：min、max、step( 步数 )
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期（UTC）
datetime-local : 显示完整日期，不含时区
time : 显示时间，不含时区
date : 显示日期
week : 显示周
month : 显示月
2）新的表单属性
placeholder : 输入框提示信息
autocomplete : 是否保存用户输入值，下次输入显示历史输入内容。默认为on，关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
required : 此项必填，不能为空
pattern : 正则验证 pattern="\d{1,5}"
formaction 在submit里定义提交地址。
保存到草稿：
<input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" />
5、表单验证
表单验证
Invalid事件 : 验证反馈 input.addEventListener(‘invalid‘,fn,false)
阻止默认验证：ev.preventDefault()
formnovalidate属性 : 关闭验证
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证
eg:
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
alert(this.validity.patternMismatch);// 八种验证不匹配不一致的时候返回true
ev.preventDefault();
}
HTML5新特性
1、新的选择器：
querySelector 只能选择一组中的第一个元素：
var oDiv = document.querySelector(‘#box‘); //也可通.class和[title=box]选择
querySelectorAll 获取一组元素：
var aDiv = document.querySelectorAll(‘.box‘);
getElementsByClassName：通过class获取元素
var aDiv = document.getElementsByClassName(‘box‘); //可以获取一组元素
获取class列表属性：classList：
length : class的长度
add() : 添加class方法
remove() : 删除class方法
toggle() : 切换class方法
var oDiv = document.getElementById(‘div1‘);
alert( oDiv.classList ); //类似与数组的对象
alert( oDiv.classList.length ); //3
oDiv.classList.add(‘box4‘);
oDiv.classList.remove(‘box2‘);
oDiv.classList.toggle(‘box2‘);//当box2存在时则删除，当box2不存在时则添加
2、JSON的新方法
JSON.parse() : 把字符串转成js。字符串中的属性要严格的加上引号。
JSON.stringify() : 把json转化成字符串。会自动的把双引号加上。
新方法与eval的区别：
eval : 可以解析任何字符串变成JS
parse : 只能解析JSON形式的字符串变成JS (安全性要高一些)
新方法的应用：可以深度克隆新对象，为了防止对象的引用造成互相的影响可以进行：
浅拷贝：for in
var a = {
name : ‘hello‘
};
var b = {};
for(var attr in a){
b[attr] = a[attr];
}
b.name = ‘hi‘;
alert( a.name ); //hello
深拷贝：
var a = {
name : { age : 100 }
};
var str = JSON.stringify(a);
var b = JSON.parse(str);
b.name.age = 200;
alert( a.name.age ); //100
如何其他浏览器做到兼容：(IE8以下不支持)
http://www.json.org/去下载json2.js
3、data自定义数据
很多库都采用自定义数据，使得JS与HTML进行分离，比如jQuery mobile
dataset：
data-name : dataset.name
data-name-first : dataset.nameFirst
eg:
<div id="div1" data-miao="喵" data-miao-all="喵">div</div>
var oDiv = document.getElementById(‘div1‘);
//JS获取自定义属性：
oDiv.dataset.miao
oDiv.dataset.miaoAll
4、延迟加载JS
JS的加载会影响后面的内容加载。很多浏览器都采用了并行加载JS，但还是会影响其他内容。
defer : 延迟加载，会按顺序执行，在onload执行前被触发：
<script src="a.js" defer="defer"></script>
<script src="b.js" defer="defer"></script>
async : 异步加载，加载完就触发，有顺序问题，有依赖关系的JS不要异步
<script src="a.js" async ="async"></script>
<script src="b.js" async ="async"></script>
Labjs库：可以处理是否有依赖关系的JS，来控制谁应该异步加载。
5、历史管理 :
触发历史管理：
1）通过跳转页面
2）onhashchange ：改变hash值来管理
eg : 点击按钮随机产生数字，多次点击，可以点击浏览器后退按钮进行后退
var json = {};
function randomNum(){ .. .. }//随机获取数字的函数
oInput.onclick = function(){
var num = Math.random();
var arr = randomNum(35,7);
json[num] = arr;
oDiv.innerHTML = arr;
window.location.hash = num;
};
window.onhashchange = function(){
oDiv.innerHTML = json[window.location.hash.substring(1)];
};
3）history ：
服务器下运行
pushState : 三个参数 ：数据 标题(都没实现) 地址(可选)
popstate事件 : 读取数据 event.state
注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面
eg : 点击按钮随机产生数字，多次点击，可以点击浏览器后退按钮进行后退
function randomNum(){ .. .. }//随机获取数字的函数
Input.onclick = function(){
var arr = randomNum(35,7);
history.pushState(arr,‘‘,arr);
oDiv.innerHTML = arr;
};
window.onpopstate = function(ev){
oDiv.innerHTML = ev.state;
};
拖放：
拖放事件 ：
1）draggable ：设置为true，元素就可以拖拽了
<li draggable="true">a</li>
2）拖拽元素事件 : 事件对象为被拖拽元素
dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间，连续触发
dragend , 拖拽结束触发
3）目标元素事件 : 事件对象为目标元素
dragenter , 进入目标元素触发，相当于mouseover
dragover ,进入目标、离开目标之间，连续触发
dragleave , 离开目标元素触发，相当于mouseout
drop , 在目标元素上释放鼠标触发
eg：
oDiv.ondragenter = function(){
this.style.background = ‘blue‘;
};
oDiv.ondragover = function(ev){
//enter和leave之间连续触发
//要想触发drop事件，就 必须在dragover当中阻止默认事件
var ev = ev || window.event;
ev.preventDefault();
};
oDiv.ondragleave = function(){
this.style.background = ‘red‘;
};
oDiv.ondrop = function(){
alert(123);
};
eg：拖放网页上子图片资源：
img1.ondragstart = function(e){
e.dataTransfer.setData("imgId","img1");//设置被拖数据的数据类型和值
}
boxDiv.ondragover = function(e){//ondragover 事件规定在何处放置被拖动的数据。
e.preventDefault();//阻止系统默认的事件
}
boxDiv.ondrop = function (e){//处理drop事件接受释放的元素
showObj(e.dataTransfer);////显示事件详细信息
e.preventDefault();
var img = document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);//把被拖元素追加到放置元素（目标元素）中
}
4）事件的执行顺序
事件的执行顺序 ：drop不触发的时候
dragstart > drag > dragenter > dragover > dragleave > dragend
事件的执行顺序 ：drop触发的时候(dragover的时候阻止默认事件)
dragstart > drag > dragenter > dragover > drop > dragend
不能释放的光标和能释放的光标不一样
5）dataTransfer对象
解决火狐下的问题:
必须设置dataTransfer对象才可以拖拽除图片外的其他标签
dataTransfer对象：
setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据，根据key值，获取对应的value
effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
setDragImage 设置拖拽过程中的背景图。三个参数：指定的元素，坐标X，坐标Y。
files 获取外部拖拽的文件，返回一个filesList列表。filesList下有个type属性，返回文件的类型。
aLi[i].ondragstart = function(ev){
var ev = ev || window.event;
ev.dataTransfer.setData(‘name‘,‘hello‘);
ev.dataTransfer.effectAllowed = ‘link‘;
ev.dataTransfer.setDragImage(oImg,0,0);
};
···
oDiv.ondrop = function(ev){
oUl.removeChild( aLi[ev.dataTransfer.getData(‘name‘)] );
}
6）FileReader对象(读取文件信息)
readAsDataURL ：参数为要读取的文件对象，将文件读取为DataUrl
onload：当读取文件成功完成的时候触发此事件。this. result 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
拖放外部图片资源：
window.onload = function(){
var imgContainer = document.getElementById("imgContainer");
var msgDiv=document.getElementById("msg");
imgContainer.ondragover = function(e){
e.preventDefault();
}
imgContainer.ondrop = function(e){
e.preventDefault();
var f = e.dataTransfer.files[0];
var fileReader = new FileReader();
fileReader.readAsDataURL(f);
fileReader.onload = function(e){
imgContainer.innerHTML=" <img src=\" "+fileReader.result+" \">" // \"为转义字符
}
}
}
音频视频：
<audio controls src="johann_sebastian_bach_air.mp3"></audio>
<video controls src="Intermission-Walk-in.ogv"></video>
controls控件必须写上
1）为了兼容浏览器添加多个视频格式：
<video controls>
<source src="Intermission-Walk-in.ogv"></source>
<source src="Intermission-Walk-in.mp4"></source>
</video>
2）媒体元素 ：
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
<audio controls autoplay loop src="johann_sebastian_bach_air.mp3"></audio>
3）JS设置和只读元素：
currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音 静音为false 有声为true
autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
var oA = document.getElementById(‘a1‘);
oA.currentTime = 60;
console.log( oA.duration );
console.log( oA.volume );
4）控制函数：
play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体
mozRequestFullScreen()：全屏
var oV = document.getElementById(‘v1‘);
var oInput = document.getElementById(‘input1‘);
var aS = document.getElementsByTagName(‘source‘);
oV.onmouseover = function(){
this.play();
this.mozRequestFullScreen();
};
oV.onmouseout = function(){
this.pause();
};
oInput.onclick = function(){
aS[0].src = ‘xxxx.mp4‘;
aS[1].src = ‘yyyy.mp4‘;
oV.load(); //动态修改播放地址的后要重新加载，执行load()函数，否则修改不生效。
};
5）事件：
loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange
oV.addEventListener(‘ended‘,function(){ //播放结束后的事件
alert(123);
},false);
6）Video额外特性
poster : 视频播放前的预览图片
width、height : 设置视频的尺寸
videoWidth、 videoHeight : 视频的实际尺寸，无论是否修改，显示默认的尺寸(只读)
oV.poster = ‘2.png‘;
oV.width = 500;
oV.height = 500;
alert( oV.videoWidth );
跨文档消息通信、地理信息、本地存储、离线存储
1、跨文档消息通信
1）同域下的窗口通信：
iframe方法：
如果我们要操作一个iframe里面的dom元素，首先要获取到iframe引入的页面的window
var Iframe= document.getElementById(‘myframe‘);
Iframe.contentWindow -> 被iframe包含的页面的window对象
Iframe.contentWindow.document.body.style.background = ‘red‘;
当本页面和包含页面不在同一个域名下的时候，这样操作就会有跨域操作安全限制问题。
如果我们要在iframe中操作父级页面：
parent => window 如果当前页面是顶级，没有被其他页面所包含，那么parent就是当前页面的window对象，那么如果被包含了，则parent就是包含当前页面的父级页面的window对象
window : 当前窗口
parent : 父级窗口
top : 顶级窗口（最外面的父级）
parent.document.body.style.background = ‘green‘;
window.open方法：
window.open 返回被打开窗口的window对象
打开之后并改变背景颜色：
window.open(‘4.window.open.html‘, ‘_blank‘).document.body.style.background = ‘red‘;
window.opener : 返回通过window.open方法打开当前页面的窗口window
该方法适用在一个页面（A）用window.open方法打开的新页面(B)中，来操作之前的页面(A)
window.opener.document.body.style.background = ‘green‘;
2）跨文档消息通信（不同域下的窗口通信）
假设发送消息的域名为a.com，接收域为b.com
a.com下:
postMessage对象，可以通过这个方法给另外一个窗口发送信息。
接收消息的window对象.postMessage()
第一个参数：发送的数据
第二个参数：接收数据的域名｛带上协议（http://）｝
var oMyIframe = document.getElementById(‘myframe‘);
oMyIframe.contentWindow.postMessage(‘1‘, ‘http://www.b.com‘);
b.com下：
message : 当窗口接收到通过postMessage发送过来的数据的时候触发
message事件的事件对象下保存了发送过来的内容
ev.data : 发送过来的数据
ev.origin：发送数据的来源
window.addEventListener(‘message‘, function(ev) {
alert(ev.data); // 1
alert(‘我接收到了a.com页面发送过来的数据，内容是：‘ + ev.data);
if (ev.data == ‘1‘) { // a.com相当于发送指令给b.com，然后b.com确认后作出相应的改变
document.body.style.background = ‘red‘;
}
}, false);
2、ajax新增特性：
同域下的：
var oBtn = document.getElementById(‘btn‘);
oBtn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
}
}
}
xhr.open(‘get‘, ‘ajax.php‘, true);
xhr.send();
}
跨域下的：
在标准浏览器下，XMLHttpRequest对象已经是升级版本，支持了更多的特性，可以跨域了。但是，如果想实现跨域请求，还需要后端的相关配合，后端要设置响应头信息：
<?php
header(‘Access-Control-Allow-Origin:http://www.a.com‘); //这是允许访问该资源的域
XMLHttpRequest : 增加很多功能，它也不推荐使用onreadystatechange这个事件来监听，推荐使用新事件onload
XDomainRequest : IE如果想实现跨域请求，则需要使用另外一个对象XDomainRequest 去实现
var oXDomainRequest = new XDomainRequest();
oXDomainRequest.onload = function() {
alert(this.responseText);
}
oXDomainRequest.open(‘get‘, ‘http://www.b.com/ajax.php‘, true);
oXDomainRequest.send();
ajax实现无刷新页面上传（带进度条）：
进度事件：
upload.onprogress ：上传过程中的事件
FormData对象，通过FormData来构建二进制，提交数据
ev.total(发送的总量)
ev.loaded(已发送的数量)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 300px; height: 30px; border: 1px solid #000; position: relative;}
#div2 {width: 0; height: 30px; background: #CCC;}
#div3 {width: 300px; height: 30px; line-height: 30px; text-align: center; position: absolute; left: 0; top: 0;}
</style>
<script>
window.onload = function() {
var oBtn = document.getElementById(‘btn‘);
var oMyFile = document.getElementById(‘myFile‘);
var oDiv1 = document.getElementById(‘div1‘);
var oDiv2 = document.getElementById(‘div2‘);
var oDiv3 = document.getElementById(‘div3‘);
oBtn.onclick = function() {
//alert(oMyFile.value); //获取到的是file控件的value值，这个内容是显示给你看的文字，不是我们选择的文件
//oMyFile.files ：file控件中选择的文件列表对象
//alert(oMyFile.files);
//我们是要通过ajax把oMyFile.files[0]数据发送给后端
var xhr = new XMLHttpRequest();
xhr.onload = function() {
//var d = JSON.parse(this.responseText);
//alert(d.msg + ‘ : ‘ + d.url);
alert(‘OK,上传完成‘);
oDiv2.style.background = "green";
}
var oUpload = xhr.upload;
oUpload.onprogress = function(ev) {
//console.log(ev.total + ‘ : ‘ + ev.loaded);
var iScale = ev.loaded / ev.total;
oDiv2.style.width = 300 * iScale + ‘px‘;
oDiv3.innerHTML = iScale * 100 + ‘%‘;
}
xhr.open(‘post‘, ‘post_file.php‘, true); // 大数据量的用post
xhr.setRequestHeader(‘X-Request-With‘, ‘XMLHttpRequest‘); //设置请求头信息
var oFormData = new FormData(); //通过FormData来构建二进制，提交数据
oFormData.append(‘file‘, oMyFile.files[0]); //file为后端要接收文件设置的值
xhr.send(oFormData);
}
}
</script>
</head>
<body>
<input type="file" id="myFile" /><input type="button" id="btn" value="上传" />
<div id="div1">
<div id="div2"></div>
<div id="div3">0%</div>
</div>
3、applicationCache离线存储：
搭建离线应用程序：
①服务器设置头信息 : （在apache下的配置文件httpd中写上这一句）
AddType text/cache-manifest .manifest
② html标签加 :
manifest=“xxxxx.manifest”
③写manifest文件 : 离线的清单列表（在同目录下创建xxxxx.manifest）
先写 :
CACHE MANIFEST
其他：
FALLBACK : 第一个网络地址没获取到，就走第二个缓存的
NETWORK ：无论缓存中存在与否，均从网络获取
eg:
CACHE MANIFEST
2.png
FALLBACK
style1.css style2.css
4、Web Workers:
什么是worker?
JS的单线程（放入UI队列的个数，利用定时器解决）
可以让web应用程序具备后台处理能力，对多线程的支持非常好。
Worker API:
new Worker(‘后台处理的JS地址’)
利用postMessage传输数据
importScripts(‘导入其他JS文件’)
Worker运行环境:
navgator : appName、appVersion、userAgent、platform
location : 所有属性都是只读的
self : 指向全局 worker 对象
所有的ECMA对象，Object、Array、Date等
XMLHttpRequest构造器
setTimeout和setInterval方法
close()方法，立刻停止worker运行
importScripts方法
5、websocket
互联网协议：
http://www.ruanyifeng.com/blog/2012/05/internet_protocol_suite_part_i.html
TCP/IP协议
定义了电子设备如何连入因特网，以及数据在它们之间传输的标准(如何传输)
传输数据（协议）类型:Email,www,FTP等
HTTP协议
浏览器和万维网服务器之间互相通信的规则
HTTP协议特点
功能很强大
采用请求、响应模式，单项通信
短连接，响应完成连接就断开
实时web交互：
股票、聊天室、网游等应用
如果实现实时应用？服务器推送
什么是web socket?
基于TCP的双向的、全双工的数据连接
双向的：客户端、服务器端
全双工：数据的发送与接收，两者同步进行
建立socket应用?
服务器必须支持web socket.
Nodejs的简介：
Ryan Dahl基于GoogleV8引擎创建的一套用来编写高性能网络服务器的JavaScript工具包
Nodejs : 用js去写服务器应用
一个简单的web服务器
创建HTTP服务
监听客户端HTTP请求连接
处理请求响应，向客户端输出返回内容
Websocket连接
客户端发送Websocket连接请求
服务器监听来自Websocket连接请求
当连接成功后，客户端和服务器可以随时接收和发送数据
地理位置与本地存储
地理位置：
1、地理位置：
经度 : 南北极的连接线
纬度 : 东西连接的线
2、位置信息从何而来：
IP地址
GPS全球定位系统
Wi-Fi无线网络
基站
3、地理位置对象navigator.geolocation：
1）单次定位请求 ：getCurrentPosition(请求成功，请求失败，数据收集方式)
2）请求成功函数
经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
时间戳 : new Date(position.timestamp)
3）请求失败函数：
失败编号 ：code
0 : 不包括其他错误编号中的错误
1 : 用户拒绝浏览器获取位置信息
2 : 尝试获取用户信息，但失败了
3 : 设置了timeout值，获取位置超时了
4）数据收集 : json的形式：
enableHighAcuracy : 更精确的查找，默认false
timeout : 获取位置允许最长时间，默认infinity
maximumAge : 位置可以缓存的最大时间，默认0
5）多次定位请求 : watchPosition(像setInterval)
移动设备有用，位置改变才会触发
配置参数：frequency 更新的频率
6）关闭更新请求 : clearWatch(像clearInterval)
4、百度地图API<script src="http://api.map.baidu.com/api?v=1.3"></script>
本地存储：
Cookie：
数据存储到计算机中，通过浏览器控制添加与删除数据
Cookie的特点：存储限制，域名100个cookie,每组值大小4KB。客户端、服务器端，都会请求服务器（头信息）。页面间的cookie是共享。
Storage：
sessionStorage：session临时回话，从页面打开到页面关闭的时间段
窗口的临时存储，页面关闭，本地存储消失
localStorage：永久存储（可以手动删除数据）
Storage的特点：
存储量限制 ( 5M )。客户端完成，不会请求服务器处理。sessionStorage数据是不共享、 localStorage共享。
Storage API：
setItem():
设置数据，key\value类型，类型都是字符串
可以用获取属性的形式操作
getItem():
获取数据，通过key来获取到相应的value
removeItem():
删除数据，通过key来删除相应的value
clear():
删除全部存储的值
存储事件:
当数据有修改或删除的情况下，就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的
Key : 修改或删除的key值，如果调用clear(),key为null
newValue : 新设置的值，如果调用removeStorage(),key为null
oldValue : 调用改变前的value值
storageArea : 当前的storage对象
url : 触发该脚本变化的文档的url
注：session同窗口才可以,例子：iframe操作
HTML5其他功能:
内容编辑 (相当于都变成了输入框) ：
contenteditable="true“
语言输入 ：
<input type="text" x-webkit-speech />
桌面提醒：
window.webkitNotifications.requestPermission();
statue = window.webkitNotifications.checkPermission();
var notification =window.webkitNotifications.createNotification("[imgurl]","Title","Body");
notification.show();
HTML5笔记-加强版
标签：二进制 简介 container end 全球 invalid 离线应用 返回 pat
原文地址：http://www.cnblogs.com/hello-web/p/7221438.html
