码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 学习总结

时间:2016-11-26 13:59:09      阅读:892      评论:0      收藏:0      [点我收藏+]

标签:服务器   延迟   商品   编写   oda   作用   互操作   响应   sla   

1,h5比原来的h4.0版本的页面头部更为简化,
<!doctype html>
<meta charset="utf-8"/>
sublime中快速生成格式的快捷键是先输入!再按Tab键即可生成h5格式
2,语义化标签:
<header></header>:页眉,页面的头部,或板块的头部
<footer></footer>:
<nav></nav>:导航,形式宽松,不像ul,
例如:
<nav>
<a href="#">连接</a><a href="#">连接</a>
</nav>
<nav>
<p><a href="#">妙味课堂</a></p>
<p><a href="#">妙味课堂</a></p>
</nav>
<nav>
<h2>纯粮食白酒</h2>
<ul>
<li><a href="#">5斤</a></li>
<li><a href="#">10斤</a></li>
</ul>
</nav>
<hgroup></hgroup>:标题组合,标题和子标题,或标语组合
<section></section>:用来划分不同区域,或是划分文章里不同的节
<article></article>:主体,用来在页面中表示一套结构完整且独立的内容部分,可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,博客,用户提交的评论内容,可互动的页面模块挂件等
<aside></aside>:和主体相关(article中包含)的附属信息,如文章的侧边栏等,附属导航,底部的友情链接,广告单元等
媒体元素:视频,音频,图片等
<figure></figure>:包含图片,视频等媒体元素,其内部有<figcaption>对媒体元素的描述,标题等</figcaption>
<time></time>:时间或日期标签
<p>我们每天早上<time>9:00</time>开始营业</p>
<p>我在<time datetime="2016-10-19"></time></p>
<datalist></datalist>选项列表。与input元素配合使用,并且加上list属性,来定义input内部可能出现的值,输入开头字母会有提示,
例如:
<input type="text" list="valList"/>
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="css3">csss3</option>
<option value="html5">html5</option>
</datalist>
<details></details>:用于描述文档或文档某个部分的细节,summary标签包含在其的内部
1),该元素用于摘录引用等,应该与页面的主要内容区分开的其他内容
2),open的属性默认展开
<summary></summary>details元素的标题、、
<details> //若是想另起默认是展开的,则可以加open属性,<detail open>
<summary>妙味课堂</summary>
<p>国内知名IT培训机构</p>
</details>
<dialog></dialog>定义一段对话
<dialog> //有时在老伴火狐里不显示,则加个属性open,<dialog open>
<dt>老师</dt>
<dd>2+2=?</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>答对了</dd>
</dialog>

<address></address>:定义文章或页面作者的详细联系信息
<mark></mark>:需要标记的词或句子,若想要更改标记的背景颜色,可以在样式里进行修改,<style>
mark{ background:red;}
</style>
<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>% //这句是为了兼容别的浏览器如 IE8以下,可以不写这句
</progress>
5,article{background: #12c;padding: 10px;overflow: hidden;zoom: 1;position: relative;}
/* 注意上面使用的overflow样式,以及zoom */
aside{width: 200px;height: 300px;background: #b78;position: absolute;left: 10px;top: 10px;}

/* 为了在IE下兼容,将float:left 改成绝对定位,样式不变,原来是这样的
article{background: #12c;padding: 10px;overflow: hidden;zoom: 1;}
aside{width: 200px;height: 300px;background: #b78;float: left;}
*/
6),在IE下可以自定义标签,即在别的浏览器下自定义的标签 不会显示,而在IE下则可以将自定义的标签显示出来,
只需要在script标签下写上一句:document.createElement("self");//self可以是标签名,也可随意更改为自定义的标签。
利用这个方法,当IE6,7,8这样的低版本浏览器不兼容H5的标签时,就可以利用document.createElement("标签名");并且在样式里面加上默认显示块的样式,display:block;才能显示出来
document.createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("section");
document.createElement("footer");
3,,h5新增表单控件和表单属性:
新的输入型控件:
1)email://提交时会先验证,看是否满足邮件格式
<form>
<input type="email"/>
<input type="submit"/>
</form>
2),tel:在移动端,输入时,会变成数字键盘
<form>
<input type="tel"/>
<input type="submit"/>
</form>
3),,url:网页的url,会提示输入网址
<form>
<input type="url"/>
<input type="submit"/>
</form>
4),search:搜索,在输入框里面会多个叉,不搜索他时可以删除的意思
<form>
<input type="search"/>
<input type="submit"/>
</form>
5),range,
<form>
<input type="range" step="2" max="10" min="0" value="当前值"/>
<input type="submit"/>
</form>
6)number:只能包含数字的输入框
<form>
<input type="number"/>
<input type="submit"/>
</form>
7)color:颜色选择器
<form>
<input type="color"/>
<input type="submit"/>
</form>
8)datetime:显示完整日期
<form>
<input type="datetime"/>
<input type="submit"/>
</form>
datetime-local:显示完整日期,但不包括时区
9)time:显示时间
<form>
<input tyoe="time"/>
<input type="submit"/>
</form>
10),date:显示日期,(单纯的今天)
<form>
<input tyoe="date"/>
<input type="submit"/>
</form>
11),month:显示月
12),week:显示周
<form>
<input type="week"/>
<input type="submit"/>
</form>
4,新增表单特性和函数
1)placeholder:占位符提示信息
<form>
<input type="text" placeholder="请输入4-6个字符"/>
<input type="submit"/>
</form>
密码类型的:输出会是加密的圆点类型
<form><input type="password" placeholder="请输入4-6个字符"/></form>
2)autocomplete:是否保存用户输入值
默认为on,关闭提示是off
<form><input type="text" placeholder="请输入4-6个字符" name="user" autocomplete="off"/><form>
3)autofocus,:指定表单获取输入焦点,打开浏览器后可以使光标定位在输入框中
4)required:表示为必填项,不能为空,什么都不填直接提交会提示“请填写此字段”
5)Pattern:正则校验,若不与placeholder提示信息相符,会提示“请输入与格式相同的字符”
pattern="\d{1,5}";直接将这句加在里面
<form><input type="text" placeholder="请输入4-6个字符" pattern="\d{1,5}" /><form>
6)Formaction:在submit里定义提交地址(因为在form表单中已经有action了,<form action="http://www.baidu.com"></form>),
例如:保存到草稿箱,将它另外提交到别的地址
<form action="http://www.baidu.com">
<input type="submit" value="提交"/>
<input type="submit" value="保存到草稿箱" formaction="http://www.qq.com"/>
</form>

