H5--大概的,没事看看
1.设置弹性盒
任何元素都可以设置
display:flex;
display:inline-flex //给行内元素设置弹性盒子
display:-webkit-flex; //webkit(是浏览器的内核，是谷歌浏览器和safari(苹果浏览器)的内核)display:-webkit-flex //谷歌浏览器和safari(苹果浏览器)的内核display:-moz-flex 火狐浏览器的内核 display:-ms-flex IE浏览器的内核 display:-o-flex 欧朋浏览器的内核
2.设置Flex布局以后，子元素的float、clear、vertical-align属性将失效
二、给容器设置的属性(6个)
1.flex-direction //设置弹性盒里面子元素的方向，默认是水平排列的
row(默认值:水平) row-reverse（水平方向的翻转） column(垂直) column-reverse（垂直方向的翻转）
2.flex-wrap //设置换行
nowrap(默认值:不换行) wrap wrap-reverse
3.flex-flow //复合属性 包括direction,wrap 默认值:row nowrap
4.justify-content //水平方向的排列方式
flex-start(默认值 左对齐) flex-end右对齐 center居中 space-between两端对齐 space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
5.align-items //垂直方向的排列方式
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 项目的第一行文字的基线对齐
stretch（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度
6.align-content //多根轴线的对齐方式
stretch(默认值) 轴线占满整个交叉轴
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
space-between 两端对齐
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
强制让文字在一行显示 white-space:nowrap;
设为 Flex 布局以后，子元素的（）、（）和（）属性将失效？ float clear vertical-align
所有网站内容在一屏高度显示，页面中不出现滚动条的页面形式叫做 单屏网页
三、项目的属性（子元素）
1.order //定义每一个项目的排列顺序，数值越小，排列越靠前，默认为0
2.flex-grow //定义项目的放大比例,默认为0
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3.flex-shrink //定义项目的缩小比列，默认为1 负值对该属性无效
如果所有项目的flex-shrink属性都为1，当空间不足时，都将比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
4.flex-basis //定义了在分配多余空间之前，项目占据的主轴空间（main size）
5.flex //复合属性(flex-grow,flex-shrink,flex-basis) 默认值:0 1 auto
该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto)
建议优先使用这个属性，而不是单独写三个分离的属性
6.align-self //允许单个项目有与其他项目不一样的对齐方式,可覆盖
align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
auto flex-start flex-end center baseline stretch
--------------SASS--------------
1.scss/less都是css的预处理器，scss比less更强大。
2.编译风格
nested:嵌套缩进的css代码，默认值
expanded：没有缩进的。扩展的css代码
compact: 简洁格式的css代码
compressed:压缩后的css代码
3.变量 $开头
$height:100% div{ height:$height;}
计算
4.标签嵌套
div{h1{height:$height}}
属性嵌套 &引用父元素
div{border：{radius:5px;}}
5.注释
//单行注释 不会编译到css文件里面，只在scss源文件里面
/多行注释/ 会编译到css文件里面
6.继承
@extend class1;
7.@mixin 名字{
重复的样式
}
调用：@include 名字
@mixin 强大之处在于可以设置参数和缺省值
@mixin justify($justify:center){justify-content:$justify;}
@include justify; //默认值
@include justify(flex-end) //传过来的参数
8.@import “_minxin.scss” //引入外部文件
9.自定义函数(转为rem)
@function 名字pxTorem($px){//$px为需要转换的字号@return $px / 37.5px * 1rem; 37.5px //浏览器默认字体}调用:div{width:名字(30px);}
em rem px
rem //相对于html(根元素)
em //相对于父元素，有继承性
1.引入flexble.js //用来做适配用的
2.在自己的scss文件里面，引入common.scss._mixin.scss
3.在自己的scss文件写的时候，需要调用pxTorem(20px),用来把px转成rem
rem布局(自适应布局): 一套代码适配不同的终端
//线(1像素)的缩放
height:1px;
transform:translatesY(0.5);
background:
-------关于设备-------
一、关于设备
1.三个需要了解的概念
PPI:可以理解为屏幕的显示宽度
DPR:设备像素比:物理像素/逻辑像素
Resolution:就是我们常说的分辨率
二、像素
像素分为三种：
1.设备像素
设备像素也称为物理像素
2.设备独立像素
3.css像素
在没有缩放的情况下，1个css像素等同于一个设备独立像素
4.获取当前设备的dpr（设备像素比）
window.devicePixRatio
三、viewport
移动端讲师口划分为三类 布局视口 视觉视口 完美视口
1.布局视口
怎么获取布局视口的宽度
①document.documentElement.clientWidth ②document.documentElement.clientHright
2.视觉视口
用户正在看到的网页的区域
window.innerWidth //视口的宽度
window.innerHeight //视口的高度
3 .完美视口 （布局视口等于视觉视口的宽度） css像素等于设备独立像素
将布局视口的宽度设置为设备独立像素的宽度
screen.width //设备独立像素的宽度
screen.height //设备独立像素的高度
1个css像素=4个物理像素
4.viewport默认有6个属性
width:设置viewport的宽度,这里可以为一个整数，又或是字符串"width-device"
inital-scale:页面初始的缩放值，为数字，可以是小数
minimum-scale:允许用户的最小缩放值，为数字，可以是小数
maximum-scale:允许用户的最大缩放值，为数字，可以是小数
height:设置viewport的高度
user-scalable:是否允许用户进行缩放,'no’为
5.判断当前设备是一个安卓设备还是iphone设备
window.navigation.appVersion.match(/设备/gi);
四、iconfont
1.下载
a.我的图标 点击需要的图标 添加到购物车
b.点击购物车 点击添加至项目
c.如果已经创建过项目，那就直接点击项目。如果没有创建过项目，点击右边的加号，新创建一个项目
d.点击确定 点击font-class 点击下载至本地(解压download文件)
五、双飞翼布局 流式布局：宽度百分比，高度固定的
1.<div class="wrapper"><div class="main"><div class="content"></div></div><div class="left"></div><div class="right"></div></div>
①中间的盒子，在第一个，然后依次是左侧和右侧
②给这三个盒子一个浮动
③给左右两侧的盒子一个固定的宽度，然后给中间的盒子一个宽度100%
④给左侧盒子加一个margin-left:-100%;给右侧的盒子添加一个margin-left:服自己的宽度
a.给中间盒子里面添加一个盒子，然后给这个盒子margin-left:左侧盒子的宽度，margin-right:右侧盒子的宽度
六、响应式布局 Responsive Web design(媒体查询)
1.缺点：1.兼容性:低版本浏览器兼容性有问题
2.移动带宽流量
3.代码累赘(dom结构复杂，样式复杂),会出现隐藏无用的元素
2.语法@media(规定宽度)and(规定宽度){css样式}样式仅在规定的范围内生效
Media queries 媒体查询
3.@media与@media screen的区别
@media screen的css在打印设备里是无效的，而@media queries在打印设备里是有效的 常用于布局的css Madia Queries有以下:设备类型(media type)
css3----------动画
1.transition(过渡动画)
transition： 要过渡的属性名（transition-property） 过渡的时长(transition-duration) （单位是秒或者毫秒） 过渡曲线（transition-timing-function）（可选） 延时(transition-delay)；（可选）
transition-timing-function:liner(匀速) ease(慢-快-慢)（默认） ease-in(慢速开始) ease-out(慢速结束) ease-in-out(慢速开始束慢速结束)
定义应用过渡效果的css属性名称列表，列表以逗号隔开；属性和时长及运动曲线之间是没有逗号的；
2.transform
a.位移
translate(x,y) //x:x轴位移的坐标点 y：y轴位移的坐标点
translate3d(x,y,z) //x:x轴位移的坐标点 y：y轴位移的坐标点 z:z轴位移的坐标点 (开启硬件加速)
translateX(x) //x:x轴位移的坐标点
translateY(y) //y:y轴位移的坐标点
translateZ(z) //z:z轴位移的坐标点
b.缩放
scale(x,y)
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
c.旋转（单位：deg）
rotate(angle) //单位是角度
rotate(x,y,z,angle) //单位是角度
rotateX(angle) //单位是角度
rotateY(angle) //单位是角度
rotateZ(angle) //单位是角度
tranform-origin:50%(left center right) 50%(top center bottom) 必须与tranform一起使用
d.倾斜 没有3d（单位deg）
skew(ang,ang)
skewX(ang)
skewY(ang)
3.background-visibility（3D里旋转）
visible:背面可见 hidden:背面不可见
4.关键帧动画
关键帧 @keyframes
语法结构：
@keyframes name{0%{width:100%;}50%{}100%{}}
animation:动画名称（name） 动画执行的时间 动画的速度曲线 动画的延时 动画的播放次数(infinite无限循环) 是否轮流反向播放(alternate：反向播放；normal:默认；)
animation-play-state:paused | running 规定动画是在暂停还是播放；
animation-fill-mode:none（默认值） | forwards（最后一帧的状态） | backwards（第一帧的状态） | both(向前向后填充) 动画执行完成之后，动画是否可见（保留帧的状态，哪一帧可见）；
step(n,[start | end]); n是一个自然数，steps函数把动画分成n等份；
step-start: 等同于steps(1,start),跳过了第一帧；
step-end: 等同于steps(1,end),跳过了最后一帧；
zepto 鼠标滑动事件
swipeLeft swipeRight swipeUp swipeDown swipe(上下左右滑动)
step-start等同于steps(1,start),动画分成1步，动画执行时结尾端点为开始
step-end等同于steps(1,end),动画分成1步，动画执行时以结尾端点为开始
window.requestAnimationFrame()
window.cancelAnimationFrame() 取消先前通过 window.requestAnimationFrame()调用的
-webkit-overflow-scrolling:touch; //解决ios滑动卡顿的问题
2018-11-5
this.classList.add();
this.classList.reomve();
this.classList.contains();
this.classList.toggle();
window.requestAnimationFrame(callback) //里路蓝旗专门为动画设计的API。开启动画；
window.cancelAnimationFrame() //关闭动画
transitionend 过渡结束后的事件
animationend 动画结束后的事件
1.touch
表示在触控设备上的触摸点，通常是指手指或者触控笔在触屏设备或者触摸板上的操作。
对象属性 Touch.radiusX, Touch.radius
一、移动端事件
touchstart 手指按下的事件 mousedown
touchmove 手指移动的事件 mousemove
touchend 手指抬起的事件 moveup
touchcancel 不知道某种原因被中断的时候触发
2.手指信息都存在
e.touches //是一个类数组
e.touches[0] //第一个手指的信息
e.targetTouches //目标元素的信息
e.changedTouches //抬起时的手指信息
3.
touch.screenX //手指相对于屏幕的距离
touch.screenY //手指相对于屏幕的距离
touch.clientX //手指相对于视口的距离
touch.clientY //手指相对于视口的距离
touch.pageX //手指相对于页面的距离
touch.pageY //手指相对于页面的距离
前提:把代码放在本地服务器下
调试
win + r -----> cmd -----> 小黑板 ipconfig
//
本机Ip ipV4找草料二维码 > 把地址栏的的地址放进去(把www之前的换成本机的ip地址) >（生成二维码）
前提：手机和电脑在一个局域网下边
用手机去扫码
5.本地存储
webStorage
localStorage //生命周期--永久存储， 除非手动清除sessionStorage //生命周期--会话级别，当会话窗口关闭之后，或者浏览器关闭之后，本地存的数据就没有了
方法：
localStorage/sessionStorage.setItem(‘key’,‘value’); //存值
localStorage/sessionStorage.getItem(‘key’); //取值
localStorage/sessionStorage.removeItem(‘key’); //删除某一个键值
localStorage/sessionStorage.clear(); //清空
localStorage/sessionStorage.length; //本地存的值得长度
localStorage/sessionStorage.key(i); //i是下标 取出来的是键值(key);
localStorage 存储的大小大概5MB左右
跟cookie的区别： cookie可以设置过期时间。没有以上的那些方法，需要自己去封装
本地存储只能存字符串类型的数据。
对象转字符串 JSON.stringify();
字符串转对象 JSON.parse();
上传图片
1. input type=file;
2. onchange 监听事件 //文件域
3. multiple //上传多张图片的属性
（在change事件里面用this.files来当前图片的基本信息，
this.files是类数组，支持单张上传，也支持多张上传）
4. this.files //所有的图片信息 this.files[0] //单张图片的信息
5.lastMisified //最后上传图片的时间戳
lastModifiedDate //最后上传图片的标准时间
name //上传图片的名字
type //上传图片的类型
size //上传图片的大小、以字节为单位 1mb = 1024kb 1kb = 1024b 1个b就是一个字节
this.files[0] //第一张图片的信息
6. 获取文件路径
var fileReader=new FileReader();//读取文件fileReader.readAsDataURL(files); //要读取的文件的基本信息//读取完成之后的事件fileReader.function(){this.result; //图片路径，这个路径是一个base64格式的图片}
拖放
- 要拖放的元素设置 draggable=true;
- a和img标签本身就具有可拖放性。不需要添加draggable这个属性就可以
- 源对象：被拖放的元素
ondragstart: 源对象开始被拖动
ondrag: 源对象被拖动过程中
ondragend: 源对象被拖动结束
4.目标对象
ondragenter: 目标对象被源对象拖动着进入
ondragover: 目标对象被源对象拖动着悬停在上方（移动）
ondragleave: 源对象拖动着离开了目标对象
ondrop 源对象拖动着在目标对象上释放/松手
拖拽API总共就是7个函数;
- 如何在拖动的源对象事件和目标对象事件间传递数据
HTML5为所有的拖动相关事件提供了一个新的属性：
e.dataTransfer{} //数据传递对象
用于在源对象和目标对象之间传递数据
存值：源对象的事件处理中保存数据:
e.dataTransfer.setData(k,v) //k，v是字符串
取值：目标对象上的事件处理中读取数据：
var v=e.dataTransfer.getData(k);
//click 有一个300ms的延迟 这300ms的延时用来判断是单击还是双击
//tap
dataTransfer.dropEffect：设置或返回拖放目标上允许发生的拖放行为。如果此设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许none、copy、link、move值之一。
dataTransfer.effectAllowed：设置或返回被拖动元素允许发生的拖动行为。该属性值可设置为none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized。
dataTransfer.items：该属性返回DataTransferItems对象，该对象代表了拖动数据。
dataTransfer.setDragImage(element x,y)：设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向的距离；y设置图标与鼠标在垂直方向的距离。
dataTransfer.addElement(element)：添加自定义图标。
dataTransfer.types：该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。
dataTransfer.getData(format)：获取DataTransfer对象中设置format格式的数据。其中format代表数据格式，data代表数据。
dataTransfer.clearData([format])：清除DataTransfer对象中format格式的数据，如果省略format格式，则意味着清除DataTransfer对象中的全部数据。
1.音频视频
audio（音频） video（视频） source（也可以放路径，区别是可以放多个。解决浏览器兼容问题。（.mp3/.ogg））
2.src 放音频或视频的路径
eg:
你的浏览器不支持当前浏览格式
3.方法
play() //开始播放当前视频或者音频
pause() //暂停当前视频或者音频
load() //重载视频或者音频
4.属性
src
autoplay //true /false(默认值) 是否加载完成之后立即播放 布尔值
controls //true /false(默认值/不显示) 是否显示控件 布尔值
currentTime //设置或返回当前音频或者视频的播放位置 单位是秒
duration //返回当前音频或者视频的长度 单位也是秒
ended //是否已经播放结束 true结束 false没有结束
loop //是否循环播放 true循环播放 false(默认)
muted //是否静音 true 静音 false（默认值）不静音
playbackRate //设置当前视频或音频的播放速度 1.0正常速度
paused //判断当前视频或者音频是否是暂停的状态 true暂停 false(不暂停)
played //是否播放
volume //设置当前视频或者音频的音量 0-1之间的值 0静音 == muted=true
playbackspeed //设置当前视频或音频的播放速度 1.0正常速度 0.5更慢
5.事件
canplaythrough //视频或者音频仅在完成之后，出发的事件。
end //视频或者音频播放完成之后，触发的事件。
timeupdata //播放过程中触发的事件
swiper 4.0 （this指向实例）
1.引入swiper.min.css和swiper.min.js
2.结构样式
swiper-container
swiper-wrapper
swiper-slide
3.实例化
var mySwiper=new Swiper('.swiper-container',{//配置项}); //可以是类名也可以是id名
4.一个页面中引用多个Swiper，可以给每个容器加上ID或class区分，要保留默认的类名swiper-container
如果有多个swiper的时候，建议给swiper单独起个类名，分别去实例化
var mySwiper=new Swiper('.swiper-container',{//配置项initialSlide:2, //页面一进来显示第几个slidedirection:"vertical", //设置方向默认是水平的，vertical是垂直的init：false, //是否立即初始化。默认是true;on: { //注册事件}，loop:true, //设置无缝播放，默认是false;}); //可以是类名也可以是id名muSwiper.init() //初始化
属性·
5.initialSlide //设置初始化时slide的索引，也就是页面一进来就显示第几个slide 默认是0
6.direction //设置slide的滑动（播放）方向 默认是水平的horizontal 垂直的是vertical
7.speed //设置切换速度 默认是300ms
8.on //用来注册事件 （swiper4里面，this可以直接指向实例）
on:{事件名称:function(){}}
9.init 属性 //是否立即初始化 默认是true,布尔值，一进来就能初始化，设置为false不能初始化。
- init() //初始化swiper （swiper.init();属性为false时，需要调用init（）这个方法才能初始化）
slideChangeTransitionStart :function(){//开始过度之前触发的事件}
slideChangeTransitionEnd:function(){//开始过度结束触发的事件}
slideChange:function(){//过度中触发的事件}
11.loop //设置无缝轮播 默认是false 为true时无缝轮播
事件 ·
slideChangeTransitionStart 切换开始slideChange 切换过程中slideChangeTransitionEnd 切换结束
this.activeIndex //获取当前活动块的索引this.realIndex //loop模式下当前活动块的索引
13.mySwiper.slideTo(index,speed,runCallbacks)
// index：必选项 切换到指定的slide索引；
// speed：切换速度；
// runCallbacks：布尔值，是否执行回调。
14.autoplay：true/false;
默认false：不自动播放
true 等同于以下
autoplay:{delay:3000,stopOnLastSlide:false,disableOnInteraction:true,}
分页器：<div class="swiper-pagination"></div> //跟wrapper同级//在配置项里面配置
pagination:{el:'.swiper-pagination',clickable:true, //点击分页器的时候，slide切换到对应位置type:'bullets' //bullets（默认的圆点型） ‘fraction’分式 ‘progressbar’进度条 "custom"自定义的 renderBullet: function (index, className) { //自定义分页器return '<span class="' + className + '">' + arr[index] + '</span>';}}
15.左右箭头
配置项：navigation:{
nextEl:’.swiper-button-next’,
prevEl:’.swiper-button-prev’
}
16.滚动条
配置项:scrollbar:{ el:'swiper-scrollbar', draggable:false //默认是false 设置为true }
-----------------------------better-scroll------------------------------------------
他的核心是借鉴的iscroll的实现；他的API设计基本兼容iscroll；
better-scroll 是基于原生JS实现的，不依赖于任何框架，是一款非常轻量的JS lib.
1、
better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动
2、滚动子元素的高度一定大于父元素的高度 //滚动原理
3、var Bscroll = new BScroll(’.wrapper’); //.wrapper 父元素
4、startY startX //初始化时的位置
el: 可以是字符串，也可以是dom对象，如果是字符串的话，会在内部通过querySelector把它转成dom对象。
1.better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件。它的核心是借鉴的iscroll的实现，他的API设计基本兼容iscroll
better-scroll是基于原生JS实现的，不依赖任何框架
better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动
2.滚动子元素的高度一定大于父元素的高度 //滚动原理
3.var Bscroll=new BScroll(’.wrapper’); //.wrapper 父元素
4.startY startX //初始化时better-scroll的位置
- scrollY:true //开启纵轴滚动(默认：true)
scrollX:true //开启横轴滚动(默认：false)
6.click /tap
click:true; //开启点击事件（better-scroll 默认会阻止浏览器的原生click事件）把它设置为true之后才能点击；
tab:true;
7.scrollbar：true; //开启滚动条
scrollbar:{
fade:true, //滚动停止，滚动条渐隐渐现；
interactive:false //1.8.0新增 //滚动条是否可以交互（是否可以拖动滚动条进行滚动）
}
8.refresh（）方法：
当DOM结构发生变化的时候务必要调用，确保滚动的效果是正常效果
9.scrollTo(x,y,time,easing) 滚动到指定位置的方法
10.scrollBy(x,y,time,easing) 相对与当前位置的偏移
11.scrollToElement(el,time,offsetX,offsetY,easing) //滚动到指定目标元素
el:（要滚动到的目标元素）可以是字符串，也可以是dom对象，如果是字符串的话，会在内部通过querySelector把它转成dom对象
time: 滚动时长；
offsetX：相对于目标元素的横轴偏移量，如果设置为true，则滚到目标元素的中心位置
offsetY：相对于目标元素的纵轴偏移量，如果设置为true，则滚到目标元素的中心位置
easing：缓动函数，一般不建议修改；
desory() ; //销毁当前实例；
scroll ：//滚动过程中触发的事件
probeType 值0-3 默认为0 ；
当大于1的时候，会实时的触发scroll事件
等于1的时候：非实时的触发；
2： 实时的触发；
scroll //滚动过程中会触发
scrollEnd //滚动结束之后触发
touchEnd //手指或鼠标离开的时候x,y 横纵轴的坐标（滚动的距离）
maxScrollY （最大的滚动距离）
scroll下滚动的位置区间 为负值scrollEnd //滚动结束之后的事件
touchEnd //
----------------------------------canvas----------------------------------------------
0. canvas API(画布)是在HTML5中新增的属性；
- 最早由苹果公司推出的；
- 本身没有绘画能力，所有的绘画都是通过JS来实现的；
- canvas默认的宽为300，高为150；
- canvas 不能通过行内样式来修改宽高，它有自己就的宽高属性；
- 可以绘制线条、矩形、圆形和文本等；
- canvas 的画布原点在左上角（0，0）；
7、取出来上下文
ctx=myCanvas.getContext(‘2d’);
开始路径
ctx.beginPath();
设置线段起点
ctx.moveTo(x,y)；
设置线段终点（除了第一个点之外的点）
ctx.lineTo(x,y)
设置线条的颜色；
strokeStyle="#000";
描边
ctx.stroke();
设置描边宽度
lineWidth
设置线条两端
ctx.lineCap=“butt(默认的） round square”;
结束路径
ctx.closePath();
填充
ctx.fill()
填充的颜色
fillStyle="#000"
绘制矩形
ctx.rect(x,y,width,height) 透明 width 负数时向左 正数向右 height 负数向上 正数向下
ctx.strokeRect(x,y,width,height) 描边矩形 rect()+stroke()
ctx.fillRect(x,y,width,height) 填充矩形 rect()+fill()
ctx.clearRect(); 清除矩形；
移动画布原点 重设画布原点
ctx.translate(x,y)
绘制文字
ctx.fillText(文本内容,x,y，maxWidth) 填充文字
ctx.strokeText(文本内容,x,y) 描边文字
x,y 要放的文本坐标；
maxWidth 要放文本的最大宽度（可选的）
文本样式
ctx.font = “24ppx normal”; //字体大小 字体样式（微软雅黑）；
ctx.textAlign=‘left(start) | center | right(end)’; //水平对齐方式
ctx.textBaseline=‘bottom | top | middle’; //垂直对齐方式
画圆
arc(x,y,半径,start,end,方向);
x,y圆心点坐标
start 起始角度（弧度为单位）
end 终止角度（弧度为单位）
方向 false 顺时针 true 逆时针
角度转弧度的公式：var deg=Math.PI/180; //角度*Math.PI/180;
$.extend({},opt.def);object.assign()function extend(){var obj=arguments[0];for(var i=1;i<arguments.length;i++){for(var key in arguments[i]){obj[key]=arguments[i][key];}}return obj;}角度转为弧度 deg=Math.PI/180
5.旋转
ctx.rotate(deg) 以弧度为单位
ctx.save(); 保存当前环境的状态
ctx.restore(); 返回之前保存过的路径状态和属性
reduce 计算数组元素相加后的总和
globalCompositeOperation (新图像绘制到已有的图像上面)；
源图像=您打算放置到画布上的绘图
目标图像=您已经放置在画布上的绘图
记住这两个：
source-over 默认。在目标图像上显示源图像
destination-out 在源图像外显示目标图像。源图像是透明的。
-------------看看------------------
source-over 默认。在目标图像上显示源图像；
source-atop 在目标图像顶部显示源图像；
source-in 在目标图像中显示源图像；
source-out 在目标图像之外显示源图像。
toDataURL() 把画布转成路径 base64格式 canvas上的方法；
阴影：
shadowColor=“颜色”
shadowBlur=“number”
shadowOffsetX=“number”
shadowOffsetY=“number”
渐变：
var grd= ctx.createLinearGradient(x1,y1,x2,y2);
x1,y1 从哪个地方开始渐变
x2,y2 结束渐变的位置
放射性渐变
var grd=ctx.createRadialGrandient(x1,y1,r1,x2,y2,z2);
x1,y1 是开始渐变圆的圆心坐标，r1开始渐变圆的半径
x2,y2 是结束渐变圆的圆心坐标，r1结束渐变圆的半径
添加渐变的颜色
grd.addColorStop(stop,color);
stop: 0-1的值
color:渐变的颜色
.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img:
sx: 可选。开始剪切的X坐标的位置
sy: 可选。开始剪切的y坐标的位置
swidth: 可选。被剪切的图像的宽度
sheight: 可选。被剪切的图像的高度
x: 在画布上放的图像的x坐标轴的位置
y: 在画布上放的图像的y坐标轴的位置
width: 可选。要使用的图像的宽度（伸展或缩小图像）
height: 可选。要使用的图像的高度（伸展或缩小图像）
-------------------------animate.css-------------------------
1、引入swiper.animate.min.css和swiper.animate.min.js
给需要运动的元素上面添加一个ani的类名（必须加的）；
swiper-animate-sffect:切换效果
swiper-animate-duration:可选，动画持续时长
swiper-animate-delay:可选，
---------------------------bootstrap-------------------------
1.引入bootstrap.css
2.如果要引入bootstrap.min.js的话，需要先引入JQ.(因为所有的JS插件都是依赖于JQ的）。
3.最外层的盒子
.container 用于固定宽度并支持响应式布局的容器
.container-fluid 类似于100%宽度，占据全部视口(viewport)的容器
4.栅格系统
a. 系统会自动分为最多12列，超过12列另起一行显示
b.行(row) 必须包含在.container(固定宽度)或.container-fluid(100% 宽度) 中
c.只有列（column）可以作为行(row)的直接子元素 //列前缀.col-
5.栅格参数
终端 超小屏幕(手机) 小屏幕(平板) 中等屏幕 大屏幕
终端宽度 W<768px 768<=w<992px 992px<=w<1200px w>=1200px
.container 最大宽度 auto(自动) 750px 970px 1170px
类前缀(l列类名) .col-xs- .col-sm- .col-md- .col-lg-
6.列偏移
.col-md-offset-* *//是Number类型的，代表要偏移的列数 相当于margin-left
7.排版
.h1-.h6 36px 30px 24px 18px 14px 12px
删除标签
小号文本
8.文本对齐
.text-left .text-right .text-center .text-justify .text-nowrap
9.大小写转换
.text-lowercase //转小写
.text-uppercase //转大写
.text-capitalize //首字母大写
10.代码块 //<左尖角号( < ) >右尖角号( > )
<pre> //多行代码块<code> //单行代码块</code></pre>
11.表格 table
给table添加的类名
.table 基础类
条纹状的表格 .table-striped
带边框的表格 .table-bordered
鼠标悬停的表格 .table-hover
紧缩表格 .table-condensed //通过padding减半实现
状态类（给行或者列添加的类名）
.active（灰色）
.success（绿色）
.info（蓝色）
.warning（黄色）
.danger（红色）
.table-responsive // 响应式表格
把任何table放在名为.table-responsive的div里面
12.表单
所有设置了.form-control类的、和元素都将被默认设置宽度属性为width:100%
给form添加的
form-group //获取一个最好的排列（label 和 input）
form-inline //内联表单
form-horizontal //水平排列的表单
禁用 disabled
只读 readonly
空间尺寸
.input-lg
默认的
.input-sm
13.按钮
a\button\input 都可以作为按钮
状态类（7种）
.btn-default //默认的
.btn-primary //首选项（蓝底的）
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
尺寸
.btn-lg //大按钮
默认的 //.btn-default
.btn-sm
.btn-xs
14.图片
.img-responsive //让图片支持响应式
图片形状
.img-rounded //圆角
.img-circle //圆形
.img-thumbnail //带边框
15.情景文本类
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
16.情景背景颜色
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
17.三角符号
.caret
18.插件
bootstrop里面所有插件所有插件都依赖jQuery,引入bootstrap.js之前要先引入jQuery
调用
1.data-target="#myModal" //#myModal 指的是弹框的id
2.$(’#myModal’).modal(); //js调用
关闭
data-dismiss=“modal”
H5--大概的,没事看看相关推荐
- html5 h5是什么,H5是什么？你真的了解什么是H5？
原标题:H5是什么?你真的了解什么是H5? 欢庆网提供海量h5模板.手机海报模板.长单页模板,包括邀请函.企业宣传.婚礼.会议会展.求职招聘等场景模板,省事.省心.省力的在线一键生成微信邀请函.海报等 ...
- 简称“H5”的Html5到底是个什么鬼？
自从微信应用号发布之后,Html5技术需求量达到了前所未有的高度,很多网页开发人员已经被老板强迫或半强迫的进行Html5学习了,在学习新技术和丢掉饭碗之间,大多数人选择了前者.对于技术人员来讲,Htm ...
- [深度学习-实践]CycleGAN的入门例子-Tensorflow2.1-keras
系列文章目录 深度学习GAN(一)之简单介绍 深度学习GAN(二)之DCGAN基于CIFAR10数据集的例子 深度学习GAN(三)之DCGAN基于手写体Mnist数据集的例子 深度学习GAN(四)之c ...
- ppt html5转换,PPT还能转H5？这大概是制作招聘H5最快的方法了...
原标题:PPT还能转H5?这大概是制作招聘H5最快的方法了... 各种H5页面屡屡刷爆朋友圈 炫酷.时尚.贱萌.文艺- 非常吸引眼球 特别是招聘类H5 总能吸引志同道合的小伙伴 但是! 我不会做... ...
- 【H5唤起微信“扫一扫”】舒工自定义微信H5唤起扫码Vue组件sg-scan.vue（扫码按钮大概是在底部），注意只是代码片段，不含微信鉴权业务流程
<!--强哥的自定义组件:H5唤起微信"扫一扫"--> <template><div class="sg-scan" :up=&q ...
- 手机h5 页面扫码上传图片 同步显示到pc端
还是那句老话 一切技术为公司业务服务! 这不这天产品又来新思路了,小赵啊,我们的客户不想每次上传图片还得跑到电脑上传,能不能手机扫码 ,在手机上拍照点击上传 就自动显示到pc上了 我说可以啊,用户扫码 ...
- 微信H5调用支付宝支付详细（一）！！！
微信公众号H5页面使用支付包手机网站支付!!! 这两天根据公司的需求写了一个从微信公众号的H5(公众号中的网站)页面跳转支付宝支付,大家应该都知道微信和支付宝这两家 谁也不让这谁.想在微信中用支付宝那 ...
- “是男人就下一百层”h5游戏全网最详细教学、全代码，js操作
"是男人就下一百层"h5游戏全网最详细教学.全代码,js操作 博主的话 游戏展示 编程工具介绍 游戏代码 代码讲解 js 第一步 切换div的显示与隐藏 js 第二步 在菜单页面用 ...
- mpvue开发小程序所遇问题及h5转化方案
项目结构 |---build|---pages.js文件目录|---src|---component子组件|---pages|---业务页面|---store,vuex储存|---utils|---请 ...
- createjs开发h5游戏: 指尖大冒险
之前看到一个指尖冒险游戏,觉得挺有意思,就想学习一下怎么实现,毕竟当产经提出类似的需求时,问我等开发可不可以实现的时候,不至于回答不知道. 本文的主要思路,参考的是凹凸实验室的这篇文章:H5游戏开发: ...
最新文章
- 不当免费技术支持的10种方法
- FastDFS的配置、部署与API使用解读（7）Nginx的FastDFS模块（转）
- ffplay的快捷键以及选项
- 2021年KTV行业发展蓝皮书
- 《C和指针》——指向数组的指针（逐个移动和逐行的区别）
- 未找到 arp 项。_高新热力公司抢工期保供暖 42项新建改造项目全部完工
- java环境变量_Java的下载及环境变量的配置
- iPad上的Cookie到底有多长？
- String的内存分配与拼接操作，华为架构师深入讲解Java开发
- 软件工程 第五章 详细设计
- mycat + keepalived + haproxy + mmm
- linux邮件客户端配置文件,在Deepin V20下配置Evolution邮件客户端，添加新邮箱全过程...
- 雷神笔记本关闭触摸板
- KT148A语音芯片ic的硬件设计注意事项
- Fansblog （HDU - 6608）（威尔迅定理+费马小定理）
- windows edge页面显示status_stack_buffer_overrun的解决
- Weex生态质量建设
- 如何通过RGB值判断颜色深浅（转）
- 一阶电路误差分析_RC有源低通滤波器的一阶二阶原理分析及其推导！
- STM32CubMX自学笔记（十）---IIC通信实验