疫情当前，无论是学校，老师还是家长学生，都需要应对多方面的挑战。如何做好“停课不停学”？如何做好疫情防控工作？都对我们提出了更高的要求。但是作为大学生，上课和学习不是一回事儿，疫情影响了正常上课，但是绝不会影响大学生学习的热情。这次逆战班的开设，让像我一样正处在人生拐角处的大四学生多了一次提升自己的机会，我们有坚毅的自制力，跟着逆战班一起对抗着突如其来的闭关。目前已经开班3周整，以下是我第三周整理的知识点。
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
下面是一个简单的HTML5文档，是HTML的初始代码。<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行：
CSS Sprite
特性
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处
可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开
CSS常见功能实现
1.导航菜单
2.超大图居中
3.滑动门
选项卡、标签页（tab）
特殊元素要添加 唯一的class标识。
4.轮播广告
圆点左右居中：
点容器：width:100%;text-align:center;
点容器中的li:display:inline-block;
5.漂亮的表单控件
复选框上传按钮：label方式
position+opacity方式
整页和整站制作
transition过渡
transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height;
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
需要添加单位：s (秒) ms (毫秒) 1s == 1000ms
transition-delay : 定义过渡效果何时开始。
2s : 延迟两秒进行过渡
-2s : 提前两秒进行过渡
transition-timing-function : 规定速度效果的速度曲线。
运动形式：加速、减速、匀速...
linear
ease（默认值）
ease-in
ease-out
ease-in-out
cubic-bezier
复合写法：
transition:all 2s linear;
transition:linear 2s all;
transition:2s linear all;
注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。
transition:2s 3s linear all;
注意：不要把transition放到hover中
transform变形
translate : 位移
transform:translate(100px,100px); : 两个值 分别对应 x 和 y。
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px); ( 3d )
scale : 缩放
transform:scale(num) num是一个比例值，正常比例是1。
transform:scale(num1 , num2) 两个值 分别对应 w 和 h
transform:scaleX()
transform:scaleY()
transform:scaleZ() ( 3d )
rotate : 旋转
transform:rotate(num) num是旋转的角度 30deg
正值：顺时针旋转
负值：逆时针旋转
表示一个角：角度deg 或 弧度rad
rotateX() ( 3d )
rotateY() ( 3d )
rotateZ()
注 : rotate()跟rotateZ()是等价关系。
skew : 斜切
transform:skew(num1,num2) : num1和num2都是角度，针对的是x 和 y
transform:skewX()
transform:skewY()
注：skew没有3d写法。
注：所有的变形操作，都不会影响到其他元素。(类似于相对定位)
注：变形操作对inline(内联元素)不起作用的。
注：transform可以同时设置多个值。
先执行后面的操作，在执行前面的操作。
位移会受到后面要执行的缩放、旋转和斜切的影响。
tranform-origin 基点位置
主要是针对旋转和缩放，默认都是中心点为基点。
容器width:300px;hight:300px;小容器：width:200px;height:200px;
例：tranform-origin:center center中心点
0 0左上角
100px 100px右下角
150px 150px容器中心点
特效
要确定：起点值和结束值。
套路：1.先把静态的效果做出来。
2. 把要运动的终点位置先做出。
3. 指定 tranform变形中对应的 0 值 ( 结束点位置 ).
4. 写 tranform变形的起点值 (起点的位置)
animation动画
原理：逐帧动画。会把整个运动过程，划分成100份。
animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
animation-timing-function : 动画的运动形式 ease linear
@keyframes 动画的名字 {
from {}
to {}
}
from : 起点位置 , 等价于 0% to : 终点位置 ，等价于 100%
注：默认情况下，元素运动完毕后，会停到起始位置。
复合样式：
animation
animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效
animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%~100%)，一次反向(100%~0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%
3D效果
1.perspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。
3D的眼镜
rotateX
rotateY
translateZ
scaleZ
注：反馈回来的立体，仅限于平面。
2.transform-style : 3D空间
flat (默认值2d)、preserve-3d (3d，产生一个三维空间)
注：只要是有厚度的立体图形，就必须添加3D控件。
注：在立方体中默认会沿着第一个面进行旋转。
tranform-origin : x y z; (z不能写单词，只能写数字)
3.perspective-origin : 景深-基点位置，观察元素的角度。
4.backface-visibility : 背面隐藏
hidden、visible (默认值)
5.3d写法
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg 例：rotate3d(1,1,1,30deg);
6.background-origin : 背景图的填充位置
（ 默认情况下，如果xy都平铺的话，border padding content 区域都有背景图。）
padding-box (默认) : 在padding区域开始填充背景图
border-box : 在border区域开始填充背景图
content-box : 在content区域开始填充背景图
7.background-clip : 背景图的裁切方式
padding-box
border-box (默认)
content-box
注：当位置与裁切写入复合样式中，那么第一个值表示位置，第二个值表示裁切。
8.CSS3渐变
线性渐变：
background-image:linear-gradient( 20deg , red , blue);
注：角度是0deg在容器的最下面bottom位置。正数就是顺时针旋转。
径向渐变：
radial-gradient : 径向渐变
字体图标
font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。
好处 1.可以非常方便的改变大小和颜色
2.放大后不会失真
3.减少请求次数和提高加载速度
4.简化网页布局
5.减少设计师和前端工程师的工作量
6.可使用计算机没有提供的字体。
字体图标用法
@font-face{}
所有的自定义的字体都会放到一个文件中： xxx.svg
.eot .woff 这些文件主要是用来适配不同的环境或操作系统。
文字阴影
text-shadow
x
y
blur
color
多阴影
注：默认情况下，阴影的颜色跟文字的颜色相同。
盒子阴影
box-shadow
x
y
blur : 模糊值
spread : 范围
color
inset : 内阴影 outset(默认值：外阴影 , 写上outset不会生效)
多阴影
注：默认盒子的阴影就是黑色。
浏览器前缀
chrome safari -webkit-
ie -ms-
firefox -moz-
opear -o-
来源：CSDN
作者：GLINLIND
链接：https://blog.csdn.net/GLINLIND/article/details/104458184