【1.插件调用】
1.先把js和css文件引入到自己的页面中，具体引入什么文件由人家的demo案例决定。
2.把各种图片的路径修改正确，并且把需要的图片拿到自己文件夹中
3.调用人家js代码的时候，务必放在jq文件和js文件的后面 还要注意，代码放在页面最上面的时候，不要忘记加入口函数（$(function(){} 或者 window.onload=function(){})）。
【2.五大浏览器厂商】
ie
谷歌
火狐
苹果
欧朋
【3.html5文件】
头部直接写 <!doctype html> 这个可以向下兼容所有的html版本
关于字符编码设置 <meta charset="utf-8">
【4.关于语义化】
什么是搜索引擎：就是百度、谷歌；
搜索引擎机器人和搜索引擎蜘蛛 都是说的一个东西
语义化：在使用html写代码的时候要注意一件很重要的事情
如果你要写一个文章那么就用p标签，如果写logo就用h1标签等等等 这些都叫语义化的html代码；至于html5的语义化会更加的强,是头部就用header标签是底部就用footer标签等等等
因为搜索引擎更喜欢语义化的网站！你的网站语义化好，就会排名靠前；
【5.关于html5新标签】
header 头部标签
nav 导航标签
article 文章内容标签
section 代表的是块标签 （它的语义化比div要大）
aside 侧边栏标签
hgroup 标题组标签
figure 代表媒体内容
figcaption 标记媒体标签的标题
footer 底部标签
【6.视频标签】
video标签来控制视频的播放：
书写格式1：<video src="1.mp4"></video>
格式2： <video> <source src="1.mp4"><source src="1.webm"></source> </video>
控制视频标签的几个属性：
autoplay="autoplay" 自动播放
controls="controls" 控制条
loop="loop" 轮播
preload="preload" 边加载边播放
【7.用按钮来控制视频的播放暂停】
我们的html5的video标签，如果想被开启，那么要使用一个play()方法，这里的play是js的原生方法，我们不能使用jq对象去加play（）方法，必须要经过转化之后才能使用。
暂停：pause()这个也是js的原生方法 只能是dom对象才能使用；
【1.关于api】
定义：就是应用程序说明书。
视频api：有关于视频标签的一系列的方法和属性
$('button').attr('disabled',true);这样代表设置的按钮不可以被点击 如果想能被点击的话 设置值为fasle即可
【2.关于事件冒泡】
盒子嵌套的情况下 会触发一种叫做事件冒泡的东西 mouseover和mousout 会出现事件冒泡的情况 解决的办法有1: mouseenter mouseleave 2:用hover也可以解决 其实hover本身是mouseEnter和mouseleave的结合体
【3.键盘事件】
$(window).keydown(function(e){
e.keyCode 这样可以知道用户点击的键盘是哪一个按钮
e.shiftKey 代表用户点击的是shift按键
如果想要判断组合键：
if(e.shiftKey && e.keyCode ==49){//49代表按键1
}
})
【4.meter温度计标签】
可以设置的一些标签属性值：
value 代表当前值
min 代表最小值
max 代表最大值
low 代表较小值
high 代表较大值
【5.进度条标签】
progress 有两个必须的值 value 当前、 max 最大
【6.新增的表单元素】
placeholder 默认值
autofocus 默认获取焦点
input: email 判断输入框是不是一个邮箱格式
input: date 可以选择日期
input: number 可以选数字
input：color 可以选颜色
input:range 滑动范围
input:search 输入框中有小叉子 可以清空内容
<select>
<optgroup label="这里是分组的标题">
<option>这里是内容</option>
</optgroup>
</select>
【7.change事件】
当数值改变的时候触发的事件:
$('inp').change(function(){
这里执行事件的代码
})
【1.css3圆角属性】
border-radius: 左上 右上 右下 左下;
【2.css3投影属性】
box-shadow: x轴偏移 y轴偏移 羽化程度 颜色 设置内阴影;
例：box-shadow: 0 0 30px red inset; 30px的羽化 红色 内阴影
注意：如果不写颜色值 默认色值是文字的色值
【3.css3透明度】
background: rgba(255,255,255,这里是透明度的值);
例：background: rgba(255,255,255,0.3);代表透明度是30%
【4.文字投影】
text-shadow: x轴 y轴 羽化 颜色;
例：text-shadow: 0 0 3px #fff;
注意：如果你的谷歌浏览器出现显示错误的问题 只需要加一个font-weight: bold;属性即可
【5.css3新增选择器】
:nth-of-type(索引值从1开始) 选择第几个元素
:first-child 选择第一个元素
:last-child 选择最后一个元素
not() + ~ 与jq用饭完全相同
:after() 在元素之后添加内容
:before() 在元素之前添加内容
【6.关于after和before伪类】
应用的地方：1.clearfix(请参考baseCss.css文件)
2.可以动态的添加内容
注意：不管是after还是before他们的值 必须要有content:'' 哪怕里面什么都不写 也要有这个属性值，这时候生成的盒子和行内的，如果你想让它拥有宽高，那么必须要加display: block; 转化为块元素
面试题： ::after ::before 这是什么？
答：这是css3的伪元素 它们和一个冒号的区别是：一个冒号是伪类的写法，两个冒号是css3伪元素的写法 只是写法不同而已。
【7.浏览器前缀】
五大浏览器厂商内核：
火狐 -moz-
谷歌 -webkit-
苹果 -webkit-
欧朋 -o-
IE -ms-
-moz-border-radius: ;
-webkit-border-radius: ;
-o-border-radius: ;
-ms-border-radius: ;
border-radius: ;
注意：不加修饰的代码要写在最后位置
【8.转化模块】
transform: rotate(度数); 旋转
例： transform: rotate(30deg); deg是度数的意思
transform: scale(x轴,y轴); 缩放
例： transform: scale(0.5,0.5); 水平和垂直缩放0.5倍 里面如果有文字 也会相应的缩放
transform: traslate(x轴的距离,y轴的距离); 控制元素位置
例： transform: translate(200px,200px); 水平和垂直都移动200像素
【9.过度模块】
书写步骤：
1.先按照正常的来写默认样式
2.写hover之后的样式
3.在默认样式中，写我们需要过度的代码
例：
div{ width: 300px; height: 300px; transition: width 1s,height 1s; }
div:hover { width: 500px; height: 500px; }
注意：transition必须写所有前缀，如果单独设置多个属性需要过度的话，要用逗号分隔；如果不想重复的写多个属性值，只要写all 2s 就可以设置所有的hover中的代码都执行过度动画效果；
注意：transform 如果要设置多个属性的话 中间用空格分开就好了
例： transform: scale(1.2,1.2) rotate(360deg);
【10.动画模块】
1.先选中要做动画的元素，直接在里面写animation 名字 时间; 例： animation gogogo 3s;
2.换新的一行写
写法1：@keyframes 动画名 from{初始时候的动画} to{结束时候的动画} }
写法2：@keyframes 动画名 0%{百分之0的时候的动画} 10%{百分之10的时候的动画}。。。。。可以写无数个 }
例：@keyframes gogogo{
写法1：from { left: 0px; }
to { left: 500px; }
写法2：0% { left: 0px; }
10% { background: pink; }
50% { background: pink; }.......
}
注意：如果想让动画无限次播放 infinite
如果想逆向播放的话 alternate
【11.运动速度】
匀速： linear
逐渐变慢 ease
加速 ease-in
减速 ease-out
先加速后减速 ease-in-out
transition: all 3s ease-out 2s; 最后这个2s是延迟动画的意思
注意：如果想让一个方块变成圆 加border-radius: 50%;
transform:scale(1.3) 这样写代表x和y都是1.3倍
transform:rotateY(180deg); 这样是单独给y轴添加位移
【12.jq的live事件】
在js中，只要是通过节点操作后来才添加到页面中的元素，都不会被普通的click事件所捕获，解决办法
1：live('click',function(){ }) live在1.4.2版本就不建议使用了，但是我们在1.7.2这个相对稳定的版本中还是可以用的，jq的版本已经到了1.11.1，这个版本已经取消了live方法，所以以后大家使用的时候 用on方法去代替live方法
2. on('click','ul li a',function(){ })
注意：如果大家工作当中，同事的代码里面写了live事件，那么你就别用新版本的jquery；
但是1.7.2版本在控制slideDown的时候 如果没写固定高度 有的时候会出现bug： 解决办法 用新版本 或者给这个元素加高度。
【1.css3的内减模式】
box-sizing: border-box; 只要设置了这个属性 盒子模型就一直是固定的大小 不会受padding和border的影响
【2.css3渐变背景】
background: linear-gradient(角度,色值1 0%,色值2 50%,....色值max 100%);
例：background: linear-gradient(180deg,#fff 0%,#f21 50%,#000 100%);
【3.页面跳转 device类库】
device类库类似jq，都是别人的代码，我们如果想要使用，必须先加载到页面当中
device.windows() 判断是否是pc端
device.mobile() 判断是否是手机端
device.ipad() 判断是否是pad端
注意：在使用if判断的时候 如果判断的内容是 是否等于true的话 我们可以不写
例：if(device.ipad() == true){} 可以简写为 if(device.ipad()){}
【4.jquery的resize事件】
我们可以通过监测浏览器窗口的大小变化，使用resize事件即可：
例：$(window).resize(function(){ })
我们可以通过jq的resize事件来动态的改变css样式，来实现真正的响应式
【5.css3媒体查询】
我们还可以使用媒体查询功能来判断页面的大小，来执行相依的css代码
写法
1：先写手机端的范围 手机端我们只要判断最大值就可以 因为最小值是0
例：@media (max-width:640px){ 控制代码 }
2.写pad的范围：大于手机的640并且小于pc的980
例：@media (max-width:980px) and (min-width:641px){ 代码 }
3.写pc端的范围：因为屏幕的大小可以是无限的 所以我们只要判断最小值就可以了
例：@media (min-width:981px) { 代码 }
注意：书写细节，单位的后面不能加分号结束，每个取值范围不能出现重合的地方
【6.css3媒体查询的外链写法】
书写步骤跟内嵌是一样的；
例：<link rel="stylesheet" href="mobile.css" media="screen and (max-width:640px)">
这里面我们要给链接进来的css代码加一个media属性,这里面最好在开始位置加一个叫 screen 的单词，为的是以后的兼容性，因为以后会有很多设备没有屏幕
注意：screen和后面的代码也要有个and来连接
【7.关于百分比布局】
百分比布局 宽度换成百分比来计算 都不再使用固定的px数值，这样的好处是 在用户改变窗口大小的时候 外面的盒子也会跟着百分比缩放
min-width: ; 最小宽度
max-width: ; 最大宽度
min-height:; 最小高度
max-height:; 最大高度
注意：这些属性都是css3独有的，低端浏览器不认识这些
【8.关于定时器的this】
在定时器中的this只是代表着定时器自己，如果你想要用户操作的那个元素，那么请用变量来传递参数；
介绍要把绿色视频网添加手机和pad两种显示模式，再让学生看微软的页面，得出结论只有首页需要做响应式就可以了。
步骤：
1。建立css文件，css文件加载顺序一定要按照pc、pad、mobile的顺序来做
在写link标签的时候有技巧可言：先都写上，然后说缺点，把pc的css限定宽度之后，我们再缩小页面，这时候会发生css丢失的情况，这就要重写之前的css了，这样做很不方便，所以我们想了一个更好的办法，我们去覆盖着去写css，因为css加载的先后顺序来讲，这样是没有问题的。（pc的不写范围，pad只写最大范围，手机只写最大范围。）
------第一次停止-----
写header：
要做这几件事：logo，圆角，宽度自适应
步骤：先实验重写body，让大家理解这样写是可行的。
写banner：
如果希望实现插入图像的全屏等比缩放，只需要在css中设置它的宽度和高度都是100%;
(banner的高度要设置为auto自适应不能100%)
手机端：
头部先写伪元素：用css来写内容
《敏捷式开发》
我们做开发的，总会遇到客户或者产品经理的折磨，他们会提出各种需求，例：我还要在pad和手机上也能看，这种随着开发的进行随时应对需求变化的的行为，我们就称之为“敏捷型开发”
《jquery mobile》
基本特性：
此框架简单易用。页面开发主要使用标记，无需或仅需很少使用JavaScript。
给学生看百度图片的手机页面，手机页面风格大部分手机页面会复合一个 头身尾的结构， 页头，主体内容，页尾；当然主页除外；
jqm这个框架主要是用来制作手机端网页的；
它的引包搭建模板过程分成严格的3个步骤；
1.引入jqm的css文件；
2.引入原版的jquery文件
3.引入jqm的js文件；
到此为止引包的过程完成；下面需要搭建基本骨架模板；
<div data-role="page">
<div data-role="header">
<h1>页头</h1>
</div>
<div data-role="content">
主体
</div>
<div data-role="footer">
<h4>页尾</h4>
</div>
</div>
《知识点》
在html5当中给所有的标签新增了一个以data-*开头的属性，这种属性都表示标签的自定义属性；
jqm当中有大量的这种自定义的属性；一般来讲自定义属性谁定义的就给谁用；在其他地方是完全没有任何作用的；
jqm的原理：jqm的工作原理实际上是通过它自己定义的data属性，后台动态监测这些属性然后将它解析为不同的css样式；
《知识点：》
默认情况所有的手机浏览器都带有一个自动缩放功能；为了适应没有做响应式的网站，如果做了响应式网站处理的这些网页需要添加一个禁止视口缩放的功能；
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
只要写手机网站那么一定要加上meta标记的禁止视口缩放功能；否则在手机上网页是不能正常显示的；
【1.关于ie6的透明背景】
png8是支持ie6的透明背景，其它都不行，如果想让图片的质量变好，并且还支持ie6的话，就要使用iepng.js的插件来实现。
【2.点击空白消失】
e.target 代表事件触发的事件源信息
例：$(e.target).is('.box'); 判断事件源是不是一个叫做box的元素
【3.jqm的多页面跳转】
jqm的多页面 就是在一个html文件里面写多个page，相当于翻书一样。跳转也是用a标签
例：<a href="#page2">跳转按钮</a> 这里的href地址 就是被跳转的page的id名字
注意：如果想要跳转到其他的html文件，那么必须给这个a标签添加一个叫rel="external"的属性才可以实现跳转，这样的跳转是没有动画效果的。
