1 移动端开发分开主要分为三类

web App开发->H5页面开发 ->HTML5+CSS3+javascript

2 HTML5语义化标签（结构标签和功能标签）

h1~h6 img p ul li ol li dl dt dd em strong q a
语义化标签：合理的标签做适合的事情

3 结构化标签（用来布局）

让页面结构更加清晰，更加有利于搜索引擎，对未来浏览器也更加友好
section 一块区域 范围非常大
header 头部或者一块区域的头部
nav 页面的主导航
main 主体内容
footer 尾部或者一块区域的尾部
article 独立的内容（放在任何地方都可以独立存在），例如一篇完整的文章
aside 对主体内容的辅助信息，放在aside标签里的内容可有可无 ，例如侧边栏，文章的广告
figure 插图
ficaption 对插图的描述称为图题
forms input元素的种类
text password button submit reset radio checkbox
search 手机键盘右下角按钮的图标不是像右的箭头，而是变成search
tel 手机号码输入框，在手机上直接出现数字键盘
url url地址
email 邮箱地址
number 数字输入框

4 属性

placeholder 设置输入前的提示信息，当输入内容时，提示信息消失
autocomplete 是否保存用户输入的信息 on->保存 off->不保存
autofocus 光标自动聚焦
required 必须填写内容
pattern 设置正则验证的规则
validity这个对有几个属性
valid 验证不通过时返回false
patternMismatch typeMismatch valueMissing customError 验证不通过时返回true
form属性 可以让表单元素关联form标签（也就是说这个表单元素是属于哪个form标签下）
novalidate 作用在form标签上，表单元素不需要验证，就可以提交
formnovalidate 作用在submit类型的按钮, 表单元素不需要验证，就可以提交
window.document.designMode = "on";
通过dataset获得自定义属性值
console.log(oP.dataset.nameAge)

5 CSS3选择器

