HTML5笔记-加强版 / 憋错料

新增的语法结构表单验证

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:

var oDiv = document.getElementById(‘div1‘);

//JS获取自定义属性：
oDiv.dataset.miao

oDiv.dataset.miaoAll

4、延迟加载JS

JS的加载会影响后面的内容加载。很多浏览器都采用了并行加载JS，但还是会影响其他内容。

defer : 延迟加载，会按顺序执行，在onload执行前被触发：

async : 异步加载，加载完就触发，有顺序问题，有依赖关系的JS不要异步

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，元素就可以拖拽了

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+" \">" // \"为转义字符

}

音频视频：

controls控件必须写上

1）为了兼容浏览器添加多个视频格式：

</video>

2）媒体元素：

controls : 显示或隐藏用户控制界面

autoplay : 媒体是否自动播放

loop : 媒体是否循环播放

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(ev.origin);// http://www.a.com

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>

<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>

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>

</body>

</html>

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“

语言输入：

桌面提醒：

window.webkitNotifications.requestPermission();

statue = window.webkitNotifications.checkPermission();

var notification =window.webkitNotifications.createNotification("[imgurl]","Title","Body");

notification.show();

时间： 2024-10-25 18:09:25

HTML5笔记-加强版

HTML5笔记-加强版的相关文章

HTML5笔记3——Web Storage和本地数据库

Html5笔记表格布局

HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

HTML5 – 3.加强版ol

HTML5笔记之——视频

HTML5笔记（一）

HTML5笔记1——HTML5的发展史及标签的改变

html5笔记（标签）

html5笔记