首页 > 代码库 > HTML5 学习总结
HTML5 学习总结
1，h5比原来的h4.0版本的页面头部更为简化，
<!doctype html>
<meta charset="utf-8"/>
sublime中快速生成格式的快捷键是先输入！再按Tab键即可生成h5格式
2,语义化标签：
<header></header>：页眉，页面的头部，或板块的头部
<footer></footer>：
<nav></nav>：导航，形式宽松，不像ul，
例如：
<nav>
<a href="http://www.mamicode.com/#">连接</a><a href="http://www.mamicode.com/#">连接</a>
</nav>
<nav>
<p><a href="http://www.mamicode.com/#">妙味课堂</a></p>
<p><a href="http://www.mamicode.com/#">妙味课堂</a></p>
</nav>
<nav>
<h2>纯粮食白酒</h2>
<ul>
<li><a href="http://www.mamicode.com/#">5斤</a></li>
<li><a href="http://www.mamicode.com/#">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="http://www.mamicode.com/javascript">javascript</option>
<option value="http://www.mamicode.com/css3">csss3</option>
<option value="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/当前值"/>
<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="http://www.mamicode.com/提交"/>
<input type="submit" value="http://www.mamicode.com/保存到草稿箱" 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.valuehttp://www.mamicode.com/=="敏感词"){
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=http://www.mamicode.com/a.js defer="defer"></script>
<script src=http://www.mamicode.com/b.js ></script>
<script src=http://www.mamicode.com/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="http://www.mamicode.com/随机选择" 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=http://www.mamicode.com/‘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=http://www.mamicode.com/oC.toDataURL();//注意是oC，不是oGc
</script>
<img src=http://www.mamicode.com/‘‘ 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="http://www.mamicode.com/点击改变2.iframe.html的背景色" id="btn"/>
<iframe id="myframe" src="http://www.mamicode.com/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="http://www.mamicode.com/点击开启新窗口" 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="http://www.mamicode.com/上传"/>
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="http://www.mamicode.com/设置"/>
<input type="button" value="http://www.mamicode.com/获取"/>
<input type="button" value="http://www.mamicode.com/删除"/>
<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 学习总结