5,表单验证反馈:
validity对象:通过下面的valid可以查看验证是否通过,如果八种验证都(返回false时是对的)即通过返回true,一种验证失败返回false。
----验证反馈加的事件:oText.addEventListener("invalid",fn,false);
----ev.preventDefault(); //阻止默认事件(如默认为空)发生
Invalid事件:验证反馈
input.addEventListener(‘invalid‘,fn,false);
---ev.preventDefault(0; //阻止默认验证
八种验证:
1)----valueMissing:验证输入值是否为空,当输入值为空时,返回true,否则返回false
例如:
<form>
<input type="text" required id="text"/>
<input type="submit"/>
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn(){
alert(this.validity.valueMissing);
ev.preventDefault();
}
</script>
2)typeMismatch:控件值与预期类型不匹配,
当输入类型和要求的类型不一致的时候返回true
function fn(){
alert(this.validity.typeMismatch);
ev.preventDefault();
}
3)patternMismatch:当用户输入内容和预期的正则不匹配时,就会返回true,否则返回false
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn(){
alert(this.validity.patternMismatch);
ev.preventDefault();
}
-----------------------------------------------------------
对于许多浏览器来讲,控制很严格,所以以下4,5,6,7项都没有太大意义
-----------------------------------------------------------
4)tooLong:超过maxlength最大限制,若超过,则显示true
----若加了maxlength属性后,若输入的个数超过maxlength值后,就不会再显示了
function fn(){
alert(this.validity.tooLong);
ev.preventDefault();
}
5)rangeUnderflow:验证数值选择器range的最小值,看当前值是否小于range的最小值,若小于则返回true
6)rangeOverflow;验证数值选择器range的最大值
若超过或低于range的最大值或最小值时,则出现的就是最大值和最小值
7)stepMismatch:验证range的当前值 是否符合min,max及step的规则,不符合返回true
8)customError 不符合自定义验证时返回true,与setCustomValidity()一起使用
-----------setCustomValidity();自定义验证
oText.oninput=function(){
if(this.value=="敏感词"){
this.setCustomValidity("请不要输入敏感词"); //会弹出"请不要输入敏感词"警告
}else{
this.setCustomValidity("");//不成立则清空,否则还会有提示
}
}
function fn(){
alert(this.validity.customError); //弹出true,
ev.preventDefault();
}
9)formnovalidate:关闭验证,不需要验证直接到目的页
<input type="text" required/>
<input type="submit" formnovalidate/>
新的选择器:
1)querySelector:只能选择一个元素
后边可以利用id,标签名,.class名,[属性名=属性值]
var oDiv=document.querySelector(‘div‘);//或是(‘#id‘),也可以是.class名,[属性名=属性值]
2)querySelectorAll:选择一组元素
3)getElementsByClassName:专门获取class元素,括号内直接写名字,不用加点
获取class列表属性:
classList:
--length:class的长度
--add():添加class方法
--remove():删除class方法
--toggle():切换class方法
例如:
<div id="div1" class="box1 box2 box3"></div>
alert(oDiv.classList.length);//或是oDiv.classList,弹出3,
alert(typeof oDiv.classList);类似于数组对象
oDiv.classList.add(‘box4‘);//在浏览器里查看源代码时就会多一个box4
oDiv.classList.remove(‘box2‘);//在浏览器里就会减少box2
oDiv.classList.toggle(‘box2‘);//若是在class列表中有的值,则执行删除操作,若是box4,class里面没有,则执行添加操作
JSON新方法:
1,JSON.parse():把字符串转成json
-----字符串中的属性要严格加上引号
以前的eval()方法:
var str=‘function show(){alert(123);}‘;
eval();
show;()//会弹出123;
使用pase();
var str=‘function show(){alert(123);}‘;
JSON.pase();
show();//不会弹出123,而且会报错
区别:
eval():将字符串转成JS代码,可以解析任何字符串变成JS。安全性低
parse():只能解析JSON形式的字符串变成JS,安全性高
1)并且必须是严格的JSON形式,即必须加引号
例如:
var str=‘{"name":"hello"}‘; //name,hello都需要加上引号
var json=JSON.parse(str);
alert(json.name);
2,stringify():将JSON转换成字符串(而且会转换成严格的字符串,带引号的)
---自动将双引号加上
var json={name:"hello"};//即便声明时未声明成严格的字符串,也会转换成严格的字符串
var str=JSON.stringify(json);
alert(str);
3,对象引用问题:
var a={
name:"hello"
};
var b=a;
b.name=‘hi‘;
alert(a.name);//弹出的是hi,b的修改影响了a,就是对象引用问题
若改成:
var a={
name:"hello"
};
var b={};
for(var attr in a){
b[attr]=a[attr];
}
b.name="hi";
alert(name);//会弹出hello
这是浅拷贝,若是深拷贝(嵌套的)则需要使用递归
然而无论是浅拷贝还是深拷贝,都可以使用stringify方法和parse方法来解决对象引用的问题
浅拷贝:
var a={
name:‘hello‘
};
var str=JSON.stringify(a);//将a转成字符串
var b=JSON.parse(str);//将字符串再转成对象,此时就是一个新的对象了,和以前没关系
b.name=‘hi‘;//这时再对其进行修改
alert(a.name);//弹出的是hello了
深拷贝:
var a={
name:{age:100}//嵌套
};
var str=stringify(a);
var b=JSON.parse(str);
b.name.age=200;
alert(a.name.age);//弹出的是100,
对象的引用,深拷贝,浅拷贝和嵌套,论坛上可以搜到视频,叫对象的引用
3,这两种方法有时也不兼容:若要做到和其他浏览器兼容,可以下载json2.js文件
---http://www.json.org/ 处可以下载,找到javascript下面的json2.js文件下载,然后引用该文件即可
4,data自定义数据
dataset:
------data-name:dataset.name
------data-name-first:dataset.nameFirst
Data数据在jquery mobile中有着重要作用
例:
window.onload=function(){
var oDiv=document.getElementById(‘div1‘);
alert(oDiv.dataset.miaov);//会弹出‘妙为’
}
<div id=‘div1‘ data-miaov=‘妙为‘>div</div>//注意自定义的写法,前边有data
若是再复杂的:
<div id=‘div1‘ data-miaov-all=‘妙为课堂‘>div</div>
alert(oDiv.dataset.miaovAll);//弹出妙为课堂,只要写成名字即可,不用写横杠
JS加载:
1)defer延迟加载:在onload执行前加载,就是页面展开之前
<script src=a.js defer="defer"></script>
<script src=b.js ></script>
<script src=c.js></script>
a.js文件中不加defer属性时,执行顺序是a.js,b.js,c.js加了defer延迟属性后,a.js文件就是组后才加载
2)async异步加载:加载完就触发,有顺序问题(加载完就执行)
Labjs:loading and blocking javascript,现成的异步的库
6,历史管理:控制之前浏览网站的顺序,前进,后退的管理,跳转页面的管理
触发历史管理的方法:
1)通过跳转页面,
2)hash值,就是地址栏内地址末尾的#后边的数据
3)onhashchange:改变hash值来管理
另外历史管理的方法:?????????????????????????
history:
--服务器下运行
--pushState:三个参数:数据 标题(都没实现) 地址(可选)
--注意:网址是虚假的,需在服务器指定对应页面,不然刷新找不到页面
var arr=[];
oInput.onclick=function(){
var arr=randomNum(35,7);
history.pushState(arr,‘‘);
oDiv.innerHTML=arr;
}
--popstate事件:读取数据 event.state
window.onpopstate=function(ev){
oDiv.innerHTML=ev.state;//读取
}
一站式网站:跳转页面时也还是在当前网站,只是改变了hash值,
例:随机选彩票
<script>
window.onload=function(){
var oInput=document.getElementById("input1");
var oDiv=document.getElementById("div1");
oInput.onclick=function(){
oDiv.innerHTML=randomNum(35,7);
}
function randomNum(iAll,iNow){
var arr=[];
for(var i=1;i<=iAll;i++){
arr.push(i);
}
//alert(arr);弹出数组元素
for(var i=0;i<iNow;i++){
newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
//splice():从数组中移除一个或多个数组,必要时会修改原数组,slice()函数则不会修改原数组
return newArr;
}
}
</script>
<input type="button" value="随机选择" id=“input1”>
<div id="div1"></div>
历史管理时:
1)json的应用
2)substring的使用:substring(1)是为了去掉hash值前边的#号;
元素的拖放(1):
draggable属性:
---设置为true,元素就可以拖拽了
---拖出来的是副本,本身不变
拖放事件:
1)拖拽元素事件:事件对象为被拖拽元素
---dragstart:拖拽前触发(注意:要想触发拖拽事件,就要先阻止默认事件obj.ondragover=function(ev){ev.preventDefault();}然后执行释放鼠标事件obj.ondrop=function(ev){ev.preventDefault();。。。。。})
---drag:拖拽前,拖拽结束之间,连续触发(和mousemove有所不同,mousemove是鼠标动则有变化,不懂则无变化,而drag只要是开始了拖拽即便是鼠标静止也有变化)
---dragend:拖拽结束触发
2)目标元素事件:事件对象为目标元素
---dragenter,进入目标元素触发,相当于mouseover
---dragover,进入目标,离开目标之间,连续触发(类似于上边的拖拽元素的drag,只要是进入了目标元素无论静止还是动都有变化)
---dragleave,离开目标元素触发,相当于mouseout
---drop,在目标元素上释放鼠标触发(注意:要想触发drop事件,就必须在dragover当中阻止默认事件,否则在移动到目标元素上面时,鼠标是禁止的标志,阻止默认事件后会变成正常的箭头)
oDiv.ondragover=function(ev){
ev.preventDefault();
}
oDiv.ondrop=function(){//在目标元素上释放鼠标时触发事件
alert(123);
}
事件的执行顺序:drop不触发时的顺序:
dragstart>drag>dragenter>dragover>dragleave>dragend
事件的执行顺序:drop触发时的顺序:
dragstart>drag>dragenter>dragover>drop>dragend
不能释放的光标和能释放的光标是不一样的
拖放:解决火狐下不能拖放的问题
---必须设置dataTransfer对象的setData方法才可以拖拽除图片外的其他标签
如:aLi[i].ondragstart=function(ev){
var ev=ev || event;
ev.dataTransfer.setData(‘name‘,‘hello‘);
}
dataTransfer对象:
setData():设置数据key和value(必须是字符串)
getData():获取数据,根据key值,获取对应的value
effectAllowed
-----effectAllowed:设置光标样式(none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized),none就是空 ‘ ‘
例:aLi[i].ondragstart=function(ev){
var ev=ev || window.event;
ev.dataTransfer.setData(‘name‘,‘hello‘);
ev.dataTransfer.effectAllowed=‘copy‘;//或者是空的 ‘ ‘,等等
}
setDragImage:
-----三个参数:指定的元素,坐标x,坐标y
如setDragImage(oDiv,0,0);//0,0表示光标的位置在被拖元素(此处即div)的左上角
拖动时给光标加上图片:
ev.dataTransfer.setDragImage(oImg,0,0);//会在拖动时光标的旁边出现图片,图片可以先设置成隐藏display:none,然后通过setDragImage方法将图片表现出来
files
----获取外部拖拽的文件,返回一个filesList列表(集合)
----filesList下有个type属性,返回文件类型。
FileReader(读取文件信息):
readAsDataURL():
--参数为要读取的文件对象,将文件读取为DataUrl
onload:
--当读取文件成功完成的时候触发此事件
--this.result,来获取读取的文件数据,如果是图片,将返回base64格式的图片数据
var fd=new FileReader();
fd.readAsDataURL(); //读取地址0
例:上传图片
oDiv.ondrop=function(ev){
ev.preventDefault();
var fs=ev.dataTransfer.files;
if(fs[0].type.indexOf(‘image‘)!=-1){ //如果上传的不是图片类型
var fd=new FileReader();
fd.readAsDataURL(fs[0]);
fd.onload=function(){
var oLi=document.createElement(‘li‘);
var oImg=document.createElement(‘img‘);
oLi.appendChild(oImg);
oUl.appendChild(oLi);

};
}else{
alert("亲,请上传图片类型");
}

}
例:拖拽商品的购物车:
注意:
1)进行拖拽之前,应先将被拖拽元素的拖拽属性设置为draggable="true"
2)购物车中物品增加时,数量累计时,用到去重,去重应使用json来实现
3)appendChild()有剪切功能,所以在实现总金额(放在右下角)时,应该在最后使用appendChild()添加总金额元素,否则总金额元素会将其他元素挤到下边
canvas:画布
1),默认是宽300,高150,后期通过(在canvas标签里)行间样式修改会改变canvas的宽高,和在style里修改不同,style里设置的宽高是较canvas的默认宽高等比例缩放的,而canvas标签里的则是真正宽高
注意标签里设置样式的写法:<canvas id="c1" width="300" height="300"></canvas>
2)不支持canvas的浏览器,就不会显示canvas,但会显示canvas里的内容
3)要想在canvas里画图,需要先获得绘制环境getContext(2d)
getContext(2d);//目前只支持2d的环境
var oC=document.getElementById(‘c1‘);
var oGc=oC.getContext(‘2d‘);
<canvas id="c1"></canvas>
注意:在canvas上画图和在PS上画图是一样的,使用canvas绘图时,若是绘制带有边框的宽50px,高50px的图形,若边框是1px,实际在画布上显示的是2px;因为边框是在50px处从中间向两边延伸出去的,左边0.5个像素,右边0.5个像素,计算机会自动将左边其填充为一个像素,右边填充为一个像素,所以显示出来是两个像素,
因此在设置宽高时,应该使用小数来避免这种状况,如50.5px
canvas上面绘制方块有两种方法:
fillRect(L,T,W,H):默认背景颜色是黑色:oGc.fillRect(50.5,50.5,50,50)
strokeRect(L,T,W,H):带有边框的方块
----默认一像素黑色边框,
lineWidth:线宽度(边框粗细),是一个数值:oGc.lineWidth=10;
设置绘图:
fillStyle:填充颜色(绘制canvas是有顺序的):oGc.fillStyle="red";
strokeStyle:边框颜色,oGc.strokeStyle="blue";
注意顺序:
若是先填充后给边框加颜色,则边框会覆盖在填充的颜色上面
若是先给边框加颜色后填充,则是填充的颜色覆盖在边框颜色上面