关系选择器
E+F E相邻的弟弟节点F
E~F E所有的弟弟节点
结构选择器
:nth-child(n) 选定第几个子元素 n是从1开始设置 （不分类型）
:nth-child(even) 偶数
:nth-child(odd) 奇数
:nth-child(2n) n从0开始设置的
:nth-of-type 会把子元素根据标记名分类，然后再去同种类型的元素中查找
:first-child
:first-of-type
:last-child
:last-of-type
:only-child 查看当前元素的子元素是否唯
:only-of-type 同种类型的子元素只有一个
:empty 没有任何子元素（包含文本，换行，空格）
ul li:nth-child(2){1.先找到第二个子元素 2.看这个资源的标记名是否为li
div:empty{
}
ul :not(:first-child){
}

否定选择器
:not(选择器) 不包含某个元素（排除某个元素）
属性选择器
E[attr = val] 只能等于val
E[attr|=val] 只能等于val或者以val-开头
E[attr*=val] 包含val即可
E[attr~=val] 属性值可以有多个，其中一个是val
E[attr^=val] 以val开头
E[attr$=val] 以val结尾
ul li[class$="zf"]{
}

目标伪类选择器
:target 匹配url指向的目标元素

6 渐变

linear-gradient 线性渐变 沿着一条直线轴方向渐变
第一个参数 ：渐变的方向
从第二个参数开始设置渐变的颜色和位置
red 20%，green 70% 20%到70%之间称为渐变过渡区
颜色的位置可以通过百分比或者具体的像素值
如何去掉渐变过渡区？ 对每个颜色设置起始位置和结束位置

radial-gradient 径向渐变
由一个点向多个方向渐变
第一个参数：渐变的形状
at后面设置圆心的位置 left top center bottom| 10px(水平坐标) 20px(垂直坐标) 默认在中心点
重复的径向渐变 repeating-radial-gradient

7 阴影

box-shadow （默认是外阴影）
第一个参数（水平偏移量） ：正->右 负->左
第二个参数（垂直偏移量） ：正->下 负->上
第三个参数：模糊半径
第四个参数：扩展半径 正：阴影往外扩散 负：阴影往内收缩
第五个参数：阴影的颜色
inset 内阴影 并且偏移的方向和外阴影相反
text-shadow 文本阴影 相对于盒子阴影少了扩展半径，其他都一样

8 图片展示

background-origin
padding-box 从padding区域显示
border-box 从border区域显示
content-box 从content区域显示

background-clip
padding-box 从padding区域向外裁剪
border-box 从border区域往外裁剪
content-box 从content区域往外裁剪
text 文本裁剪
background-size
100% 100% 百分比
10px 10px 数值
contain 按原始比例收缩,背景图显示完整,但不一定铺满整个容器
cover 按原始比例收缩,背景图可能显示不完整,但铺满整个容器
background-attachment
背景图片是滚动的还是固定的 fixed(固定的) 默认是滚动的

9 过渡动画

transition细分属性
transition-property 过渡属性 默认值all
transition-duration 动画运行的时间
transition-timing-function 动画运行的速度
ease(默认值) linear ease-in ease-out ease-in-out
transition-delay 延迟时间

复合写法
transition:width 1s linear 1s;
transition:width 1s linear 1s,height 1s ease 0.5s;设置多个属性
如果仅仅是属性名不一样，其他的属性值都一样
transition:all 1s ease 1s;
->transition:1s; 只需要设置运行时间，其他的都是默认值

做PC端项目时，为了兼容各个浏览器，需要写如下前缀的写法
-webkit-transition-property: width;
-moz-transition-property: width;
-ms-transition-property: width;
-o-transition-property: width;
transition-property: width;

移动项目，只需要写两种写法
-webkit-transition-property: width;
transition-property: width;

变形属性 transform 旋转 倾斜 缩放 平移 正负确定方向
transform:rotate(45deg)
正->顺时针 负->逆时针
transform:scale(1,1)
默认值1 >1放大 <1 缩小
transform:skew(15deg,30deg)
第一个参数 正->水平往左 负->水平往右
第二个参数 正->垂直往下 负->垂直往上
transform:translate(tx,ty)
tx,ty默认值是0 如果没有发生平移，tx和ty是0
tx:正->右 负->左 ty:正->下 负->上

transform-origin 发生变形时基准点默认情况下是元素的中心点
rotate ,scale,skew可以改变变形基准点，translate不能改变
变形的方法可以一起使用，但是注意先后顺序，一旦和translate一起结合时，如果要保证变形的基准点不发生改变，则把translate放最后

10 帧动画

特征：1.可以设置多种状态，可以制作复杂的动画效果
2.不需要触发条件，立马执行
步骤 ：1.通过@keyframes 声明动画的运动轨迹

@-webkit-keyframes 动画名{
0%{  动画运行时间的百分比

}
50%{

}
}
@keyframes 动画名{
0%{  动画运行时间的百分比
}
50%{
}
}

通过animation调用声明的帧动画
animation-name 动画名称 (必写)
animation-duration 执行时间 （必写）
animation-timing-function 动画运行的速度 ease(默认值)
animation-delay 延迟时间
animation-iteration-count [1|infinite] 执行的次数
animation-direction:normal（默认值）|reverse(反方向)|alternate（交替）|alternate-reverse（反方向交替）
animation-play-state：[running（运行的，默认值）|paused（停止）] 动画运行的状态
animation-fill-mode 动画结束后的状态
none|backwards(回到起始位置)|forwards(停留在最后一帧)|both(根据方向，可能停留在第一帧或者最后一帧)

复合写法
animation:move 1s ease 1s 2 reverse both
->animation:move 1s 1 both;

11 3D变换

如果想要实现3D效果，首先得设置如下两个属性
perspective:2000px;景深（近大远小的效果） 一般设置在800px~2000px (用户到z轴的距离) 作用在祖先标签（包含父标签）
transform:perspective(2000px) 直接作用在变形元素上
transform-style:flat|preserve-3d(3D空间) 作用在变形元素的父标签上
perspective-origin:center 默认情况下是看到物体中心的位置上

3d方法
平移
transform:translate3d(tx,ty,tz)
transform:translateX()
transform:translateY()
transform:translateZ() 正->前->变大 负->后->变小

缩放
transform：scale3d(sx,sy,sz) 默认值是1
transform:scaleX()
transform:scaleY()
transform:scaleZ() 不能单独使用，得配合着其他变形方法一起使用

翻转
transform：rotate3d(rx,ry,rz,a);rx，ry,rz向量坐标 a角度 矩阵算法
transform:rotateX(45deg) 围着X轴翻转 正->前翻 负->后翻 transform:rotate3d(1,0,0,45deg)
transform:rotateY(45deg) 围着Y轴翻转 正->右翻 负->左翻 transform:rotate3d(0,1,0,45deg)
transform:rotateZ(45deg) 效果等同于2d的rotate(45deg)，但是是在Z轴平面上旋转 transform:rotate3d(0,0,1,45deg)
transform:rotateX(45deg) rotateY(30deg) rotateZ(30deg);

12 video标签

-controls 显示用户操作界面
autoplay 自动播放
loop 循环播放
preload :auto 预加载音频文件
metadata 只加载音频文件的元数据，例如（音频文件总共的播放时间）
none 不提前加载音频文件
音频文件播放 play() 停止 pause()
怎样判断音频文件是播放还是停止的beyond.paused true->停止 false->播放