HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。
我们日常讨论的H5其实指的是一个范称，它是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。
随着Web技术的更新，HTML也先后经历了HTML 4.01、XHTML 1.0、HTML5几个重要的版本，在版本的演变过程中新增或废弃了一些属性，同时对语法规范也做了一些调整。
html4 严格模式 emmet语法 html:4s
html4 宽松模式 过渡时期
xhtml 4.01升级版 emmet语法 html:xt
为了能够保证浏览器可以兼容不同版本语法规范的，我们可以使用<!DOCTYPE>指示浏览器应该如何处理。
HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。
html5 emmet语法 html:5 或者 !
<!--html doctype 申明规范--><!DOCTYPE html><html><!--声明当前页面的语言环境是英文--><head lang="en"> <!--声明当前页面的编码环境是utf-8--> <meta charset="UTF-8"> <title></title></head><body><!--html5 特点： 1、更简介 2、更宽松 注意：在实际开发当中一定要遵守书写规范，养成良好的编码习惯。--></body></html>
W3C验证地址
语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备来理解HTML页面内容。
传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页面具有语义性，但是不具有通用性。
HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。
此章节学习目的为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。
本质上新语义标签与<div>、<span>没有区别，只是其具有表意性
使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav"> 相当于 <nav>。
不要好奇，它只是一个标签！
尽量避免全局使用header、footer、aside等语义标签。
<header> 标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption> 标签定义 figure 元素的标题。
<footer> 标记定义一个页面或一个区域的底部
<dialog> 标记定义一个对话框(会话框)类似微信
<video> 标记定义一个视频
<audio> 标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件 比如flash
<command> menu标记定义一个命令按钮
<meter> 状态标签(实时状态显示:气压、气*)C、O
<progress> 状态标签 (任务过程:安装、加载) C、F、O
<datalist> 为input标记定义一个下拉列表,配合option F、O
<details> 标记定义一个元素的详细内容 ，配合dt、dd C
<ruby> 标记定义 注释或音标
<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示
<rt> 标记定义对ruby的注释内容文本
怎么使用：在html文档头部加入这个第三方的插件的js库就可以，但是要注意的是只在IE9一下才使用。
条件注释：<!--[if lt IE 9]> <![endif]--> 条件判断有 （lt lte gt gte）
伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
此章节学习目的，了解HTML5表单的新增的特性，以及PC和移动设备间的差异，其兼容性较差。
tel 手机号码
url 限定输入内容为URL，表单提交时会校验格式
number 限定输入内容为数字，表单提交时会校验格式 step 步数
search 搜索域，语义化，表示定义搜索框
range 数值范围选择器
color 拾色器
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
datetime - 选取时间、日、月、年，浏览器兼容性不好，效果等同于datetime-local
部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
<datalist> 下拉选项，使用中文时要注意
<keygen> 生成加密字符串
<output> 不可当做数据提交
<meter> 表示度量器，不建议用作进度条
autocomplete 设置整个表单是否开启自动完成 on|off
novalidate 设置H5的表单校验是否工作 true 不工作 不加该属性代表校验
3.3.1 input
autocomplete 单独设置每个文本框的自动完成
autofocus 设置当前文本域页面加载完了过后自动得到焦点
form 属性是让表单外的表单元素也可以跟随表单一起提交
form overrides
formaction 在submit上重写表单的特定属性，当点击当前submit时会以当前值使用
formenctype,
formmethod,
formnovalidate,
formtarget
list 作用就是指定当前文本框的自动完成列表的数据 datalist 在界面上是看不见的，只是用于定义数据列表的
min / max / step
min max 限制值的范围，但是不会再输入时限制，提交时校验，
step设置的是每次加减的增量
主要使用在number range datepicker上
multiple
文本域的多选
pattern
设置文本框的匹配格式（正则）
placeholder
文本框占位符
required
限制当前input为必须的
oninput 用户输入内容时触发，可用于移动端输入字数统计
oninvalid 验证不通过时触发
setCustomValidity 设置自定义提示
学生档案：
在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放，但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash插件。
此章节学习目的，了解如何通过HTML5播放音频/视频，以及针对不同浏览器所支持的格式，做多浏览器兼容处理。
HTML5通过<audio>标签来解决音频播放的问题。
定义音频播放组件
<audio src="要播放的音频文件"></audio>
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放
controls 决定是否显示控制菜单
loop 循环播放
preload 预加载 是否在页面加载完成并且没有开始播放时就开始加载文件，如果有自动播放属性则该属性无意义
height/width 定义播放器的宽高，只会在视频标签中生效
多浏览器支持的方案，如下图
HTML5通过<video>标签来解决音频播放的问题。
定义播放视频组件：
<video src="要播放的视频文件"></video>
自定义播放器外观：
隐藏原生的控制菜单，也就是删除标签中的controls属性
自己设计一套界面控制元素，比如播放按钮，音量控制开关之类
为每个不同的控制元素注册对应的事件
在事件中通过视频元素的API实现自定义播放器的效果
同样，通过附加属性可以更友好的控制视频的播放
方法：
事件：
旧版本浏览器提示
如果HTML中遇到不能识别的标签，就会将该标签当做DIV(块级元素)
那么video中的innerHTML也就会直接显示在界面上
利用这个特点我们可以实现不支持video标签的浏览器提示
多浏览器支持的方案，
需要兼容更多的浏览器，可以通过定义多个`<source>`的方式实现
html解析过程中会找其中第一个能认识的格式播放，一旦找到认识的视频格式，就不会再往后找了
因此不管是audio还是video都不要直接设置标签的src
如下所示：
1、微数据
可以理解成新语义标签的一种补充
2、ARIA
Node指一个有效的DOM节点，是一个通称。
eg：
在HTML5中我们可以自定义属性，data-开始的属性，都认作是自定义属性。其格式如下data-*=""，eg：data-info="我是自定义属性"，
dataset 存储的是当前元素的所有自定义属性 以键值的方式存在
dataset 自定义属性的取值和设置 都是按名字来的
①不包含data-
②在有-的情况下会转化成驼峰命名法
dataset是以对象形式存在的
tab切换：
在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。
页面中设置了draggable="true"属性的元素
页面中任何一个元素都可以成为目标元素
拖拽元素
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用
目标元素
ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用
数据传递
1、pushState(data, title, url) 追加一条历史记录
data用于存储自定义数据，通常设为null
title网页标题，基本上没有被支持，一般设为空
url 以当前域为基础增加一条历史记录，不可跨域设置
eg：
2、replaceState(data, title, url) 与pushState()基本相同，不同之处在于replaceState()，只是替换当前url，不会增加/减少历史记录。
Single Page Application单页面应用
eg：
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
1、IP地址
2、三维坐标
GPS（Global Positioning System，全球定位系统）
Wi-Fi
手机信号
3、用户自定义数据
如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。
HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式
a) enableHighAccuracy 高精度模式
b) timeout 超时设置，单位为ms
c) maximumAge表示浏览器重新获取位置信息的时间间隔，单位为ms
1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约20M
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
1、永久生效，除非手动删除
2、可以多窗口共享
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
WebSQL、IndexDB
HTML5规范允许用户自定义网页上任一元素全屏显示。
requestFullScreen() 开启全屏显示
cancelFullScreen() 关闭全屏显示
不同浏览器需要添加前缀如：
webkitRequestFullScreen、mozRequestFullScreen
webkitCancelFullScreen、mozCancelFullScreen
规范允许所有元素可以取全屏，但实际测试结果关闭全屏只能添加到document元素上
不同浏览器需要添加前缀
全屏伪类
:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
addEventListener 进行绑定online用户网络连接时被调用
addEventListener 进行绑定.offline用户网络断开时被调用
事件是给window绑订的
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源，提升访问速度，增强用户体验
4、减少请求，缓解服务器负担
一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型
AddType text/cache-manifest .appcache
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 换行 当被缓存的文件找不到时的备用资源
可自行查阅资料
1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存
由于HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过<input>上传文件后得到的是一个FileList对象（伪数组形式）。
HTML5新增内建对象，可以读取本地文件内容。
var reader = new FileReader; 可以实例化一个对象
实例方法
事件监听
onload 当文读取完成时调用
属性
result 文件读取结果
参考资料
如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
1、浏览器支持程度差，需要添加私有前缀
在pc做开发的时候 一定要加上私有前缀
/*谷歌*/-webkit-border-radius: 50px;/*火狐*/-moz-border-radius: 50px;/*欧鹏*/-o-border-radius: 50px;/*IE*/-ms-border-radius: 50px;
2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛
1、坚持渐进增强原则
2、考虑用户群体
3、遵照产品的方案
4、听Boss的
由于CSS3兼容性问题的普遍存在，为了避免因兼容性带来的干扰，我们约定统一的环境，以保证学习的效率，在最后会单独说明兼容性的问题。
1、Chrome浏览器 version 46+
2、Firefox浏览器 firefox 42+
3、PhotoShop CS6（建议）
学会使用工具，可以让我们事半功倍。
[] 表示全部可选项
|| 表示或者
| 表示多选一
？ 表示0个或者1个
* 表示0个或者多个
{} 表示范围
学会查看手册，培养自主学习能力。
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
其特点是通过属性来选择元素，具体有以下5种形式：
1、[attr] 表示存在attr属性即可；
2、[attr=val] 表示属性值完全等于val；
3、[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；
4、[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；
5、[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；
注意：[attr!=val]在CSS3中失效
除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。
1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
重点理解通过E来确定元素的父元素。
E:first-child选择第一个元素 父元素下面的子元素当中的第一个
E:last-child选择最后一个元素 父元素下面的子元素当中的最后一个
E:nth-child(n) 选择第几个元素 父元素下面的子元素当中的第几个 注意是序号 计算方法是E元素的全部兄弟元素；
E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算；
n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取无效。
n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；
注意：n一定要放在表达式的前面
E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）
eg：span:empty表示当span标签内容为空时则会被选中
2、目标伪类
E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
3、排除伪类
E:not
eg：
/* :not 排除.special选择器*/.test:not(.special) { }
E::first-letter文本的第一个字母或汉字（如中文、日文、韩文等），必须是一个块级元素；
E::first-line 文本第一行；
重点：E::before、E::after是一个行内元素，需要转换成块元素
E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
E::after、E::before后面的练习中会反复用到，目前只需要有个大致了解
E::selection 可改变选中文本的样式【不能改变文字大小】；
":" 与 "::" 区别在于区分伪类和伪元素
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
RGBA即Red、Green、Blue、Alpha
R、G、B 取值范围0~255 alpha 透明度 取值范围 0~1
HSLA即Hue、Saturation、Lightness、Alpha
通过hsla我们可以对颜色的透明度进行控制
H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
关于透明度：
1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
2 、transparent 不可调节透明度，始终完全透明
RGBA、HSLA可应用于所有使用颜色的地方。
text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值；
第一个参数 x轴的偏移量 第二个参数 y轴的偏移量 第三个参数 阴影的长度 第四个参数 阴影的颜色注意：可以有多个，中间以逗号（,）分隔
其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。
border-radius
圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。如下图
可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）
border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;
eg：
/*1、2、3、4四个角都是100px*/border-radius: 100px;/*13对应 24对应*/border-radius: 100px 50px;/*1 24对应 3*/border-radius: 100px 50px 80px;/*分别是1 2 3 4四个角的值*/border-radius: 100px 100px 100px 100px;/* X1 X2 X3 X4/Y1 Y2 Y3 Y4 */border-radius: 100px 100px 100px 100px/100px 100px 100px 100px;
box-shadow
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度不能为负值；
4、inset可以设置内阴影；
5、如果有5个参数，第四个参数代表阴影的延伸
eg：box-shadow: 3px 3px 3px 3px #ccc;
设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
可以设置多重边框阴影，实现更好的效果，增强立体感。
border-image
/*边框图片合写*/
border-image: url("") 27/20px round;/*边框图片路径*/border-image-source: url("");/*边框图片切割的尺寸 不带单位 默认单位是px*/border-image-slice: 27 27 27 27; /*上 右 下 左*//*边框图片的宽度 自适应显示图片内容*/border-image-width: 20px;/*边框图片平铺方式 默认是stretch 拉伸 round：环绕 repeat：平铺 以中心位置向两侧平铺 stretch：拉伸*/border-image-repeat: round;
设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图
“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，
其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图
1、round和repeat之间的区别
round 会自动调整尺寸，完整显示边框图片。
repeat 单纯平铺多余部分，会被“裁切”而不能完整显示。
2、更改裁切尺寸
background-slice: 34 36 27 27 分别设置裁切如下图
关于边框图片重点理解9宫格的裁切及平铺方式，实际开发中应用不广泛，但是如能灵活动用会给我们带来不少便利。
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
box-sizing 有 border-box、content-box【默认】，不支持padding-box
box-sizing: border-box 以百分比布局的时候可以防止溢出
可以分成两种情况：
1、box-sizing: border-box 计算方式为width = border + padding + content
2、box-sizing: content-box 计算方式为width = content
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
兼容性比较好
背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
1、background-size设置背景图片的尺寸
可以通像素和百分比来调整背景图片的尺寸
百分比是根据当前容器的，而不是图片的百分比
cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
2、background-origin设置背景平铺的原点
border-box以边框做为参考原点；
padding-box以内边距做为参考原点；【默认】
content-box以内容区做为参考点；
3、background-clip设置背景区域裁切
border-box裁切边框以内为背景区域；【默认】
padding-box裁切内边距以内为背景区域；
content-box裁切内容区做为背景区域；
4、以逗号（ ，）分隔可以设置多背景，可用于自适应局
eg：
背景图片尺寸在实际开发中应用十分广泛。
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。
上图是从黄色渐变到绿色
1、必要的元素：
a、渐变的方向
to right（90deg）| to left（360deg）| to top（0deg）| to bottom（180deg） 还可以使用角度 deg 0deg是从下往上
b、起始颜色
c、终止颜色
eg：background-image: linear-gradient(0deg, yellow, green);
d、必须要有距离（渐变范围）
2、定义渐变的距离
to right 角度，#fff 25%，#000 25%
3、关于方向如下图
radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
1、必要的元素：
a、辐射范围即圆半径 at
b、中心点的位置即圆的中心
中心点的位置是以盒子自身为参照
c、渐变起始颜色
d、渐变终止颜色
e、渐变范围
2、关于中心点：中心位置参照的是盒子的左上角
3、关于辐射范围：其半径可以不等，即可以是椭圆
eg：background-image: radial-gradient(100px at 100px 100px, #fff, #00f);
关于渐变不同浏览器有不同的版本，即语法格式不一样，我们以最新语法为准，可自行查找资料了解即可。
过渡transition是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
补间动画：自动完成从起始状态到终止状态的的过渡。
特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。
eg：transition: all 1s;
eg：transition: all 2s cubic-bezier(0, 0, 0.4, 1.4);
1）transition-property设置过渡属性 all 代表的是全部的属性
2）transition-duration设置过渡时间 一定要带单位：秒
3）transition-timing-function设置过渡速度【cubic-bezier】
ease（默认）
linear
ease-in
ease-out
ease-in-out
4）transition-delay设置过渡延时
transition: all 1s linear;/*过渡的属性 可以写all 代表的是全部的属性*/transition-property: left;/*过渡时间*/transition-duration: 2s;/*过渡速度*/transition-timing-function: linear;/*设置延时*/transition-delay: 3s;transition: width 2s linear, height 2s 2s;
注意：任何的属性的改变都会触发过渡
转换transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
1、移动 translate(x, y) 可以改变元素的显示位置
1）x轴正方向朝右、y轴正方向朝下
2）x、y可以是固定像素值，也可以是百分比（基于本身）
3）相对于自身原来的位置移动
4）和盒子的任何定位都没有关系
5）x、y可以为负值；
2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；
3、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
当元素旋转以后，xy轴的方向也会发生改变
4、倾斜 skew(deg，deg) 可以使元素按一定的角度进行倾斜，参数为负表示相反方向倾斜
1）一般的话只会设置一个值
2）只写一个参数的时候，第二个参数默认为0
3）x轴 正值是逆时针
4）y轴 正值是顺时针
5、矩阵matrix() 把所有的2D转换组合到一起，需要6个参数。
6、transform-origin
1）可以调整元素转换的原点，但是对于transform: translate(x，y) 没有影响。
2）可以是像素值，也可以是百分比（相对于本身）
3）转换原点不影响translate位移
7、可以同时使用多个转换，以空格衔接，其格式为：transform: translate() rotate() scale() ...等，其顺序会影转换的效果。
1、CSS中的3D坐标轴
用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。如下图
2、左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图
3、左手法则
左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向。
4、rotateX 绕X轴旋转 如果是负的就是顺时针，正的是逆时针
rotateY 绕Y轴旋转 如果是负的就是顺时针，正的是逆时针
rotateZ 绕Z轴旋转 如果是负的就是顺时针，正的是逆时针
rotate3d(x,y,z)
如果你的设备有gpu加速、3d加速引擎，优先使用高性能的方式来渲染页面
translateX 在X轴移动
translateY 在Y轴移动
translateZ 在Z轴移动
translate3d(x,y,z)
如果你的设备有gpu加速、3d加速引擎，优先使用高性能的方式来渲染页面
5、透视（perspective）
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
注：并非任何情况下需要透视效果，根据开发需要进行设置。
1）perspective有两种写法
a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素
b) 作为transform属性的一个值，做用于元素自身
2）理解透视距离
透视会产生“近大远小”的效果
6、3D呈现（transform-style）
设置内嵌的元素在3D空间如何呈现，这些子元素必须为变形原素。
transform-style: flat 所有子元素在2D平面上呈现【默认】
transform-style: preserve-3d 保留3D空间
7、backface-visibility: visible;
设置元素背面是否可见 visible | hidden
默认是visible
注意：1）
transform: translateZ(2px);/*低版本浏览器需要*/
2）
content: attr(data-text);/*动态获取属性*/
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
1、必要元素：
a、通过@keyframes指定动画序列；
b、通过百分比将动画序列分割成多个节点；
编写动画节点 from 0% to 100% 百分比是时间节点【相对于动画的执行时间】
c、在各节点中分别定义各属性
添加动画属性
d、通过animation将动画应用于相应元素；
调用animation动画
2、animation动画的关键属性
a、animation-name动画序列的名称
b、animation-duration动画执行时间
c、animation-timing-function动画执行速度，linear、ease【默认】、ease-in、ease-out、ease-in-out等
d、animation-delay动画延时时间
e、animation-play-state动画播放状态，running、paused等
f、animation-direction动画逆播放【作用：衔接动画】，alternate等
g、animation-fill-mode动画执行完毕后的状态，
forwards保持动画结束后的状态
backwards返回动画起始的状态【默认】
h、animation-iteration-count动画执行次数，infinate等
i、steps(60) 表示动画分成60步完成 注意：不要与速度一起用
注意：参数值的顺序：
关于几个值，除了名字、动画时间、延时有严格顺序要求，其它参数值随意
不要使用E:target调用animation动画
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
如下图，学习新的概念：
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
1、必要元素：
a、指定一个盒子为伸缩容器 display: flex
b、设置属性来调整此盒的子元素的布局方式 例如：flex-direction
c、明确主侧轴及方向
d、可互换主侧轴，也可改变方向
2、各属性详解
a、flex-direction调整主轴方向【默认为水平方向】
包括row 水平排列、column 垂直排列、row-reverse 水平反向排列、column-reverse 垂直反向排列
b、justify-content调整主轴方向对齐方式
包括flex-start 起始点对齐、flex-end 终止点对齐、center 居中对齐、space-around 四周环绕、space-between两端对齐
c、align-items调整侧轴方向对齐方式
包括flex-start 起始点对齐、flex-end 终止点对齐、center居中对齐、stretch 拉伸
d、flex-wrap控制是否换行
包括nowrap 不换行、wrap 换行
e、align-content堆栈（由flex-wrap产生的独立行）对齐方式
堆栈排列，可对应用flex-wrap: wrap后产生的换行进行控制
包括flex-start 起始点对齐、flex-end 终止点对齐、center 居中对齐、space-between 两端对齐、space-around 四周环绕、stretch 拉伸
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例【分配剩余宽度】，不指定flex属性，则不参与伸缩分配
h、align-self
同align-items
可覆盖父元素设置的algin-items，包括flex-start 起始点对齐、flex-end 终止点对齐、center 居中对齐、stretch拉伸
i、order控制子项目的排列顺序 正序方式排序 “先小后大”
类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。
/*指定列数*/-webkit-column-count: 4;/*指定列宽*/-webkit-column-width: 400px;/*定义边框线 和 border一样*/-webkit-column-rule: 2px dashed #CCC;/*调整列间距*/-webkit-column-gap: 50px;
-webkit-column-span: all;
开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。
支持程度比较好，甚至IE低版本浏览器也能支持。
不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
1、TureType(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
eg：
<p class="demo"> 英雄不问出处，流氓不看岁数这个字行不行</p><p class="demo">非英雄，非流氓</p>
其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？
答案是肯定的。
常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。
优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；
Font Awesome 使用介绍
定制自已的字体图标库
SVG素材
流式布局就是百分比自适应布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
这样的布局方式，就是移动web开发使用的常用布局方式
放不下，缩放？
默认的缩放的显示的
3. 认识viewport
在移动端用来承载网页的这个区域，就是我们的视觉窗口，即viewport（视口）,这个区域可设置高度宽度，可按比例放大缩小，而且能设置是否允许用户自行缩放。
yes or no（1 or 0）
☞maximum-scale=1.0 最大的允许缩放比例
☞minimum-scale=1.0 最小的允许缩放比例
<!--适配方案: 1.①设置viewport宽度与浏览器宽度一致 ②设置网页内容与viewport宽度一致 2.缩放比 保持1:1的比例显示，即与pc保持一致 规范的写法是两个都要设置 3.不允许用户自行缩放-->
<!--国际上或者行业统一的viewport视口标准化设置--><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"/>
<!--Emmet语法: meta:vp--><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
所谓“Retina”是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。
物理像素 像素点
屏幕尺寸 1px
eg：淘*移动站【使用viewport的非标准化设置】
如果按1：1的比例显示在移动设备当中，图片及背景图标会失真。使其不失真的解决方案：将图标缩小1倍
图片：width、height
背景图标：background-size
在行业中通用的设计稿：640px
目的：熟练的使用百分比布局
首页的布局：是以百分比布局为主的，定最小宽度和最大宽度的布局。
适用：图片比较多的首页、门户、电商等。
-webkit-tap-highlight-color: transparent; /*tap 轻击*/
/*设置宽度以边框开始计算*/-webkit-box-sizing: border-box;box-sizing: border-box;
在移动端通常使用的是百分比布局，那么这样的布局如果使用border或者padding会使容器的宽度超出屏幕的宽度产生滚动条。那么我们的解决方案是用css3属性box-sizing设置所有的盒子重边框开始计算宽度。
/*在移动端清除浏览器默认样式*/-webkit-appearance: none;
在移动设备的浏览器当中表单一般会有默认的属性
通过border：none、outline：none是无法完全清除的，还是会有一些浏览器默认的属性，比如：内阴影，立体感、、、向这些浏览器默认加上的样式我们怎么去除呢？我们有一个属性：-webkit-appearance 这个属性指的是设置成 none
max-width: 640px; /*在行业当中的移动端的设计图一般使用的是640px 如果设计稿是750px，就把最大宽度设置成750px*/
min-width: 320px; /*在移动设备当中现在最小的尺寸是320px*/
适用：图片比较多的首页、门户、电商等。
作用：保证页面在尺寸比较大的设备当中保证页面的效果也就是清晰度
保证页面在小尺寸的设备当中有较好的布局效果。
<!--可以在移动端调出虚拟键盘，并且虚拟键盘带有搜索按钮--><form action="#"> <input type="search" placeholder="提示"/></form>
在移动端调用输入法的时候会弹出虚拟键盘，键盘一般是enter键，那么在搜索框当中我们要求调用是搜索按钮，那么这样的结构才能调用出来。
☞Touch事件
◆touchstart：当手指触碰屏幕时候触发。不管当前有多少只手指
绑定触摸开始事件的方法：
事件返回的e对象包含一些移动端特有的属性：
originalEvent （原生事件）是jquery 封装的事件
touches 页面上的所有触摸点
clientX：触摸目标在视口中的X坐标
clientY：触摸目标在视口中的Y坐标
pageX：触摸目标在页面中的x坐标
pageY：触摸目标在页面中的y坐标
screenX：触摸目标在屏幕中的x坐标
screenY：触摸目标在屏幕中的y坐标
targetTouches 目标（当前）元素的所有当前触摸点
changedTouches 页面上最新更改的所有触摸点
注意：在touchend事件的时候event只会记录changedTouches
◆touchmove：当手指在屏幕上滑动时连续触发。通常我们在滑屏页面，
会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
绑定触摸滑动事件的方法：
◆touchend：当手指离开屏幕时触发
绑定触摸离开事件的方法：
◆touchcancel：系统停止跟踪触摸时候会触发。
eg：在触摸过程中页面突然alert()出一个提示框，此时会触发该事件，这个事件比较少用
☞Touch触摸事件的响应顺序
① touchstart
② touchmove
③ touchend
④ click 300ms延时
☞transitionEnd 过渡结束后触发
绑定事件的方法：
☞animationEnd 动画结束后触发
绑定事件的方法：
☞gesturestart
当一个手指触摸屏幕之后，第二个手指再触摸屏幕时触发。
☞gesturechange
当上面的事件触发后立即触发。
☞gestureend
第二根手指离开屏幕时触发，之后将不会再次触发gesturechange。
☞在event当中会返回另外两个参数
scale 根据两个手指的滑动距离计算的缩放比例 初始1
rotation 根据两个手指的滑动距离计算的旋转角度 初始 0
在移动端特有的事件touch中，包含了touchstart、touchmove、touchend三个事件，
首先：
我们可以通过touchstart事件中返回的event对象中的第一个触摸点信息中的client坐标，
然后：
我们再通过监听touchmove事件的时候获取到滑动的时候的触摸点，再获取event对象中返回的client坐标，这样就可以计算滑动的时候改变的距离。同时改变当前元素的translate就可以。
最后：
在touchend的时候利用记录下当前元素的定位。
注意：在移动端是利用transform来做定位。
滑动的时候改变距离的方向问题。
注意：为了兼容浏览器，在绑定事件的时候需要同时绑定一个带webkit前缀的事件和不带的这样达到兼容主流浏览器。
给目标元素绑定事件后，每一次过渡结束都会触发transitionEnd事件。
在移动端为了兼容老版本的一些webkit浏览器时，在css中或者js中一定要做兼容处理。
css中的处理方法是加上-webkit-前缀和一个不加的。
js中处理方法是style设置的时候需要设置一个webkit前缀的属性和一个不加的。
我们首先知道文本环绕的的概念：
那么当文本在另一个容器当中，容器是overflow：hidden【触发bfc（块级元素格式化上下文），将页面中的元素设置为独立的元素】的时候。那么这个时候这个盒子就变成了一个绝缘的盒子，不去影响任何外部的元素并且内容使用剩余的宽度。
这样也可是做一个自适应的两栏布局方式。
这里的按钮设置的是 40*44的大小 但是内容只有20px，为什么要这么设置呢？
在移动端如果按钮太小，触发起来相对来说比较困难，用户体验非常不好。那么在设置按钮的时候需要设置的更大一点。
注意：不能使用margin，应为a标签触发不了。
background-clip: content-box;background-origin:content-box;
在移动端tap、swipe等事件的封装原理
tap：
由于在移动端click会有300ms左右的延时，为了响应速度更快移动端框架一般会封装一个加tap的事件，原理：利用touch事件当没有滑动过并且响应时间在一定的时间内（比click快）那么这样的一个过程就是一个tap事件。
swipe：
在移动端有手势事件，也是一些移动端框架封装出来的那么这种事件也是touch事件开始的位置和结束的位置来判断手势的情况。是向下滑还是向右滑，是向下滑还是向上滑。
购物车页面是一个移动端最常使用的布局方式，完全的试用通栏流式布局的方式，宽度自适应。
这个页面需要注意的地方。
怎么自定义checkbox:属性选择器
这个网站可以提供一些常用的动画，可以在做移动开发的时候可以参考这个网站的效果完成动画。
zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。
常用于移动端网站的内容触摸滑动
是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动，它可以支持这样的滑动效果。
消除点击延时提高程序的运行效率
tap缺点：击穿
首页的适用场景：
门户电商的首页 而且内容比较丰富
分类页面的使用场景：
是单页面 全屏的布局当中会使用
异步的交互 ajax web app 的开发模式当中会使用到
web app 网页程序 网页应用
移动web页面优点：跨平台、android、ios
Hybird app 现在流行起来的 混合应用 开发模式 webview
套用 嵌入 移动web页面的 应用所有的移动页面都可以
Native app 原生应用
购物车页面：
任何地方都可以用到这样的布局。
适配 手机 pad
针对移动设备 开发 尽量的精简 浏览的流畅性 用户体验
在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。
通常的做法是针对移动端单独做一套特定的版本。
但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。
那么Twitter 公司Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。
CSS3中的Media Query（媒介查询）
通过查询screen的宽度来指定某个宽度区间的网页布局。
超小屏幕（移动设备） 768px以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px以上
eg：
/*1.在超小屏设备【768px以下】 宽度100% 背景 红色*/@media screen and (max-width: 768px) { .container { width: 100%; background: red; } .row { display: none; }}/*2.在小屏设备 【768px-992px】 宽度750px 背景 黄色*/@media screen and (max-width: 992px) and (min-width: 768px) { .container { width: 750px; background: yellow; }}/*3.在中屏设备 【992px-1200px】 宽度970px 背景 蓝色*/@media screen and (max-width: 1200px) and (min-width: 992px) { .container { width: 970px; background: blue; }}/*4.在大屏设备 【1200px以上】 宽度1170px 背景 粉色*/@media screen and (min-width: 1200px) { .container { width: 1170px; background: pink; }}
or：
/*默认查询的就是屏幕*/.container { width: 1170px; background: pink;}@media (max-width: 1200px) { .container { width: 970px; background: blue; }}@media (max-width: 992px) { .container { width: 750px; background: yellow; }}@media (max-width: 768px) { .container { width: 100%; background: red; } .row { display: none; }}
现在的移动设备屏幕越来越大。
越来越多的设计师也采用了这种设计。
在新建站的一些网站现在普遍采用的响应式开发。
那么在前端开发当中也是一项必备的技能。
作者：Twitter 公司两位前端工程师（mark otto && jacob thornton）在2011发起开发完成的。
bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
bootstrap的特点：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单
注意：bootstrap的所有JavaScript插件都依赖于jQuery。
特点：
优点：
有自己的生态圈，不断的更新迭代。
提供了一套简洁、直观、强悍的组件。
标配准化的html+css编码规范。
让开发更简单，提高了开发的效率。
注意：虽然界面组件样式已经定义好了，但是扩展性相对较强，也就是说我们还可以自定义，修改默认样式。
2.x.x 停止维护
优点：兼容性好
缺点：代码不够简洁，功能不够完善。
3.x.x 目前使用最多
稳定，但是放弃了IE6-IE7。对IE8支持但是界面效果不好。
偏向用于开发响应式布局、移动设备优先的 WEB 项目。
4.x.x 测试阶段
更偏响应式，移动设备，代码更精简。
通常使用css和js 压缩的过程。
如果出错 显示浏览会提示那一行出错。
Map就是提供了记录代码位置的文件
<!--布局容器--><!--响应式布局容器--><div class="container"></div><!--流式布局容器--><div class="container-fluid"></div>
<!--布局容器--><!--响应式布局容器--><div class="container"> <!--行 row--> <div class="row"> <!--列 column 一行分成12等份 类名后面的数字代表的是占多少份--> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div></div>
<!--布局容器--><!--响应式布局容器--><div class="container"> <!--行 row--> <div class="row"> <!--列 column 一行分成12等份 类名后面的数字代表的是占多少份--> <!--大屏及以上 lg 四等份 中屏及以上 md 三等份 小屏及以上 sm 二等份 超小屏及以上 xs 一份 --> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-1"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div> </div></div>
<!--布局容器--><!--响应式布局容器--><div class="container"> <!--行 row--> <div class="row"> <div class="col-md-8 col-md-push-4">.col-md-8 .col-md-push-4</div> <div class="col-md-4 col-md-pull-8">.col-md-4 .col-md-pull-8</div> </div></div>
在pc端：使用的是背景图片
在移动端使用的是图片
在写静态demo的时候使用的是响应是工具来完成的图片响应
但是会加载两种图片
那么这时候就需要做图片的响应式了
首先我们准备了json 中有两种数据
然后通过模版引擎解析成html
最终把解析完成的html渲染在页面当中。
eg：
<table> <thead> <tr> <th>名字</th> <th>年龄</th> </tr> </thead> <tbody> </tbody></table>
安装nodejs
在部分win8系统当中无法安装
（解决办法的是 已管理员权限运行cmd然后再按写命令切换到安装包目录，直接命令执行）
安装完成nodejs之后
检测是否安装完成 node –v 查看版本
然后检测 npm是否自带 npm –v 查看版本
在线安装
然后 运行 npm install –g less (部分电脑要 sudo 管理权限)
Lessc –v 查看版本 是否安装成功
离线安装
Webstorm配置
Webstrom 插件
CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。
作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
变量
Mixin混入
嵌套
Import
函数（内置函数）
LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
/*-----------------变量-----------------*/@mainColor:#E93223;body{ color: @mainColor;}
Mixin（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixin（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。
/*-----------------mixin 混入----------------*//*颜色*/.red{ color: @mainColor;}.border{ border: 1px solid #ccc;}.redBorder(){ color: @mainColor; border: 1px solid #ccc;}.mixin-class{ .red(); .border();}.mixin-fuc{ .redBorder();}
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式
/*---------------------Import 引入------------------------*/@import "base";.f_left{ float: @right;}
在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？
escape(@string); // 通过 URL-encoding 编码字符串
e(@string); // 对字符串转义
%(@string, values...); // 格式化字符串
unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
color(@string); // 将字符串解析为颜色值
data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // * 计算数字的平方根
abs(number); // * 数字的绝对值
sin(number); // * sin函数
asin(number); // * arcsin函数
cos(number); // * cos函数
acos(number); // * arccos函数
tan(number); // * tan函数
atan(number); // * arctan函数
pi(); // * 返回PI
pow(@base, @exponent); // * 返回@base的@exponent次方
mod(number, number); // * 第一个参数对第二个参数取余
convert(number, units); // * 在数字之间转换
unit(number, units); // * 不转换的情况下替换数字的单位
color(string); // 将字符串或者转义后的值转换成颜色
rgb(@r, @g, @b); // 转换为颜色值
rgba(@r, @g, @b, @a); // 转换为颜色值
argb(@color); // 创建 #AARRGGBB 格式的颜色值
hsl(@hue, @saturation, @lightness); // 创建颜色值
hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value); // 创建颜色值
hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
hue(@color); // 从颜色值中提取 hue 值（色相）
saturation(@color); // 从颜色值中提取 saturation 值（饱和度）
lightness(@color); // 从颜色值中提取 'lightness' 值（亮度）
hsvhue(@color); // * 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
hsvsaturation(@color); // * 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
hsvvalue(@color); // * 从颜色中提取 value 值，以HSV色彩空间表示（色调）
red(@color); // 从颜色值中提取 'red' 值（红色）
green(@color); // 从颜色值中提取 'green' 值（绿色）
blue(@color); // 从颜色值中提取 'blue' 值（蓝色）
alpha(@color); // 从颜色值中提取 'alpha' 值（透明度）
luma(@color); // 从颜色值中提取 'luma' 值（亮度的百分比表示法）
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
greyscale(@color); // 完全移除饱和度，输出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor，否则输出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything); // 判断一个值是否是颜色
isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
isstring(@stringOrAnything); // 判断一个值是否是字符串
iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
isurl(@urlOrAnything); // 判断一个值是否是url
ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值
eg：
/*-------------------运算和函数--------------------------*/@back:#333;.test{ border: 1px solid @back*2; background: lighten(#000, 10%); color:darken(#000, 10%);}
em 计算的基数是16px
rem 计算的基数是16px
r root 根元素 html
rem 计算的基数：html的font-size的大小
任何使用单位的地方都可以使用rem
通俗的讲，能够提供某种服务的机器（计算机）称为服务器。
按照不同的划分标准，服务可划分为以下类型：
1、按服务类型可分为：文件服务器、数据库服务器、邮件服务器、Web服务器等；
2、按操作系统可分为：Linux服务器、Windows服务器等；
3、按应用软件可分为 Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、weblogic服务器、WebSphere服务器、boss服务器、 Node服务器等；
使计算机具备提供某种服务能力的应用软件，称为服务器软件，通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力。
常见的服务器软件有：
1、文件服务器：Server-U、FileZilla、VsFTP等
FTP 是File Transfer Protocol（文件传输协议）；
2、数据库服务器：oracle、mysql、SQL server、DB2、ACCESS等；
3、邮件服务器：Postfix、Sendmail等；
4、HTTP 服务器：Apache、Nginx、IIS、Tomcat、NodeJS等；
即网站服务器，主要提供文档(文本、图片、视频、音频)浏览服务，一般安装Apache、Nginx服务器软件。
HTTP服务器可以结合某一编程语言处理业务逻辑，由此进行的开发，通常称之为服务端开发。
常见的运行在服务端的编程语言包括 PHP、Jsp、Asp、Python、Ruby、Perl等。
具有向服务器索取服务能力的终端，如比如 手机、电脑等，通过安装不同的客户端软件，可以获取不同的服务，比如通过QQ获得即时通讯服务、通过迅雷获得下载服务等。
常见的客户端软件：浏览器、QQ、迅雷、Foxmail等。
以浏览器为宿主环境，结合 HTML、CSS、Javascript等技术，而进行的一系列开发，通常称之为前端开发。
所谓IP地址就是给每个连接在互联网上的主机分配的一个32位地址。(就像每部手机能正常通话需要一个号码一样)
查看本机IP地址 ping、ipconfig、ifconfig（linux）
由于IP地址基于数字，不方便记忆，于是便用域名来代替IP地址，域名是一个IP地址的“面具”
查看域名对应的IP地址 ping
简单的说就是记录IP地址和域名之间对应关系的服务。
查找优先级 本机hosts文件、DNS服务器
ipconfig /flushdns
端口号是计算机与外界通讯交流的出口，每个端口对应不同的服务。
现实生活中，银行不同的窗口办理不同的业务。
查看端口占用情况 netstat -an
常见端口号 80、8080、3306、21、22
即Client、Server
C/S工作流程图
在C/S结构的情况下，不同的服务需要安装不同的客户端软件，
比如QQ、迅雷、Foxmail这种情况下安装的软件会越来越多，同时也有许多弊端，
比如A出差，需要在B电脑上查收邮件，但是B电脑并未安装Foxmail等类似的客户端软件，这样不得不先去下载Foxmail，非常不方便。
B/S（即Broswer、Server）解决了C/S所带来的不便，将所有的服务都可以通过浏览器来完成（因为基本所有浏览器都安装了浏览器），但B/S也有一些不利，比如操作稳定性、流畅度等方面相对较弱。
Windows + Apache + Mysql + PHP，首字母组合。
安装wampserver，和普通软件安装无差别，除指定安装路径外，其它默认安装。
任务图标绿色为正常启动状态
通过图形控制台可以启动、重启、停止所有服务
或者单独启动、重启、停止特定服务
注意事项：
1、检查网络是不是通的 ping 对方IP
2、检查防火墙是否开启，如果开启将不能正常被访问
3、检查访问权限 Allow from all
4、理解默认索引
5、确保端口没有被其它程序占用
6、“#”表示注释
7、修改配置要格外小心，禁止无意修改其它内容
网站根目录是Web服务器上存放网站程序的空间，可通过修改配置文件自定义，如E:/www
具体步骤如下
1、打开配置文件，控制台选择
或者 wampserver安装目录下
2、设定根目录，查找并修改
例如：
这样就指定了 "E:/www/"为存放网站的根目录。
3、配置根目录，查找
修改成
4、修改完后，并不能立即生效，需要重启Apache
注：可以指定任意目录为根目录
将我们制作好的网页拷贝到配置好的根目录下，浏览器访问127.0.0.1即可。
在一台Web服务器上，我们可以通过配置虚拟主机，然后分别设定根目录，实现对多个网站的管理。
具体步骤如下：
去掉前面的#号注释，开启虚拟主机配置
分别修改以下三项
DocumentRoot "E:/www/example"
其它项无需指定。
3、修改DNS（hosts）文件
打开C:\Windows\System32\drivers\etc\hosts
目录是固定的
注：修改hosts文件权限
4、重启Apache
文件以.php后缀结尾，所有程序包含在<?php /** 这里是代码 **/ ?>
避免使用中文目录和中文文件名
php页面无法直接打开需要运行在服务器环境当中
eg：最简单的php程序
<?php //用来指定字符编码集 header('Content-Type:text/html; charset=utf-8'); /*这是一个最简单的php程序*/ echo 'hello world!';/*在页面当中输出字符*/?>
1、变量以 $ 开头 字母/数字/下划线
2、不能以数字、特殊字符开头
3、大小写敏感（区分大小写）
eg：
1、字符型
$str = '你好！';echo $str;//你好！
2、整型
$int = 10;echo $int;//10
3、浮点型
$float = 10.5;echo $float;//10.5
4、布尔型
$boolean = true;echo $boolean;//true 1 false 空
5、数组
1)索引数组
/*js中 var array = []; var array = new Array(); var array = [1, 2, 3]; array[0]*/$arrayIndex = array(1, 'abcd', 3);//echo $arrayIndex[0];//1print_r($arrayIndex);//Array ( [0] => 1 [1] => abcd [2] => 3 )var_dump($arrayIndex);/*array 0 => int 1 1 => string 'abcd' (length=4) 2 => int 3 */
2)关联数组 php中 关联用'=>'
6、对象
7、NULL
PHP中一种特殊的数据类型，表示空值，
即表示没有为该变量设置任何值null(空值)
不区分大小写，null和NULL是一样的。
eg：
$null = NULL;echo $null;//空
8、单引号&双引号的区别：
1）单引号内部的变量不会执行
2）双引号内部的变量会执行
如果是双引号定义的字符 如果有字符能匹配到一个变量 就会当作变量来解释
注意：在php中最好使用单引号
eg：
$name = '小红';$age = '10';echo $name."$age";//小红10/*如果是双引号定义的字符 如果有字符能匹配到一个变量 就会当作变量来解释*//*$age 作为变量来解析*/echo $name.'$age';//小红$age/*注意：最好使用单引号*/
PHP中 .号表示字符串拼接符，Javascript中为 + 号
eg：
$name = '小红';$time = '今年';$age = '10岁';$str = $name.$time.$age;echo $str;//小红今年10岁
1、echo：输出简单数据类型，如字符串、数值 **不能输出object**
eg：
/*** 连接符* Javascript中用+号表示连接符* PHP中使用.号*/$hello = 'hello';$world = 'world!';// PHP连接符用.号echo $hello . ' ' .$world;//hello world!
2、print_r()：输出复杂数据类型，如数组 **能够看到数组结构**
eg：
$arr = array('itcast', '今年', '10岁了');// 只能输出简单类型echo $arr;// 可以打印数组，但是输出的是一个数组的结构print_r($arr);//Array ( [0] => itcast [1] => 今年 [2] => 10岁了 )
3、var_dump()：输出详细信息，如对象、数组 **用在object**
eg：
$arr = array('itcast', '今年', '10岁了');// 只能输出简单类型echo $arr;// 输出详细信息var_dump($arr);/*array 0 => string 'itcast' (length=6) 1 => string '今年' (length=6) 2 => string '10岁了' (length=8) */
基本与Javascript语法一致
. 号表示字符串拼接符，Javascript中为 + 号
基本与Javascript基本一致
函数名对大小写不敏感
函数可以设置默认参数
eg：
/* 1、PHP中函数不可以省略参数 2、PHP中可以设置默认参数*/function sayHello($name='小红'){ echo $name.'你好！';}sayHello();//小红echo '<br><br>';sayHello('小丽');//小丽
/** * 分支控制语句、循环语句 * 与Javascript一样 * foreach 数组遍历函数，类似Javascript中的 for in */ $name = 'itcast'; if($name == 'itcast') { echo '我已经在' . $name . '学习'; } else { echo '我还没有学习过编程'; }1)索引数组$arrIndex = array('itcast', '今年', '10岁了'); // PHP函数，计算数组的长度$length = count($arrIndex);// echo $length;//3// 和Javascript是一样的// for($i=0; $i<$length; $i++) {// echo $arrIndex[$i];// }foreach($arrIndex as $k=>$v) { echo $k . '~~~' . $v . ' ';//0~~~itcast 1~~~今年 2~~~10岁了};2)关联数组$arrRel = array('name'=>'itcast', 'age'=>'10');//关联数组不可以按索引下标来访问// echo $arrRel[0]; //PHP遍历一个关联数组 foreach($arrRel as $key=>$val) { echo $key . '~~~' . $val . ' ';//name~~~itcast age~~~10 } // 实际开发都是用foreach来遍历数组的
include 引入html页面
require 引入php程序
eg：
1、只有input中的type是submit时，才会提交表单
2、表单name属性：用来方便服务器端接收所传递的数据（key => value）
3、表单action属性：提交表单的地址 处理表单的php程序的地址
4、表单method属性：设置发送数据的方式 get | post
①如果没有设置method，默认提交是以get方式提交 数据的形式是 数
据?拼接在url上 name=值&name=值
传输的数据有限
简单的拉取信息
eg：
$_GET 对象 用来接收以get方式提交的数据
/*1.获取以get方式进行的数据提交*//*$_GET对象 用来接收以get方式提交的数据*/var_dump($_GET); /*array 'username' => string '小红' (length=6) 'password' => string '123456' (length=6) */echo '用户名:'.$_GET['username'];//用户名:小红echo '<br>';echo '密 码:'.$_GET['password'];//密 码:123456
②当设置post方式提交时，是不会在url上显示 包含在请求当中
传输的数据比get大得多
对数据库进行操作
eg：
$_POST 对象 用来接收以post方式提交的数据
/*2.获取以post方式进行的数据提交*//*$_POST对象 用来接收以post方式提交的数据*/var_dump($_POST); /*array 'username' => string '小丽' (length=6) 'password' => string '123456' (length=6) */echo '用户名:'.$_POST['username'];//用户名:小丽echo '<br>';echo '密 码:'.$_POST['password'];//密 码:123456
5、上传文件：
1).文件提交必须以post方式提交
2).必须设置 enctype="multipart/form-data"
注意：上传的文件大小有限
eg：
$arr = array( 'image' => array('name' => 'png'));var_dump($arr); /*array 'image' => array 'name' => string 'png' (length=3) */
$array = array('name' => 'itcast', 'age' => '10');echo '获取数组的长度：'.count($array);//获取数组的长度：2echo '<br>';echo '判断是否在数组中：'.in_array('itcast',$array);//判断是否在数组中：1echo '<br>';echo '检测数组中是否存在key：'.array_key_exists('name',$array);//检测数组中是否存在key：1
php代码无法在html页面当中直接执行
只有在php环境当中，html页面中的php代码才能执行
2、动态网站
指服务器和客户端间进行通信时的约束和规范，客户端与服务端的数据交互并不是杂乱无章的，需要遵照（基于）一定的规范进行。
1、HTTP、HTTPS 超文本传输协议
2、FTP 文件传输协议
3、SMTP 简单邮件传输协议
即超文本传输协议，网站是基于HTTP协议的，例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。
HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。
即HTTP协议主要由请求和响应构成。
常用请求方法 POST、GET、PUT、DELETE
快捷键：ctrl + shift + F2
请求由客户端发起，其规范格式为：请求行、请求头、请求内容。
1、请求行
由请求方式、请求URL和协议版本构成
2、请求头
Host：localhost请求的主机
Cache-Control：max-age=0控制缓存
Accept：*/* 接受的文档MIME类型
User-Agent：很重要
Referer：从哪个URL跳转过来的
Accept-Encoding：可接受的压缩格式
If-None-Match：记录服务器响应的ETag值，用于控制缓存
此值是由服务器自动生成的
If-Modified-Since：记录服务器响应的Last-Modified值
此值是由服务器自动生成的
3、请求主体
即传递给服务端的数据 【Query String】
注：只有当以post形式提交表单时，请求头里会设置这两个属性，并且属性值是固定的，而以get形式提交表单时请求头则不会设置这两个属性
1）Content-Type: application/x-www-form-urlencoded
2）Content-Length：28
响应由服务器发出，其规范格式为：状态行、响应头、响应内容。
1、状态行
由协议版本号、状态码和状态信息构成
响应状态码：
常见的有：'200'代表成功、304文档未修改、403没有权限、404未找到、500服务器错误
2、响应头
Server：服务器信息
由服务器自动生成
ETag：资源修改后生成的唯一标识
由服务器自动生成
Content-Length：响应主体长度
Content-Type：响应资源的MIME类型
MIME是标识文件类型的，文件后缀并不能正确无误的标识文件的类型。
思考？客户端与服务器间传递数据时，是以什么形式传输的？
客户端与服务器在进行数据传输的时候都是以字节形式进行的，咱们可以理解成是以文本形式传输，这时浏览器就需要明确知道该怎么样来解析这些文本形式的数据，MIME就是明确告知浏览器该如何来处理。
3、响应主体
即服务端返回给客户端的内容；【Content】
状态码
常见的有：200代表成功、304文档未修改、403没有权限、404未找到、500服务器错误
利用HTTP抓包工具在开发中可以帮我们进行调试，常用抓包工具HttpWatch、Fiddler、Charles、FireBug等
浏览器插件
Firebug、HttpWatch、chrome dev tools
代理软件
Charles、Fiddler
此知识点属性扩展内容，不做具体分析
前端优化雅虎35条
重绘&回流
利用浏览器的缓存机制，可以有效的减少HTTP的请求，提高页面加载速度，增强用户体验，同时也能极大的减轻服务器的负担，结合HTTP协议，缓存协商就是根据HTTP协议实现缓存控制的一种机制。
这种做法是用来强制清除缓存的，实际开发过程中，每当新功能上线时最容易引起BUG的即CSS的缓存，但是浏览器的缓存能减少请求，如果每次都强制清除，会对性能有损失，所以控制浏览器缓存成为前端性能化的一个重点
1、Last-Modified时间精确到了秒，但如果1秒内修改了多次，并不能精确的更新缓存。
2、ETag则是判断文件内容任何改变后，便会由服务器自动生成一个唯一标识。
3、Expires 过期时间，HTTP1.0的规范，一个绝对的时间
4、Cache-Control HTTP1.1规范，设置过期时间，优先级高于Expires。
即 Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有持术的综合利用。
本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。
其优势在于不阻塞程序的执行，从而提升整体执行效率。
现实生活中的一个例子
XMLHttpRequest可以以异步方式的处理程序。
浏览器内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。
下面是一个简单的例子：
由于XMLHttpRequest本质基于HTTP协议实现通信，所以结合HTTP协议和上面的例子我们分析得出如下结果：
HTTP请求3个组成部分与XMLHttpRequest方法的对应关系注意书写顺序
1、请求行
2、请求头
post请求需要设置
get请求不需要设置
3、请求主体
HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。
HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。
onreadystatechange是Javascript的事件的一种，其意义在于监听响应状态 监听readystate属性值的改变
readyState 通讯状态：
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
1、获取状态行（包括状态码&状态信息）
2、获取响应头
3、响应主体
2、GET可以通过在请求URL上添加请求参数
5、GET效率更好（应用多）
6、GET大小限制约4K，POST则没有限制
XML是一种标记语言，很类似HTML，其宗旨是用来传输数据，具有自我描述性（固定的格式的数据）。
1、XML的声明必须顶行
2、必须有一个根元素
3、标签的名字可以随意，但是一定要有根元素
4、不可以有空格
5、不可以数字或.开头、大小写敏感
6、不可交叉嵌套
7、如果有属性，属性需要带引号，单引号默认渲染成双引号
8、不能包含特殊字符、特殊符号要使用实体
9、注释和HTML一样
虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。
即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。
1、数据在名称/值对中
2、数据由逗号分隔(最后一个健/值对不能带逗号)
3、花括号保存对象方括号保存数组
4、使用双引号
5、不能写注释
JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取
eg：
json_encode() 把php对象解析成json格式的字符串
json_decode() 把json字符串解析成php对象
eg：
总结：JSON体积小、解析方便且高效，在实际开发成为首选。
关于IE的兼容方面，了解即可。
为了提升我们的开发效率，我们自已将XMLHttpRequest封装成一个函数。
jQuery为我们提供了更强大的Ajax封装
$.ajax({}) 可配置方式发起Ajax请求
$.get(url, [data], [callback], [type]) 以GET方式发起Ajax请求
url:待载入页面的URL地址
data:待发送 key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式：xml, html, script, json, text, _default。
$.post(url, [data], [callback], [type]) 以POST方式发起Ajax请求
url:待载入页面的URL地址
data:待发送 key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式：xml, html, script, json, text, _default。
$('form').serialize() 序列化表单（即格式化key=val&key=val）
$('form').serializeArray() 序列化表单（即[Object, Object]）
url 接口地址
type 请求方式
timeout 请求超时 单位：毫秒
dataType 服务器返回格式
data 发送请求数据
beforeSend: function () {} 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用（包括成功和失败）
jQuery Ajax介绍
1、Loading状态
2、禁止重复提交
3、表单处理
4、数据验证
5、接口化开发
请求地址即所谓的接口，通常我们所说的接口化开发，其实是指一个接口对应一个功能，并且严格约束了请求参数和响应结果的格式，这样前后端在开发过程中，可以减少不必要的讨论，从而并行开发，可以极大的提升开发效率，另外一个好处，当网站进行改版后，服务端接口只需要进行微调。
6、具体参考代码
html：
<div class="register"> <form id="ajaxForm"> <ul> <li> <label for="name">用户名</label> <input type="text" name="name" class="name" id="name"> </li> <li> <label for="pass">请设置密码</label> <input type="password" name="pass" class="pass" id="pass"> </li> <li> <label for="repass">请确认密码</label> <input type="password" name="repass" class="repass" id="repass"> </li> <li> <label for="mobile">验证手机</label> <input type="text" name="mobile" class="mobile" id="mobile"> </li> <li> <label for="code">短信验证码</label> <input type="text" name="code" class="code" id="code"> <input type="button" value="获取验证码" class="verify"> </li> <li> <label for="submit"></label> <input type="button" class="submit" value="立即注册" id="submit"> </li> </ul> </form></div><div class="tips"> <p>用户名不能为空</p></div>
jQuery中的Ajax：
其本质是利用正则表达式，替换模板当中预先定义好的标签。
正则表达式exec()用法
eg1：
eg2：
eg3：
1、在页面中引用模板引擎：
2、表达式
<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式。
3、输出表达式
1）对内容编码输出：
<%=content%>
2）不编码输出：可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。
<%=#content%>
4、逻辑
1）支持使用 js 原生语法
2）模板包含表达式
3）用于嵌入子模板。
<% include('template_name') %>
子模板默认共享当前数据，亦可以指定数据：
<% include('template_name', news_list) %>
5、注意：模版当中没有其他全局变量
辅助方法：
模板中使用的方式： <% $ubb2html(content) %>
6、案例
1、在页面中引用模板引擎：
2、编写模板
<script id="test" type="text/template"> <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul></script>
3、渲染数据
4、简洁语法
5、案例
同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
引用外部资源：资源引用的标签
注意：同源的iframe可以操作其内嵌页面中的内容
不同源则跨域
注意：不同源（即跨域）的iframe不能操作其内嵌页面中的内容
不同源
域名不同
不同源
协议不同
不同源
端口不同
不同源
域名、端口不同
不同源
协议、域名不同
不同源
端口、协议不同
同源
只是目录不同
顶级域名相同的跨域方案：
参考资料
即JSON with Padding
1、原理剖析
其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。
只能以GET方式请求
jQuery 的$.ajax() 方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。
dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问
jsonp 可以指定服务端接收的参数的“key”值，默认为callback