HTML5 学习总结

HTML:

1，

注意：在 HTML 中这些 class 名称如何排序是无所谓的。

然而，在 <style> 部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。

浏览器读取 CSS 的顺序是从上到下，这意味着，在发生冲突时，浏览器会使用最后的 CSS 声明。

注意：s声明的类选择器在上面还是下面是无所谓的，因为 id 属性总是具有更高的优先级，id>class，但是行内样式将覆盖style 中定义的所有 CSS。行内样式>id>class;

但是。很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以使用!important。

color: pink !important; //使用！important关键字，来避免覆盖的情况；

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="#">连接</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.οninput=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.οnlοad=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.οnclick=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.οnlοad=function(){
var oInput=document.getElementById("input1");
var oDiv=document.getElementById("div1");
oInput.οnclick=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.οndragοver=function(ev){ev.preventDefault();}然后执行释放鼠标事件obj.οndrοp=function（ev）{ev.preventDefault();。。。。。}）
---drag:拖拽前，拖拽结束之间，连续触发（和mousemove有所不同，mousemove是鼠标动则有变化，不懂则无变化，而drag只要是开始了拖拽即便是鼠标静止也有变化）
---dragend:拖拽结束触发
2）目标元素事件：事件对象为目标元素
---dragenter，进入目标元素触发，相当于mouseover
---dragover，进入目标，离开目标之间，连续触发（类似于上边的拖拽元素的drag，只要是进入了目标元素无论静止还是动都有变化）
---dragleave，离开目标元素触发，相当于mouseout
---drop，在目标元素上释放鼠标触发（注意：要想触发drop事件，就必须在dragover当中阻止默认事件，否则在移动到目标元素上面时，鼠标是禁止的标志，阻止默认事件后会变成正常的箭头）
oDiv.οndragοver=function(ev){
ev.preventDefault();
}
oDiv.οndrοp=function(){//在目标元素上释放鼠标时触发事件
alert(123);
}
事件的执行顺序：drop不触发时的顺序：
dragstart>drag>dragenter>dragover>dragleave>dragend
事件的执行顺序：drop触发时的顺序：
dragstart>drag>dragenter>dragover>drop>dragend
不能释放的光标和能释放的光标是不一样的
拖放：解决火狐下不能拖放的问题
---必须设置dataTransfer对象的setData方法才可以拖拽除图片外的其他标签
如：aLi[i].οndragstart=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].οndragstart=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.οndrοp=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.οnlοad=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.οnlοad=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.οnlοad=function(){
var oC=document.getElementById('c1');
var oGc=oC.getContext('2d');
var yImg=new Image();
yImg.οnlοad=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.οnlοad=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.οnmοusedοwn=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.οnlοad=function(){
var oBtn=document.getElementById('btn');
var oMyIframe=document.getElementById('myframe');
oBtn.οnclick=function(){
oMyIframe.contentWindow.document.body.style.background='red';
}
}
</script>
window.open方式：//返回被打开窗口的window对象
<input type="button" value="点击开启新窗口" id='btn'/>
<script>
window.οnlοad=function(){
var oBtn=document.getElementById('btn');
var newWindow=null;
oBtn.οnclick=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.οnclick=function(){
parent.document.body.style.background="green";
}
window：当前窗口，
parent：父级窗口，
top（最顶层对象）：顶级窗口
同域下，父级子级间相互操作会用到window.open，window.opener：通过window.open方法打开当前页面的窗口window
oBtn.οnclick=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.οnclick=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.οnlοad=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.οnlοad=function(){
var oInput=document.getElementById('input1');
var oT=document.getElementById('t1');
oInput.οnclick=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.οnlοad=function(){
var aInput=document.getElementsByTagName("input");
aInput[0].οnclick=function(){
//window.sessionStorage.setItem('name',aInput[3].value);
window.localStorage.setItem('name',aInput[3].value); //先在输入框中输入，然后点击设置，即内容设置成功
};
aInput[1].οnclick=function(){
//alert(window.sessionStorage.getItem('name'));
alert(window.localStorage.getItem('name')); //设置成功后，点击获取按钮，即可获取到内容
}
aInput[2].οnclick=function(){
window.localStorage.removeItem('name');

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

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

1 <script>
2 window.onload=function(){3       varoT=document.getElementById("t1");4       varaInput=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(inti=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(inti=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         用户名：<inputtype="text" />
40     </p>
41     <p>
42        性别：<inputtype="radio"name="sex"value="男"/>男43                 <inputtype="radio"name="sex"value="女"/>女44     </p>
45
46     内容： <textareaid="t1"></textarea>
47 </body>

2，本地存储事件的一些属性：

1）当数据有修改或删除的时候，就会触发storage事件；

2）在对数据进行改变的窗口（对象）上是不会触发的，就是说效果会呈现在它共享的页面上，而不是数据改变的当前页面上；

3）Key：修改或删除的key值，如果调用clear（），key为null；

4）newVlaue：新设置的值，如果调用removeStorage()，key为null；

oldValue：调用改变前的值；

5）storageArea：当前的storage对象；

6）url:触发该脚本变化的文档的url；

7）session同窗口才可以；

3，按钮能否点击：利用属性disabled；

能点击：disabled=false;

不能点击：disabled=true；

4，有时在嵌套的事件中，要想使用this关键字，要注意this指向的是哪个被选的元素，如果指向的是外层的事件的被选元素，则应该将this重新赋给一个变量如This（在外层和内层之间声明，var This=this），目的是和内层的this指向加以区分；以免报错；

5，音频标签：audio，视频标签video，单独插入到页面后不会有可以播放的效果，必须加上control属性，才会显示用户控制播放等效果；

6，source标签：自动识别兼容情况；可通过source标签在video或audio标签内部添加多个音视频来源，当浏览器对某个文件不兼容时，就会使用另外一个文件；

7，视频容器：包括音频，视频，这类容器文件，类似于压缩了一组文件（音频轨道，视频轨道，元数据，标题，封面，字幕等）；

格式有: .avi , .mp4 , .ogv , .flv , .mkv等；

8，编解码器：原始的视频容器比较大，添加需编码，播放需解码；

音频编解码器，视频编解码器，有免费，有收费的；

9，媒体元素：用来控制音视频文件播放的相关属性；var oA=document.getElementById('a1');

controls：显示或隐藏用户控制界面，如果没有controls默认就是隐藏；

autoplay：设置是否自动播放，没有则默认不是自动播放；

loop：是否是循环播放，没有则不是循环播放；

currentTime：开始播放到现在的时间，读取（设置）播放时间，设置从什么位置开始播放，对象.currentTime=60;//从一分钟处开始；

duration：媒体的总时间（只读）;如 oA.duration

volume：0.0-1.0的音量相对值；控制音量，0是静音了，1是最大音量； oA.volume;

muted:是否静音； oA.muted;

autobuffer：开始时是否缓冲加载；autoplay的时候，忽略此属性；

paused：媒体是否暂停（只读）； oA.paused

ended：媒体是否播放完毕（只读）；oA,ended

error：媒体发生错误的时候，返回的错误代码（只读）；oA.error ,没有错误返回null

currentSrc:以字符串的形式返回媒体地址；（只读）； oA.currentSrc

play():媒体播放；

pause（）：媒体暂停；

load（）：重新加载，如果对媒体文件的位置src属性修改了，则需要再调用load方法，重新加载，效果才会显示；

例：通过鼠标移入移出控制媒体播放：

var oV=document.getElementById('v1');

oV.οnmοuseοver=function(){

　　this.play();　　

}

oV.οnmοuseοut=function(){

this.pause();

}

load方法实例：

</video>

var oButton=document.getElementById('btn1');

var aS=docment.getElementsByTagName('source');

var oV=document.getElementById("v1");

oButton.οnclick=function(){

　　aS[0].src="cc.ogv";

　　aS[0].src="dd.mp4";

　　oV.load(); //不重新加载的话，页面不会有变化

}

8，媒体添加的事件：

如在播放结束（ended）时添加事件：

oV.addEventListener('ended' , function(){

　　alert(123); //播放结束时弹出123

},false);

9，video的额外特性：

poster：视频播放前的预览图片；

window.onload = function() {
　　var oV = document.getElementById('v1');
　　oV.poster = "images/1.jpg";
}

width，height：设置视频的尺寸；

videoWidth,videoHeight:视频的实际尺寸（只读）；

10，写导航条时，ul{margin:0;padding:0;list-style:none;} li{display:inline;}

或者是li{float:left;} 不过显示效果不一样；

11，h5中的实现视频全屏的函数，element.mozRequestFullScreen(); //记得不同的浏览器要加不同的前缀；

或者是手动实现：将视频宽高设置成与浏览器可视化窗口的宽高相同；

12，自制视频播放器：

1 <!doctype html>
2 <htmllang="en">
3 <head>
4     <metacharset="UTF-8">
5     <title>自制播放器</title>
6     <styletype="text/css">
7 *{margin:0;padding:0;}
8 #div1{width:300px;height:20px;background:#666;overflow:hidden;position:relative;}
9 #div2{width:60px;height:20px;background:red;position:absolute;left:0;top:0;}
10 #div3{width:300px;height:10px;background:#ccc;overflow:hidden;position:relative;top:20px;}
11 #div4{width:60px;height:10px;background:yellow;position:absolute;left:240px;top:0;}
12     </style>
13     <scripttype="text/javascript">
14 window.onload=function() {15         varoV=document.getElementById('v1');16         varaInput=document.getElementsByTagName('input');17         vartimer=null;18         varoDiv1=document.getElementById('div1');19         varoDiv2=document.getElementById('div2');20         varoDiv3=document.getElementById('div3');21         varoDiv4=document.getElementById('div4');22
23         vardisX=0;//拖拽距离
24         vardisX2=0;25 oDiv2.onmousedown=function(ev){26             varev=ev||window.event;27 disX=ev.clientX-oDiv2.offsetLeft;28 document.onmousemove=function(ev){29                 varev=ev||window.event;30                 varL=ev.clientX-disX ;31                 if(L<0) {32 L=0;33 }else if(L>oDiv1.offsetWidth-oDiv2.offsetWidth ){34 L=oDiv1.offsetWidth-oDiv2.offsetWidth;35                     //注意这个对L 值范围的判断，最小是0，最大是div1和div2的offsetWidth的差值;
36 }37 oDiv2.style.left=L+'px';//注意像素单位
38                 //计算拖动比例
39                 varscale=L/( oDiv1.offsetWidth-oDiv2.offsetWidth);
40                 //通过比例得到拖动时长
41 oV.currentTime=oV.duration*scale;42                 //再次调用显示的当前播放时长
43 nowTime();44 };45 document.onmouseup=function(){46 document.onmousemove= null;47 };48             return false;49 }50 oDiv4.onmousedown=function(ev){51             varev=ev||window.event;52 disX=ev.clientX-oDiv4.offsetLeft;53 document.onmousemove=function(ev){54                 varev=ev||window.event;55                 varL=ev.clientX-disX ;56                 if(L<0) {57 L=0;58 }else if(L>oDiv3.offsetWidth-oDiv4.offsetWidth ){59 L=oDiv3.offsetWidth-oDiv4.offsetWidth;60                     //注意这个对L 值范围的判断，最小是0，最大是div1和div2的offsetWidth的差值;
61 }62 oDiv4.style.left=L+'px';//注意像素单位
63                 //计算比例
64                 varscale=L/(oDiv3.offsetWidth-oDiv4.offsetWidth);
65                 //通过比例得到音量大小
66 oV.volume=scale* 1;67
68 };69 document.onmouseup=function(){70 document.onmousemove= null;71 };72             return false;73 }74 aInput[0].onclick=function(){75             if(oV.paused) {76 oV.play();77                 this.value="暂停";78 nowTime();79 timer=setInterval(nowTime,1000);//注意定时器的写法；
80 }else{81 oV.pause();82                 this.value="播放";83 clearInterval(timer);84 }85
86 }87 aInput[2].value=changeTime(oV.duration);88         functionchangeTime(iNum){89 iNum=parseInt(iNum);90             //注意计算时间
91             variH=toZero(Math.floor(iNum/3600));
92             variM=toZero(Math.floor(iNum%3600/60));
93             variS=toZero(Math.floor(iNum%60));94             returniH+':'+iM+':'+iS;95 }96         functiontoZero(num){97             if(num<=9) {98                 return '0'+num;99 }else{100                 return ''+num;101 }102 }103         functionnowTime(){104 aInput[1].value=changeTime(oV.currentTime);105             varscale=oV.currentTime/oV.duration;
106 oDiv2.style.left=scale* 240+'px';107 }108 aInput[3].onclick=function(){109             if(oV.muted) {110 oV.volume=1.0;111                 this.value="静音";112 oV.muted=false;113 }else{114 oV.volume=0.0;115                 this.value="取消静音";116 oV.muted=true;117 }118 }119 aInput[4].onclick=function(){120 oV.mozRequestFullScreen();121             //oV.webkitRequestFullScreen();
122             //oV.mzRequestFullScreen();
123 }124 }125     </script>
126 </head>
127 <body>
128     <videoid="v1">  <!--自带的controls属性就不写了-->
129         <sourcesrc="Intermission-Walk-in_512kb.mp4"></source>
130     </video><br/>
131     <inputtype="button"value="播放" />
132     <inputtype="button"value="00:00:00" />
133     <inputtype="button"value="00:00:00" />
134     <inputtype="button"value="静音" />
135     <inputtype="button"value="全屏" />
136     <divid="div1">
137         <divid="div2"></div>
138     </div>
139     <divid="div3">
140         <divid="div4"></div>
141     </div>
142 </body>
143 </html>

转载于:https://www.cnblogs.com/RitaLee/p/6103833.html

HTML5 学习总结相关推荐

HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
html和html5学习
html和html5学习 chorme.safari中的input或textarea 替换元素和非替换元素 html超链接(a)详细讲解 html5新增及删除标签 html表格图片加a ...
HTML5学习笔记（一）：HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
html5该怎么样学习？零基础入门HTML5学习路线
纵观近几年HTML5的发展可以看出,HTML5开发持续上涨,腾讯.微软.谷歌等国际互联网企业都将HTML5的研发与使用放在了重要的地位.目前全球有超过十亿台手机浏览器支持HTML5,而微信小程序的开放 ...
Html5学习笔记1 元素标签属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
HTML5 学习笔记
HTML5 学习笔记前言该学习笔记的相关学习视频:[狂神说Java]HTML5完整教学通俗易懂目前笔记只有简单的例子和框架,将来在实践中会进一步学习和补充内容目录 HTML5 学习笔记前言 ...
html5 制作会转的风扇,HTML5学习第5天[乱撞的球]可以听到风扇声的哟
HTML5学习第5天[乱撞的球] body{ font-family: 微软雅黑; } body,h1{ margin:0; } canvas{ display:block;margin-left: ...
html5 学习_5分钟内学习HTML
html5 学习 by Eric Tirado 埃里克·蒂拉多(Eric Tirado) 5分钟内学习HTML (Learn HTML in 5 minutes) 快速教程可帮助您开始构建网站. (A ...
HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
html5学习开发指南
本文发表于CSDN<程序员>杂志2016年8月期,未经允许不得转载! 概述: 随着移动互联网的兴起,前端开发工程师的岗位也随着兴起.前端工程师不仅在用户和产品之间扮演着越来越重要的角色,而 ...

HTML5 学习总结

HTML5 学习总结相关推荐

最新文章

热门文章