beginPath():该方法表示开始绘制
moveTo(X,Y):表示移动到绘制的新目标点,起点,两个参数
lineTo(X,Y):新的目标点,描点,有两个参数横坐标和纵坐标
closePath():该方法表示结束绘制,同时也代表起点和终点相连接
stroke():该方法表示连线
在canvas上面绘制三角形:
oGc.beginPath();
oGc.moveTo(100,100);
OGc.lineTo(200,200);
oGc.lineTo(300,300);
oGc.closePath();
oGc.stroke();//连线
每画一个图形时要分别都加上beginPath()和closePath();
fill():填充图形,默认黑色
rect:矩形区域
clearRect(0 , 0 , oC.width , oC.height):清除画布的区域,oGc.clearRect();有4个参数,X,Y,L,H
利用清除画布功能来实现动画效果
save:保存路径
restore:恢复路径
save()和restore()方法封装到一个图形的外面,从而使该图形居于独有的样式
例:
oGc.save();
oGc.fillStyle=‘red‘;对图形进行填充,如果没有save和restore进行封装,则会将下面的其他图形也填充上
oGc.beginPath();
oGc.moveTo(100,100);
oGc.lineTo(200,200);
oGc.lineTo(300,300);
oGc.closePath();
oGc.fill();//或者是oGc.stroke();
oGc.restore();
translate(X,Y)方法平移是会累加的,所以也要利用save()和restore()将translate()包起来
绘制方块:
oGc.beginPath();
oGc.rect(100,100,100,100);
oGc.closePath();
oGc.stroke()/oGc.fill();//必须有这句话,划线和填充任一种都可以,若没有则不会显示方块
边界绘制:
lineJoin:边界连接点样式
---miter(默认的,直角),----round(圆角),bevel(斜角)
lineCap:端点样式
---butt(默认),round(圆角),square(高度多出为宽一半的值,比默认样式变长了)
offsetLeft和offsetTop:是距离屏幕的距离
插入图片
等图片加载完(声明图片对象,然后执行onload),才能执行canvas操作
----图片预加载:在onload中调用方法
drawImaged(oImg,x,y,w,h)
----oImg:当前图片X,Y:坐标,W,H:宽高
例:
var oC=document.getElementById(‘c1‘);
var oGc=oC.getContext(‘2d‘);
var yImg=new Image();
yImg.onload=function(){
draw(this);
}
yImg.src=‘2.png‘;
function draw(obj){
oGc.drawImage(obj,0,0);
}
设置背景:
createPattern(oImg,平铺方式)
----参数二为:repeat,repeat-x,repeat-y,no-repeat
先设置背景,然后将填充样式设置为平铺的对象即可
例:
window.onload=function(){
var oC=document.getElementById(‘c1‘);
var oGc=oC.getContext(‘2d‘);
var yImg=new Image();
yImg.onload=function(){
draw(this);
}
function draw(obj){
var bg=oGc.createPattern(obj , ‘repeat ‘);
oGc.fillStyle= bg;
oGc.fillRect(0,0,300,300);
}
}
渐变:
createLinearGradient(x1,y1,x2,y2);
---线性渐变:
第一组参数:起始点坐标,第二组参数:结束点坐标
addColorStop(位置,颜色)添加渐变点,起点位置0,终止位置1
createRadialGradient(x1,y1,r1,x2,y2,r2):
---放射性渐变:
---参数:第一个圆的坐标和半径,第二个圆的坐标和半径
例:
var oC=document.getElementById(‘c1‘);
var oGc=oC.getContext(‘2d‘);
var obj=oGc.createLinearGradient(150,100,250,200);
obj.addColorStop(0,‘red‘);
obj.addColorStop(0.5,‘yellow‘);
obj.addColorStop(1,‘blue‘);
oGc.fillStyle=obj; //填充样式为渐变
oGc.fillRect(150,100,100,100);//添加方块
文本:
stokeText(文字,x,y),X,Y为坐标,
----文字边框(给文字加边)
fillText(文字,X,Y)
----文字填充
font---文字大小:‘60px impact‘//impact为默认字体,必须写第二个参数(也可直接为文字内容),
调整文字位置:
textAlign:默认是start跟left一样的效果end right center
textBaseline:文字上下的位置的方式(top,middle,bottom),默认:alphabetic(会显示不出来)
使文字居中measureText()
----measureText(str).width:只有宽度,没有高度(高度默认为字的高度)
例:使文字居中
window.onload=function(){
var oC=document.getElementById(‘c1‘);
var oGc=oC.getContext(‘2d‘);
oGc.font=‘60px impact‘;
oGc.textBaseline=‘top‘; //从顶部开始展示,否则默认会在屏幕外显示,只能看到底部
var w=oGc.measureText(‘妙味课堂‘).width;
oGc.fillText(‘妙味课堂‘,(oC.width-w)/2,(oC.height-60)/2);
}
阴影:shadowOffsetX,shadowOffsetY,默认颜色是黑色透明rgba(0,0,0,0);
高斯模糊值:shadowBlur,阴影颜色:shadowColor
设置阴影是必须设置阴影颜色,否则不会显示
oGc.shadowOffsetX = 10;
oGc.shadowColor = ‘yellow‘;
oGc.shadowBlur = 3 ;
画布画的图形,由像素组成,会有重叠问题,从以下两方面入手解决问题
当图形有重叠部分时有颜色叠加需要使用到合成:
合成:
1)全局阿尔法值:(全局透明度)
----globalAlpha
oGc.globalAlpha=0.5;
2)覆盖合成:(默认后画的图形会覆盖在先画的图形上面,但可以通过下面的方法调整)
---源:新的图形
---目标:已经绘制过的 图形
---globalCompositeOperation属性
属性值有:
1)source-over,destination-over,source-atop(新图形只留下重合的部分)
2)destination-atop source-in destination-in
3)source-out destination-out lighter
4)copy xor
例:
oGc.globalCompositeOperation="source-atop"; //新图形只留下重合的部分
将画布导出为图像:
toDataURL:
---火狐右键可以直接导出图片
该方法可以找到图像的位置:
<style>
#img1{background:white;}
</style>
<script>
var oImg= document.getElementById(‘img1‘);
oImg.src=oC.toDataURL();//注意是oC,不是oGc
</script>
<img src=‘‘ id=‘img1‘>
事件操作:
isPointPath(X,Y):判断是否(在图形)点击范围内,根据坐标系统自动判断是否在点击范围内,并且(若是有多个图形时)它只针对最近一次画出的图形(可以使用封装成函数的方法来实现各有各的行为)
clientX:鼠标当前横坐标
clientY:鼠标当前纵坐标
canvas是画布,所以只能对画布(oC)进行操作,其他的获取元素的方法不好使
canvas画圆:arc(X,Y,R,deg1,deg2,false):x,y为中心点坐标,R为半径,0和deg2为起始弧度,终止弧度(如360*Math.PI/180),弧度公式:弧度=角度*Math.PI/180,false代表顺时针默认的,true为逆时针
例:
oGc.beginPath();
oGc.arc(100,100,50,0,360*Math.PI/180.false);
oGc.closePath();
oGc.fill();//画出的是黑色圆
oC.onmousedown=function(ev){
var ev=ev || event ;
var x=ev.clientX-oC.offsetLeft;
var y=ev.clientY-oC.offsetTop;
if(isPointInPath(x,y)){
alert(123); //若是在点击范围内则弹出123.否则没反应
}
}
---jCanvaScript(canvas中的jquery):http://jcscript.com/
检测圆的碰撞:
两个中心点距离小于半径和即可
跨文档消息通信:
交互方式
iframe:父页面:contentWindow ,子页面:window.top
窗口页:父页面:window.open,子页面:window.opener(同域下)
同域下的窗口通信:
iframe和window.open两种方式
iframe方式:
<input type="button" value="点击改变2.iframe.html的背景色" id="btn"/>
<iframe id="myframe" src="2.iframe.html"></iframe>
<script>
window.onload=function(){
var oBtn=document.getElementById(‘btn‘);
var oMyIframe=document.getElementById(‘myframe‘);
oBtn.onclick=function(){
oMyIframe.contentWindow.document.body.style.background=‘red‘;
}
}
</script>
window.open方式://返回被打开窗口的window对象
<input type="button" value="点击开启新窗口" id=‘btn‘/>
<script>
window.onload=function(){
var oBtn=document.getElementById(‘btn‘);
var newWindow=null;
oBtn.onclick=function(){
newWindow=window.open(‘4.window.open.html‘,‘_blank‘);
}
}
</script>
跨域通信:
当本页面和包含页面不在同一个域名下时,就会有跨域操作安全限制问题,
postMessage相当于中间人,传递消息的媒介,页面自己不能直接改变自己的内容,需要通过postMessage中转
postMessage(消息数据,接收消息的域名):通过该方法给(不同域下的其他页面)另外的窗口发消息,是全局的,用于接收消息的窗口的window对象.postMessage(消息数据,接收消息的域名)//注意接收消息的域名要以http://www.b.com的格式,要带上协议名http://
接收事件:
message:当窗口接收到通过postMessage发送过来的数据的时候触发
window.addEventListener(‘message‘,function(){ },false);
ev.data:发送的数据
ev.origin用于分辨消息到底是哪个域发过来的,发送消息的域
父级页面可以操作子级页面(使用contentWindow),子级页面也可以操作父级页面(使用parent):
如果当前页面是顶级,没有被其他页面所包含,那么parent就是当前页面的window对象,那么如果被包含了,则parent就是包含当前页面的父级页面的window对象
oBtn.onclick=function(){
parent.document.body.style.background="green";
}
window:当前窗口,
parent:父级窗口,
top(最顶层对象):顶级窗口
同域下,父级子级间相互操作会用到window.open,window.opener:通过window.open方法打开当前页面的窗口window
oBtn.onclick=function(){
window.opener.document.body.style.background=‘green‘; }
同域下:标准浏览器(包括IE)下,XMLHttpRequest对象已经是升级版本,支持了更多的特性,可以跨域了,但是,如果想实现跨域请求,还需要后端的相关配合才可以,
跨域下:XDomainRequest:IE如果想实现跨域请求,则需要使用另外一个对象去实现
ajax实现无刷新上传下载:(以前通过flash实现)
进度事件:
upload.onprogress:上传,监听
FormData对象
ev.total(已发送的总量),ev.loaded(待发送的总量)
onprogress:下载
1,<input type="file" id="myFile"/><input type="button" id="btn" value="上传"/>
oBtn.onclick=function(){
alert(oMyFile.files); //file控件中选择的文件列表对象,不能用oMyFile.value;
}
file控件选中的文件列表对象:形似 0:[ object File]
onload和onloadend的区别:
onload:加载完后正确
onloadend:加载完,但不一定正确
通过ajax发送对象首先要创建ajax对象:
例:利用ajax将oMyFile.files[0]数据发送给后端:
var xhr=new XMLHttpRequest();
xhr.onload=function(){}
websocket:
互联网协议:
http://www.ruanyifeng.com/blog/2012/05/internet_protocol_suite_part_i.html
TCP/IP协议:
---定义了电子设备如何连入互联网,以及数据在它们之间传输的标准(如何传输)
---传输数据(协议)类型:Email,www,FTP
HTTP协议:
---浏览器和万维网服务器之间互相通信的规则
HTTP协议特点:
功能很强大
采用请求,响应模式,单向通信(先请求再发送,不请求不发送)
短链接,响应完成连接就断开
实时web交互
股票,聊天室,网游等应用
如何实现实时应用?服务器推送
websocket则和HTTP协议相反:
什么是websocket?
基于TCP的双向的,全双工的数据连接
--双向的:客户端,服务器端
--全双工:数据的发送与接收,两者同步进行(实时性强)
建立socket应用?
--服务器必须支持web socket
--Nodejs的简介:
Ryan Dahl基于GoogleV8引擎创建的一套用来编写高性能网络服务器的EcmsScript工具包
--Nodejs:用js去写服务器应用
javascript针对浏览器编程,nodejs针对服务器编程;
nodejs的官网:nodejs.org,到官网下载相应版本即可
安装完后--》打开命令行输入node,回车---》若没提示有错误信息即安装成功,若提示xxx不是内部命令也不是可用的批处理文件等,可能是没设置环境变量,
apache:是一种服务器
Node.js:
1)安装node.js
2)转到项目目录
3)运行node 文件名.js
4)http服务器的创建
5)安装websocket模块npm install socket.io
6)websocket服务的创建
上传文件使用post方式:因为get对数据量有限制
通过FormData构建提交数据
进度事件:
--upload.onprogress:上传
--FormData对象
--ev.total(要发送的总量),ev.loaded(已发送的总量)
--onprogress:下载
离线存储:
applicationCache:
搭建离线应用程序:
1:服务器设置头信息:
---AddType text/cache-manifest.manifest
2,html标签如:
--manifest="xxxxx.manifest" :<html manifest="xxxx.manifest"></html>,.manifest文件最好是英文名。否则会出错
3,写manifest文件:离线的清单列表
--先写:CACHE MANIFEST:表示在它下面可以离线存储,包括字符串,图片等
--FALLBACK:第一个网络地址没获取到,就走第二个缓存的
--NETWORK:无论缓存中存在与否,均从网络获取。
web workers:可以产生多线程的作用,使执行效率提升,
什么是worker?
JS 的单线程(放入UI队列的个数,利用定时器解决)
可以让web应用程序具备后台处理能力,对多线程的支持非常好
Worker API :
new Worker(‘后台处理的JS地址‘)
利用postMessage传输数据
inportScripts(‘导入其他JS文件‘)
web worker运行环境中的js文件并非平时的js文件,而是后台的开的进程的文件,,所以有些熟属性,方法会受到限制,如下是worker环境下可以使用的方法及属性:
navgator : appName , appVersion , userAgent, platform
location:所有属性都是只读的
self:指向全局worker对象,
所有的ECMA对象,Object , Array , Date
XMLHttpRequest 构造器
setTimeout 和 setInterval 方法
close方法,离开停止worker运行
importScripts 方法
其他功能(用的不多):
内容编辑属性:contenteditable="true"
语音输入:<input type="text" x-webkit-speech/> //语音只在(-webkit内核)safari/chrome下支持,
桌面提醒:(由以下一段代码实现)
window.webkitNotifications.requestPermission();
statue = window.webkitNotifications.checkPermission();
var notification=window.webkitNotifications.createNotification("[imgurl]","Title","Body");
notification.show(); //调用该函数,若是在页面中声明一个按钮,也可以利用按钮点击时再调用该函数
地理位置:
经线:南北极的连接线
纬线:东西的连接线
位置信息从何而来:
IP地址
GPS :全球定位系统
WIFI无线网络
基站
LBS:基于地理信息的应用
地理位置对象:navigator.geolocation
--单次定位请求(只能请求一次):getCurrentPosition(请求成功时调用的函数,请求失败时调用的函数,数据收集方式)
例:
window.onload=function(){
var oInput=document.getElementById(‘input1‘);
var oT=document.getElementById(‘t1‘);
oInput.onclick=function(){
navigator.geolocation.getCurrentPosition(function(){
oT.value+=‘经度:‘+position.coords.longitude+‘\n‘;
},function(err){ alert(err.code);},{ enableHighAccracy : true , timeout : 5000, maximumAge : 5000 }); //超时5s,位置可缓存最大事件5000
}
}
--请求成功函数:
经度:coords.longitude
纬度:coords.latitude
准确度:coords.accuracy
海拔:coords.altitude
海拔准确度:coords.altitudeAcuracy
行进方向:coords.heading
地面速度:coords.speed
时间戳(当前时间):new Date(position.timestamp)
请求失败函数(有一个参数):
失败编号:code
0:不包括其他错误编号中的错误
1:用户拒绝浏览器获取位置信息
2:尝试获取用户信息,但失败了
3:设置了timeout值,获取位置超时
数据收集:json的形式
enableHighAcuracy:更精确的查找,默认false
timeout:获取位置允许最长时间,默认infinity
maximumAge:位置可以缓存的最大事件,默认为0;
--多次定位请求:watchPosition(像setInteval)
移动设备有用,位置改变才会触发
配置参数:frequency更新的频率
--关闭更新请求:clearWatch(像clearInterval)
百度地图API :
<script src="http://api.map.baidu.com/api?v=1.3"></script>
创建基于地图的应用
本地存储:
Cookie:
数据存储到计算机中,通过浏览器控制添加与删除数据
特点:
存储限制:
--域名100个cookie,每组值大小4kB(量不是很多)
客户端,服务器端,都会请求服务器(头信息)
同一浏览器下,页面间的cookie是共享的
HTML5的本地存储:
Storage:
sessionStorage:
--session临时会话,从页面打开到关闭的时间段
--窗口的临时存储,页面关闭,本地存储消失,即临时性存储;在当前页面设置数据后,打开其他页面则获取不到了,即不共享;
localStorage:
--永久存储(可以手动删除数据),关闭后重新打开仍可获取到,即永久性存储;打开其他页面仍可获取到,即可共享的;
特点:
存储量限制(5M),大于cookie
客户端完成,不会请求服务器处理
sessionStorage数据(针对当前窗口的,)是不共享的(临时性存储),localStorage可共享的(永久性存储);
Storage API:  是cookie的一个升级,cookie需要我们自己去封装函数,而(本地存储)strage API自带函数;
1)setItem():
--设置数据,key/value类型,类型都是字符串;setItem(key , value);
--可以用获取属性的形式操作
2)getItem();  
--获取数据,通过key来获取到相应的value;getItem(key);
3)removeItem(): 
--删除数据,通过key来删除相应的value;removeItem(key);
4)clear():
--删除全部存储的信息
例:
<input type="button" value="设置"/>
<input type="button" value="获取"/>
<input type="button" value="删除"/>
<input type="text" />
<script>
window.onload=function(){
var aInput=document.getElementsByTagName("input");
aInput[0].onclick=function(){
//window.sessionStorage.setItem(‘name‘,aInput[3].value);
window.localStorage.setItem(‘name‘,aInput[3].value);  //先在输入框中输入,然后点击设置,即内容设置成功
};
aInput[1].onclick=function(){
//alert(window.sessionStorage.getItem(‘name‘));
alert(window.localStorage.getItem(‘name‘));  //设置成功后,点击获取按钮,即可获取到内容
}
aInput[2].onclick=function(){
window.localStorage.removeItem(‘name‘);

//只删除一个,点击删除,即可删除所设置的内容,再点击获取,就显示获取到的是null
window.localStorage.clear(); //删除全部数据
}
}
</script>

