返回目录：ppt怎么做
web开发知识点案例分析及图文解析
全程以知识点资料结合案例讲解，让你吃透每个知识点
独一无二的特色：全程以知识点结合案例讲解，让你吃透每个知识点
第一章：智能表单
input表单type属性值：
type = "email" 限制用户输入必须为Email类型
type="url"限制用户输入必须为URL类型
type="date" 限制用户输入必须为日期类型
type="datetime" 显示完整日期 含时区
type="datetime-local" 显示完整日期 不含时区
type="time" 限制用户输入必须为时间类型
type="month" 限制用户输入必须为月类型
type="week" 限制用户输入必须为周类型
type="number" 限制用户输入必须为数字类型
type="range" 生成一个滑动条
type="search" 具有搜索意义的表单results="n"属性
type="color" 生成一个颜色选择表单
type="tel" 显示电话号码
新增属性:
equired: required 内容不能为空
placeholder: 表单提示信息
autofocus:自动聚焦
pattern: 正则表达式 输入的内容必须匹配到指定正则范围
autocomplete:是否保存用户输入值默认为on，关闭提示选择 off
formaction: 在submit里定义提交地址
datalist: 输入框选择列表配合list使用 list值为datalist的id值
表单验证反馈:
Invalid事件 validity对象(valid查看验证是否通过)
input.addEventListener('invalid',fn,false)
阻止默认验证：ev.preventDefault()
formnovalidate属性 : 关闭验证
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
customError 不符合自定义验证
setCustomValidity();
自定义验证
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
output: 计算或脚本输出
第二章：H5拖拽
事件
ondragstart : 拖拽的一瞬间触发
ondrag : 拖拽前、拖拽结束之间，连续触发
ondragend :拖拽结束触发
目标元素(拖拽元素被拖到的地方)事件 :
ondragenter : 进入目标元素触发,鼠标光标进入
ondragover : 进入目标、离开目标之间，连续触发
ondragleave : 离开目标元素触发
ondrop : 在目标元素上释放鼠标触发
dataTransfer对象 FileReader(读取文件信息) MIME 类型
Base64 类型
FileReader API
FileList 对象
Blob 对象
Silce 读取部分内容
对象URL
第三章：新增方法和历史管理
新增获取元素方法
document.querySelector() 选择单个元素，静态方法
document.querySelectorAll() 选择一组元素，静态方法
document.getElementsByClassName() 通过类名选择
classList
ele.classList.length 获取class的长度
ele.classList.add()添加class名
ele.classList.remove() 删除class名
ele.classList.toggle() 切换class名，有就删除，没有就添加
ele.classList.contains() 判断是否有class名，有返回true，没有就返回falsedataset自定义属性
ele.dataset['a-b']
ele.removeAttribute('id')
ele.removeAttribute('data-a-b')
delete ele.dataset['aBC'] JSON2
decodeURI( ) 解码
encodeURI( ) 编码
window.btoa( ) 编码
window.atob( ) 解码
history历史管理
onhashchange ：改变hash值来管理
history ：服务器下运行
pushState : 三个参数 ：数据 标题(都没实现) 地址(可选)
onpopstate事件 : 读取数据
event.state
第四章：Ajax2
客户端和服务端
计算机通信
配置网站服务器
前端和后端
异步更新$.ajax( ) $.get( ) $.post( ) jsonp
Ajax跨域问题
jsonp的核心本质
ajax请求mp3
文件上传
同源同域名下跨文档操作
FormData对象
Symbol.iterator迭代器
第五章：H5本地存储-Worker多线程-离线存储
H5本地存储
Cookie
Storage
sessionStorage
localStorage
Storage API setItem()
removeItem()
removeItem()
clear()
Worker多线程
离线存储
1、服务器设置头信息 : AddType text/cache-manifest .manifest
2、html标签加 : manifest=“xxxxx.manifest”
3、写manifest文件 :
离线的清单列表先写 : CACHE MANIFEST
FALLBACK : 第一个网络地址没获取到，就走第二个缓存的
NETWORK ：无论缓存中存在与否，均从网络获取
第六章：媒体流技术
一、视频video
1、视频格式：ogg、MEPG4、WebM
2、video标签属性:Src、Autoplay 、Poster、Autobuffer、controls、Width、Height、Loop、Preload...
3、js API：play()、pause()、load()
4、全屏: webkit element.webkitRequestFullScreen(); Firefox element.mozRequestFullScreen(); W3C element.requestFullscreen();
5、退出全屏：webkit document.webkitCancelFullScreen(); Firefox document.mozCancelFullScreen(); W3C document.exitFullscreen();
6、API属性：currentTime duration volume muted false /truepaused ended error currentSrc loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange
7、兼容性处理：source video.js
8、canvas截图功能及视频渲染
二、音频audio
1、音频格式：Ogg、MP3、Wav
2、audio属性：autoplay、controls、loop、preload、src...
3、API属性：currentTime 、 duration 、 volume 、muted 、 false /truepaused 、ended、 error currentSrc 、loadstart、 progress、 suspend、 emptied 、stalled、 play、 pause 、loadedmetadata、 loadeddata 、waiting、 playing 、canplay、 canplaythrough 、seeking、 seeked 、timeupdate、 ended、 ratechange、 durationchange、volumechange
4、兼容性处理：audio.js
三、流媒体技术
1、在线直播系统开发:navigator.getUserMedia
美颜功能，可以对video显示效果过滤
项目实战:百度音乐播放器开发、在线直播系统开发
第七章：高级绘图
CANVAS绘图
一、canvas基本功
1、getContext("2d"); 设置绘图环境 、beginPath() :开始路劲、closePath():闭合路劲 、moveTo(x,y):将触笔移动到x,y点
,y点
2、lineTo(x,y):绘制到x,y点、stroke(): 触笔方法 画线 默认为黑色 、fill():填充方法 、rect(x,y,w,h):矩形路劲
3、save():保存路劲 、restore():恢复路劲
二、绘制矩形
1、fillRect(x,y,w,h) 填充实心矩形 、 strokeRect(x,y,w,h) 绘制空心矩形 、clearRect(x,y,w,h) 清除矩形选区
2、设置绘图样式：fillStyle: 填充颜色 、strokeStyle: 触笔颜色 、lineWidth: 触笔宽度(线宽)
3、图形边界样式：lineJoin : 边界连接点样式、miter(默认值),round(圆角),bevel(斜角) lineCap: 端点样式 、butt(默认值),round(圆角),square(高度多出线宽一半)
三、绘制圆形+绘制曲线+canvas变换
1、绘制圆形：arc(x,y,r,0,360,false)
2、绘制曲线：arcTo(x1,y1,x2,y2,r) 、quadraticCurveTo(dx,dy,x1,y1)、bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
3、canvas变换：translate(x,y)、rotate(弧度): 旋转 弧度公式 ：角度*PI/180
四、绘制图片
1、绘制图片：onload图片预加载、drawImage(img,x,y,w,h);
2、设置背景：createPattern(img,平铺方式)、平铺方式:repeat,repeat-x,repeat-y,no-repeat
3、颜色渐变：线性渐变:createLinearGradient(x1,y1,x2,y2)、径向渐变:createRadialGradient(x1,y1,r1,x2,y2,r2)、addColorStop(位置,颜色)
五、绘制文本
1、strokeText(文本,x,y)绘制空心文本、fillText(文本,x,y)绘制实心文本、font = "font-size font-family" 注:尺寸 字体缺一不可
2、textAlign = "";文本左右对齐方式 、textBaseline文本上下对齐方式 、measureText(文本).width; 文本实际宽度(只有宽度值)
六、绘制阴影+像素操作+合成(叠加)
1、绘制阴影：shadowOffsetX,shadowOffsetY、x轴、y轴偏移、shadowBlur 阴影模糊度、shadowColor 、 阴影颜色、默认颜色:rgba(0,0,0,0)
2、像素操作：createImageData(sx,sy)、创建新的、空白的 ImageData 对象、getImageData(x1,y1,w,h)(必须是同源下面才能获取)、返回 ImageData 对象、putImageData(img,x2,y2)、把图像数据（从指定的 ImageData 对象）放回画布上
3、合成(叠加)： globalAlpha 设置或返回绘图的当前 alpha 或透明值、globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上source-over（默认）、source-atop、source-in 、source-out、destination-over、destination-atop、destination-in、destination-out、lighter、copy、xor七、将画布导出为图片
1、将画布导出为图片:toDataURL
2、事件:isPointInPath(x,y)
3、插件库：http://jcscript.com
4、图表插件:echarts
项目实战:canvas时钟、背景、刮刮卡、马赛克、游戏等实例运用开发
SVG
一、绘制圆形+椭圆
1、与canvas绘图的区别、引入方式
2、circle:圆形 、圆心坐标：cx,cy、半径： r、fill 、 stroke 、 stroke-width 、 stlye样式 、fill = "none/transparent"
3、ellipse:椭圆 、cx 、cy、rx、ry
4、rect : 矩形 width height 宽高 、 坐标 x, y 、圆角 rx,ry
5、line :线条 x1,y1,x2,y2 stroke-opacity 透明 fill-opacity
二、折线+多边形
1、polyline:折线 、points:点坐标（x1 y1 x2 y2...）或(x1,y1,x2,y2....)
2、polygon:多边形、折线闭合 fill-rule:evenodd/nonzero;
3、path: 路劲 d属性： M(起始坐标),L(结束坐标),H(水平线),V(垂直线),A(圆弧),Z(闭合路劲),C,S,Q,T 贝塞尔曲线
4、g标签:组合元素 设置元素公共属性
5、共用属性 transform = "translate(0,0)"
6、text标签:x, y, text-anchor(对齐start end middle)font-size
7、image 标签:x, y, width height xlink:href(图片地址)
8、defs/symbol标签
三、svg滤镜+svg渐变色
1、svg滤镜：feBlend、feColorMatrix 、feComponentTransfer、feComposite、feConvolveMatrix、feDiffuseLighting、feDisplacementMap、feFloodfeGaussianBlur、feImage、feMerge、feMorphology、 feOffset、feSpecularLighting、feTile、feTurbulence、feDistantLight、fePointLight 、feSpotLight
2、svg渐变色：线性渐变:linearGradient 径向渐变:radialGradient
四、svg动画
1、svg动画:set 、不能连续的触发动画，只执行一次animate 基础动画属性
2、animateColor 、改变颜色，此元素已被废弃，可用animate替代
3、animateTransform 、 设置tansform属性的动画、animateMotion、可以让SVG各种图形沿着特定的path路径运动
五、svg视窗+插件运用
1、svg视窗：viewBox=”x y width height” 、preserveAspectRatio=”xMinYmin none”
2、插件运用:snap.svg.js 、图表插件：highcharts
项目实战:svg时钟、饼状图等
第八章：手机移动端事件处理
基础事件
1)touchstart
2)touchmove
3)touchend
event对象
1、取消默认事件
2、阻止冒泡
3、防止文字选中和阻止默认菜单
4、鼠标事件延迟
5、事件点透问题touchEvent
1、touches
2、changedTouches
3、targetTouches
滑屏处理
1、拖拽原理分析
2、滑屏幻灯片简版
transform2D 变换
1、rotate()、scale()、skew()、translate()
2、left和top引起的回流问题及优化
3、处理transform中不能通过计算后样式获取的问题
transition 动画
1、 transition基本知识点
2、贝赛尔曲线运动
3、transitionend事件
4、transition 不执行的BUG
移动端适配方案
1、rem布局适配
2、横竖屏切换适配
3、fixed定位的BUG及替代方案
4、滑屏导航缓冲回弹动画的实现
5、完整版无缝滚动的滑屏幻灯片
6、滑屏选项卡
transform3D
1、滑动旋转的方块
2、3d多边体制作
3、正n边形的外角计算与正n边形的中心点计算
3D桌面切换
1、百分比配合怪异盒模型布局适配
2、animation的loading动画
3、立体三棱柱制作
4、页面绝对坐标获取
5、IOS下3D变换的兼容问题及解决方案
自定义滚动条
1、滚动条比例计算
2、图片随滚动条的按需加载
3、渲染优化-canvas(GPU渲染加速)
4、transition安卓卡顿BUG--3D硬件加速
多指事件
1、双指操作图片缩放和旋转
2、安卓多指事件的兼容解决
3、勾股定理与Math.atan2(与X轴的绝对夹角)
4、实例：完整版的移动端相册第九章：移动端底层交互接口
Web audio API
1、制作音频图形
2、利用 canvas 绘制音频
捕捉用户摄像头 – 媒体流
1、开启摄像头
2、参数
语音识别
a)var newRecognition = new webkitSpeechRecognition( ) 实例化对象
b)newRecognition.continuous = true 设置是持续听还是听到声音之后就关闭接收
c)newRecognition.interimResults = true 是否返回结果
d)newRecognition.start( ) 开启语音识别
e)newRecognition.stop( )停止语音识别
f)newRecognition.onresult
设备电量
navigator.battery
获取用户位置 – 地理位置
navigator.geolocation
单次定位请求 ：getCurrentPosition(请求成功,请求失败,数据收集方式)
请求成功函数经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
请求的时间: new Date(position.timestamp)
百度地图、高德地图运用
环境光
Ambient Light API
重力感应与陀螺仪
重力感应
陀螺仪
OrientationChange (在屏幕发生翻转的时候触发)
DeviceOrientation（移动的角度）+DeviceMotion （移动的加速度信息）Websocket-IM聊天窗口
网络协议: http与https
web socket
API
NFC
NFC有三组应用场景：
a)第一个是将设备靠近无线标签来交换一些数字信息或数据。
b)第二个是将两个设备彼此靠近，以便在它们之间交换一些信息或数据。
c)第三个是通过将手机靠近销售点终端而不是刷卡来进行付款。
现实应用场景
a)公交车、银行卡刷卡时
b)小米家居物联网，利用NFC功能 操控空调、电视、电冰箱、电灯、九号平衡车、蓝牙耳机。。等
区别 与wi-fi、蓝牙、红外线等数据传输技术主要差异是有效距离不超过4厘米
震动
navigator.vibrate
网络环境
navigator.connection
Connection.bandwidth 宽带
navigator.onLine 是否在线
Connection.type 网络类型
第十章：移动端框架集企业项目实战开发
Vue2/Angular4/React/ReactNative
每一期用一个框架，搭建后台数据接口，模拟真实开发环境开发项目。
本期运用企业级Vue2实战项目开发
1、Node环境安装
2、webpack项目部署及vue-cli脚手架项目搭建
3、认识vue
4、vue常用指令
5、Vue事件处理器
6、vue生命周期
7、vue组建及组建间通讯
8、vue核心插件运用：
vue-router路由系统
axios数据交互
vuex状态管理
9、vue UI组件库
10、移动端综合项目实战
私我1，带走web干货及学习路线
