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:

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

 

<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>
 
 
</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“
 
语言输入 ：
<input type="text" x-webkit-speech />
 
桌面提醒：
window.webkitNotifications.requestPermission();
statue = window.webkitNotifications.checkPermission();
var notification =window.webkitNotifications.createNotification("[imgurl]","Title","Body");
notification.show();

 

 
posted @ 2017-07-22 15:18  钢铁小坦克  阅读(211)  评论(0)  编辑  收藏  举报