例如有时填写大量的注册信息时,可以使用本地存储storage ;

 1 <script>
 2     window.onload=function(){
 3       var oT=document.getElementById("t1");
 4       var aInput=document.getElementsByTagName("input");
 5      //打开页面时先判断信息是否存在,
 6      if(window.localStorage.getItem(name)){
 7         aInput[0].value=window.localStorage.getItem(name);
 8       }
 9      if(window.localStorage.getItem(sex)){
10           for(int i=1;i<aInput.length;i++){
11                   if(aInput[i].value==window.localStorage.getItem(sex)){
12                        aInput[i].checked=true;
13                 }
14             }
15  
16      }
17      if(window.localStorage.getItem(content)){
18 
19         oT.value=window.localStorage.getItem(content);
20      }
21      //在页面关闭时,设置本地存储,所以时onunload
22       window.onunload=function(){
23         if(aInput[0].value){
24               window.localStorage.setItem(name, aInput[0].value    );
25         }
26          for(int i=1;i<aInput.length;i++){
27             if(aInput[i].checked== true){ //注意此处使用checked
28              window.localStorage.setItem(sex, aInput[i].value);
29             }
30         }
31          if(oT.value){
32               window.loaclStorage.setItem(content , oT.value);
33          }
34       }
35  }
36 </script>
37 <body>
38     <p>
39         用户名:<input type="text" />
40     </p>
41     <p>
42        性别:<input type="radio" name="sex" value="男"/>43                 <input type="radio" name="sex"  value="女"/>44     </p> 
45     
46     内容: <textarea id="t1"></textarea>
47 </body>         

HTML5 学习总结

标签:服务器   延迟   商品   编写   oda   作用   互操作   响应   sla   

原文地址:http://www.cnblogs.com/RitaLee/p/6103833.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!