H5
# 兼容性处理:
创建一个这个标签.使用html5shiv.js搭配 cc:ie6条件注释
# 表单事件
oninput:当表单的值发生改变时立即出发。（HTML5新增）
onchange:当表单的值发生改变并且失去焦点的时候触发。
# 表单验证
<input type="email">:email类型，在提交表单时，会验证表单的内容（只能初略的验证）
<input type="url"> url类型
<input type="text" require=""> 非空校验
<input type="text" pattern="[1-9]\d{4,10}"> 自定义规则其他表单属性
<input type="text" autocomplete="off" name="age"> 自动补全，默认为on，值为off的时候表示
关闭，一定要有name属性才生效.
<input type="file" multiple> 支持多个文件上传
<input type="text " form="myForm"> 配合form表单的id进行关联，让input框可以写在任意位置。
<input type="text " list="myList"> 配合datalist使用
# 音频
<audio src="./music/rain.mp3" controls loop autoplay></audio>
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
# 视频
<video src="./video/video.mp4" controls loop autoplay></video>
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
poster:视频没有播放的时候的预览图片，海报音视频常用的几个方法 play:控制视频播放
pause：控制视频暂停
load：重新载入视频
width:设置播放窗口的宽度或者高度,只用设置一个 ,会等比例缩放
# 获取元素的新方法
根据类型查找元素，返回一个伪数组,document.getElementsByClassName(“className”)
通过css选择器获取元素，返回符合要求的第一个元素,注意返回结果是对象
document.querySelector(“css选择器”)
通过css选择器获取元素，返回伪数组 document.querySelectorAll(“css选择器”)类名操作
添加类 node.classList.add(“classname”);
移除类 node.classList.remove(“classname”);
切换类 node.classList.toggle(“classname”);
判断类 node.classList.contains(“classname”);
# 自定义属性
其格式如下data-*=””
1、读取 demo.dataset[‘name’] 或者 demo.dataset[‘age’]
2、设置demo.dataset[‘name’] = ‘web developer’
3、demo.dataset[‘userName’]//如果-比较多，需要转换成驼峰命名法。
# 进度条有很大的兼容性
<p><progress value="50" min="0" max="100"></progress></p>
<p><meter value="30" min="0" max="100" low="20" high="80">
# 网络状态 :
navigator.onLine返回用户当前的网络状况，是一个布尔值
true 为在线状态
false 如果浏览器连不上网(包括局域网),就是离线(脱机)状态
# 用户地理信息
HTML5规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。在获取地理位置之前，会询问用户，只有在获得许可之后，才能获取到用户的位置信息。
获取当前的地理位置信息:navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
重复的获取当前的地理位置信息:navigator.geolocation.watchPosition(successCallback, errorCallback)
# cookie
使用cookie：操作太麻烦，最多只能存储4k ,每次请求都会带上cookie，所以用户名和密码、还有sessionID
会存储在cookie中
是以字符串形式存在的,这个字符串有固定的格式, key=value; key1=value1
在获取cookie内容时，一般需要通过正则或者字符串的方法进行处理，转换成对象，最终得到数据。
使用jQuery.cookie插件操作cookiewindow.sessionStorage的特点
1. 声明周期为关闭浏览器窗口
2. 不能在多个窗口下共享数据。
3. 大小为5M
window.localStorage的方法
1. 永久生效，除非手动删除
2. 可以多个窗口共享
3. 大小为20M 大小为5M左右
window.sessionStorage与window.localStorage的方法
setItem(key, value) //设置存储内容
getItem(key) //读取存储内容
removeItem(key) //删除键值为key的存储内容
clear() //清空所有存储内容
key(n) //以索引值来获取存储内容
# FileReader对象
用于读取文件拖拽元素
页面中设置了draggable=”true” 属性的元素,器中img a标签默认是可以被拖拽的.拖拽元素
ondrag 应用于拖拽元素,整个拖拽过程中都会调用
ondragstart 应用于拖拽元素,当拖拽开始调用
ondragend 应用于拖拽元素,当拖拽结束时调用目标元素
ondragover 应用于目标元素,当停留在目标元素上时调用
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用.
CSS3
# PC端浏览器支持程度差，需要添加私有前缀私有前缀
谷歌、苹果浏览器：-webkit-
火狐浏览器：-moz-
IE浏览器：-ms-
欧朋浏览器：-o-css3
# 选择器
关系选择器
DIV>P 子代选择器,选择div的子级中的所有p标签
div p 后代选择器 选择div后代中所有p标签
div+p 相邻选择器 选择紧跟着div后面的p标签
div~p 兄弟选择器,选择div后面的所有兄弟元素中的p标签
属性选择器
li[skill] 选择拥有skill属性的元素
li[skill=”val”] 选择拥有skill属性,并且值为val的元素
li[skill^=”val”] 选择拥有skill属性,并且值以val开头的元素
li[skill$=”val”] 选择拥有skill属性,并且值以val结尾的元素
li[skill^=”val”] 选择拥有skill属性,并且值包含val的元素
伪类选择器
child系列
li:first-child 匹配的是li 的父元素ul的第一个子元素
li:last-child 匹配的是li 的父元素ul的最后一个子元素
li:nth-child (1) 匹配的是li 的父元素ul中的指定下标的子元素(下标从1开始)
li:nth-child (odd) 匹配的是li 的父元素ul中的奇数的子元素(下标从1开始)
li:nth-child (2n) n从0 开始计算,2n代表的是偶数,2n+1代表的是奇数
伪元素选择器
before和after
必须指定content属性，可以在content属性中写入文本内容，但是通常为空字符串。默认是行内元素，无法
设置宽高，需要指定display:block或者position:absolute
E::before :在元素子节点的最前面添加一个内容。
E::after :在元素子节点的最后面添加一个内容
。
# 颜色
opacity:如果给父盒子设置opacity，所有的子盒子都会有这个效果，opacity存在兼容性问题，如果是在IE678下，应该使用filter进行设置 解决盒子继承透明度继承的方法
如果是纯色的背景，可以是使用rgba 如果是图片，可以脱离父子关系，让后用定位的方式来做。
rgba :
R:Red、G:Green、B:Blue、A:Alpha，R、G、B取值范围0~255，A的取值范围是0-1 RGBA可以用于所有使用颜色的地方
rgb三个值越小，颜色越黑
hsl:
H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度取值范围0~1
background-color: hsla(120,100%,50%,1);
# 盒模型
标准盒模型 ： 盒子的大小 = width + padding + border
怪异盒模型 width=content+padding + border
# 文字阴影 ：
text-shadow：水平偏移 垂直偏移 羽化大小
# 颜色边框阴影
:box-shadow 水平偏移 垂直偏移 羽化大小 阴影外延值 颜色 inset(设置对象的阴影类型为内阴影).
# 边框圆角 border-radius
# 边框图片
border-images(兼容性很严重)
border-image-source:url( ) 指定图片的地址
border-image-slice:27 指定图片的切割方式
border-image-repeat: round( ) repeat( ) 指定图片的平铺方式
border-image-width: 指定边框的大小
border-images-outset: 指定边框与内容之间的间隙
合写 border-image: url(“images/border01.png”) 27 repeat;
# 背景 background
background-size 设置背景图片的尺寸大小
background-size:600px 400px; 设置图片的大小
background-size:100% 100% 百分比是相对于盒子自身的宽度和高度
background-size:contain 保证等比例缩放,但是会出现留白
background-size:cover 保证等比例缩放,并且不会留白,但是出现有一部分图片不显示
# background-clip
设置背景区域的大小 盒子的背景区域是整个盒子,包括边框和padding
background-clip:border-box 设置背景区域包括了边框
background-clip:padding-box; 背景区域只包含padding和content
background-clip:content-box; 背景区域只包含content
background-origin 设置圆点位置,默认是padding的地方开始
background-origin: border-box; 设置原点从border开始
background-origin: padding-box; 设置原点从padding开始,默认值
background-origin: content-box; 设置原点从content开始
# 多重背景
background设置背景的时候，可以设置多个背景图片，使用逗号隔开。注意颜色只能设置一次，并且通常来说，
颜色都是在最后面进行设置。渐变实际上相当于一张图片,因为需要加给background-image才会生效渐变的两个要求
: 有区间,有颜色变化.
# 渐变 linear-gradient和radial-gradient
渐变实际上相当于一张图片,因为需要加给background-image才会生效
line-gradient(线性渐变)
background: linear-gradient(red, blue); (默认)是从上向下 background: linear-gradient(to right red, blue);
从左到右的线性渐变
background: linear-gradient(to bottom right , red, blue);
从左上角到右上角:background: linear-gradient(45deg, red, blue); 使用角度渐变 :background: linear-gradient(pink, red, blue); 使用多个颜色节点:background: linear-gradient(to right ,rgba(255,0,0,0), rgba(255,0,0,1);
使用透明度:background-image: linear-gradient(to right, red 20%, green 80%)
设定渐变的范围:background-image: linear-gradient(to right, red 20%, green 20%) 每一个区间表示渐变颜色的范围
radial-gradient (径向渐变)
background-image: radial-gradient(red, green); 颜色结点均匀分布 background-image: radial-gradient(200px at center(top left)r, red, green); 设置圆的半径和圆心
background-image: radial-gradient(200px 80px at center, red, green); 指定椭圆
background-image: radial-gradient(200px at center, green 50%, red 50%);
指定范围过渡
# transition
是c3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画.)
transition-property:all; 设置过渡属性
transition-duration:2s; 设置过渡时间
transition-delay:2s; 设置过渡延时. transtion-timing-function:linear,ease,ease-in,ease-out,ease-in-out,steps
设置过渡的类型
属性合写: 属性 持续时间 延时 速度
过渡的注意点:
过渡必须要有两个状态的变化.
过渡可以写在a状态,也可以写在B状态,但是如果写在B 状态,俺么回来的时候就没有过渡效果了2d转换
# transform:
转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。
scale 缩放
transform: scaleX(0.5);//让宽度变化
transform: scaleY(0.5);//让高度变化，注意不能写多个transform，不然会覆盖。
transform: scale(0.5);//让宽度和高度同时变化
注意scale接收的值是倍数，因此没有单位
scale可以是一个值，如果是一个值，不是说仅仅缩放宽度，高度也会等比例的缩放。
可以通过transform-origin设定旋转原点
# translate 平移
transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, 100px);
transform: translate(50%, 50%); 注意
translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。
translate移动的元素并不会影响其他盒子，类似于相对定位。
# rotate 旋转
transform: rotate(360deg);//旋转360度
transform: rotate(-360deg);//逆时针旋转360度
注意:单位是deg，角度，不是px
正值顺时针转，负值逆时针转
可以通过transform-origin设定旋转原点
转换原点写在A状态，不能写在B状态
# skew 斜切 扭曲
skew在实际开发中，是用的最少的一个属性。一般来说，x和y只会倾斜其中的一个 transform: skewX(30deg); 在水平方向倾斜30deg
transform: skewY(30deg); 在垂直方向倾斜30deg
transform-origin 转换原点
transform-origin: center center;
transform-origin: 40px 40px; 转换合写问题
transform:translateX(800px) scale(1.5)
# rotate(360deg) ;
1. transform属性只能写一个，如果写了多个会覆盖
2. transform属性可以连写，但是顺序对效果影响的，因为它会在第一个效果的基础上执行第二个效果，然后执行第三个效果（通常会把rotate放后面）
3. 如果对transform进行过度效果的时候，初始状态和结束状态一一对应
# rotate 旋转
transform: rotate(45deg);// 让元素在平面2D中旋转
transform: rotateX(45deg);// 让元素沿着X轴转45度
transform: rotateY(45deg);// 让元素沿着Y轴转45度
transform: rotateZ(45deg);// 让元素沿着Z轴转45度3d转换
# perspective透视
1. 在视觉上，能够产生近远小的效果。 房子的真实大小是一样，仅仅是在视觉上会有一个近大远小的效果。
2. perspective：给父元素添加
3. 1000px：视距 眼睛距离物体的一个距离，值越大，近大远小的效果越不明显，视距越小，近大远小的效果就越明显
# transform-style
flat:默认值，2d显示
preserve-3d: 3d显示
transform-style与perspective的区别
透视：透视只是相当于设置了一个距离，辅助我们查看3D效果的工具
preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。
一个3d元素可以没有perspective，但是不能没有transform-style
# backface-visibility
指定元素背面面向用户时是否可见。
visible： 指定元素背面可见，允许显示正面的镜像。
hidden： 指定元素背面不可见
注意：只有在3d的情况下，backface-visibility才会生效
动画
# animation
动画也是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。
动画和过渡的区别
1. 过渡必须触发，需要两个状态的改变。
2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多
使用动画的基本步骤
1.通过@keyframes指定动画序列
2.通过百分比或者from/to将动画分割成多个节点
3.在各个节点中分别定义动画属性
4.通过animation将动画应用于相应的元素
animation详解
animation-name:动画名称，由@keyframes定义的
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环次数
animation-direction：设置动画在循环中是否反向运动
animation-fill-mode：设置动画时间之外的状态
animattion-play-state:设置动画的状态。
# 字体图标
使用精灵图的缺点
1,使用麻烦,需要量位置
2,精灵图还是需要加载
3,放大会失真
iconfont 字体图标
1.使用方便
2,放大不会失真
3,操作颜色.大小,阴影,非常方便
# 过渡结束时间:transitionend
# 弹性布局
display:flex
给父盒子添加display:flex 指定一个盒子是弹性盒子. 弹性盒子就有和主轴和侧轴的概念 默认主轴从左
向右 ，默认侧轴从上到下
flex-direction: 修改主轴的方向
row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。
justify-content: 设置在主轴方向的对齐方式
flex-start 元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。
不换行: flex-wrap:nowrap
align-items: 调整不换行的侧轴对其方式
flex-start flex-end center
换行 : flex-wrap:wrap
align-content:调整换行的侧轴的对其方式
flex-start flex-end center space-between space-around 给子元素添加
flex: 设置子元素如何分配父元素的空间
order: 设置子元素的排列顺序，值越小，越前
align-self: 设置自身在侧轴的排序顺序
# less的预编译:
CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。
成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函
数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，
LESS 可以让我们用更少的代码做更多的事情。本质上，LESS 包含一套自定义的语法及一个解析器，用户根据
这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪
CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
1.变量:@director:right;
2.mixin混入:混入样式类 混入函数(带参/不带参/带默认参)
3.嵌套:&
4.导入:@import “01-variable”;
5.函数(运算) .my_btn {.btn();}.btn_border(@width) {border: @width solid #000;}
# link和@import 的区别
link引用CSS时，在页面载入时同时加载；
@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；
@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
移动端的布局
# 移动端web
特点:手机端的兼容性比pc端小很多,因为手机端的浏览器版本比较性.
手机端屏幕比较小,能够放得内容也比较少;
PC端,固定版心,让所有的分辨率的电脑版心都是一样的.而移动端无法设置版心,因为移动端的设备本身就比较小,设置版心不合适.因此移动端大多会使用流式布局(也叫百分比布局);
设置视口:
# 三种布局:
# 流式布局(百分比布局 无法百分百还原设计图)
特征:
宽度自适应,高度写死,并不是百分百还原设计图;
图标都是固定死大小的,包括字体等也是固定死的.
一些大的图片,设置宽度为宽度百分比自适应即可,随着屏幕大小进行变化;
经典的流式布局:
1.左侧固定,右侧自适应;
2.右侧固定,左侧自适应;
3.两侧固定.中间自适应(圣杯布局,双飞翼布局);
4.等分布局;
# 响应式布局;( 针对新网站,移动+pc);
媒体查询(C3):分为大屏,中屏,小屏,超小屏;
语法:/*查询屏幕*/@media screen and 条件 {样式 }
弊端:代码多麻烦.用响应式框架(bootstrap)
# rem布局;(能适配所有屏幕,+less);
rem的基准点是根元素html的字体大小，因此我们只需要设置不同屏幕的html的font-size大小不一样就可以达到不同屏幕的适配了。
rem与媒体查询
使用rem配合媒体查询可以适配多个终端
@media (min-width: 320px) {
html {
font-size: 16px;
}
}
@media (min-width: 360px) {
html {
font-size: 18px;
}
}
rem-flexible
引入2个js文件
使用less进行rem的计算设置
@remBase:75; 设置基准值 设置图/10
@rem:round(1/@remBase,6)*1rem
