HTML5新增标签
HTML5针对以前的不足，新增了一些新的标签、表单以及表单属性等。
语义化标签
之前在做布局的使用，使用了大量的div，这些div都是没有语义的，我们不能很轻易的就判断出某个div大致是什么内容，所以在HTML5中新增了语义化标签来弥补这个缺陷，现在我们可以根据标签名去推断出其大致内容，方便代码的阅读，而且使用语义化标签也可以提高被搜索引擎检索的概率。
多媒体标签
HTML5原生支持音视频文件的播放，其中音频标签和视频标签的使用方式基本一致 。
<audio>标签支持三种音频格式，分别是MP3、Wav以及Ogg，其中MP3格式所有的浏览器都支持。
语法：
<audio src="文件地址" controls="controls"></audio>
<audio>标签常见属性👇
<video>标签支持三种视频格式，分别是MP4、WebM以及Ogg，其中MP4格式所有的浏览器都支持。
语法：
<video src="文件地址" controls="controls"></video>
其中<video>标签有很多属性，比较常见的有👇
input表单
在HTML5中，增加了一些新的input类型，使其语义化更加明显。
HTML5中不仅新增了一些input类型，还新增了一些表单属性👇
CSS3新增选择器
属性选择器
属性选择器可以在不用借助于类或者id选择器的情况下直接根据元素特定属性来选择元素，它的权重为10。
<!-- 将具有value属性的按钮1中文字颜色修改为红色，按钮2因为不具有value属性，所以文字颜色没有改变 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[value] {
color: red;
}
</style>
</head>
<body>
<input type="button" value="按钮1">
<input type="button">
</body>
<!-- 将value属性值为 “按钮2” 的button的文字颜色修改为蓝色 -->
<head>
<style>
input[value="按钮2"] {
color: blue;
}
</style>
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
</body>
结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级元素选择里面的子元素。
<head>
<style>
ul li:first-child {
background-color: skyblue;
}
ul li:last-child {
background-color: aquamarine;
}
ul li:nth-child(2) {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul>
<li>欢迎关注</li>
<li>微信公众号：</li>
<li>Robod</li>
</ul>
</body>
这三个和上面三个使用起来类似，不过还是有一点区别的，nth-child是对父元素里面所有子元素排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配；而nth-of-type则是对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个子元素。
<head>
<style>
ul li:nth-child(1) {
/* 先对ul里的所有子元素排序，找到序号为1的元素，发现是p标签而不是li，所以样式不生效 */
background-color: skyblue;
}
div li:nth-of-type(1) {
/* 先匹配对应的li元素，对li元素进行排序，排序后选择第一个li */
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<p>微信公众号：Robod</p> <!-- 序号是1 -->
<li>欢迎关注</li> <!-- 序号是2 -->
<li>微信公众号：</li>
<li>Robod</li>
</ul>
<div>
<p>p</p>
<li>li1</li> <!-- 序号是1 -->
<li>li2</li> <!-- 序号是2 -->
</div>
</body>
伪元素选择器
有的时候我们只需要一个简单的标签，如果用HTML做的话就会使代码结构变得复杂，这时候就可以用伪元素选择器，它可以帮助我们利用CSS创建新标签元素，从而简化HTML结构。伪元素选择器有两个，分别是::before（在元素内部的前面插入内容）和::after（在元素内部的后面添加内容），需要注意的是它们创建的元素是行内元素，而且在文档树里面是找不到的，这两个选择器必须要有content属性(可以没有值)，伪元素选择器的权重是1，
<!--语法：
element::before{}
-->
<head>
<style>
div {
position: relative;
width: 300px;
height: 200px;
background-color: aquamarine;
}
div::before {
content: '微信公众号';
}
div::after {
position: absolute;
font-size: 30px;
content: "Robod";
right: 10px;
}
</style>
</head>
<body>
<div>
:
</div>
</body>
CSS3新特性
CSS3盒模型
之前我们在定义盒子大小的时候，指定了width属性，可是盒子实际的宽度并不是width，padding和border都会将盒子撑大，也就是实际的盒子宽度是width+padding+border，而现在可以用box-sizing来指定盒模型，box-sizing属性有以下两个值。
<head>
<style>
.box1 {
width: 400px;
height: 100px;
border: 20px solid red;
background-color: aqua;
padding: 10px;
box-sizing: content-box;
}
.box2 {
width: 400px;
height: 100px;
border: 20px solid green;
background-color: blanchedalmond;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">请小伙伴们给我的文章来个赞！</div>
<div class="box2">欢迎关注微信公众号：Robod</div>
</body>
CSS3滤镜filter
filter属性将模糊或颜色偏移等图形效果应用于元素，通常用于调整图像，背景和边框的渲染。常用的几个函数如下：
calc()函数
calc()函数可以在声明CSS属性值时执行一些计算，例如：
width: calc(100% - 30px); <!-- 表示比父盒子小30像素 -->
CSS3过渡
过渡动画是从一个状态渐渐的过渡到另外一个状态，通常和:hover一起搭配使用。
/*语法：*/
transition:要过渡的属性 花费时间 运动曲线 何时开始
/*参数说明 */
1、属性：想要变化的css属性,宽度高度背景颜色内外边距都可以，如果想要所有的属性都变化过渡,写一个 all 即可
2、花费时间：单位是秒(必须写单位)比如0.5s
3、运动曲线：默认是ease(逐渐慢下来，可以省略)，还可以是linear(匀速)，ease-in(加速)，ease-out(减速)，ease-in-out(先加速后减速)
4、何时开始：单位是秒(必须写单位)，可以设置延迟触发时间默认是0s(可以省略)
<head>
<style>
div {
width: 50px;
height: 50px;
background-color: aqua;
/* 如果要写多个属性，用逗号隔开即可 */
/* transition: width 1s ease-in-out .5s,height 1s ease-in-out .5s; */
/* 如果所有的属性都要过渡，写 all 即可 */
transition: all 1s ease-in-out .5s;
}
div:hover {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>微信公众号：Robod</div>
</body>
2D转换
移动translation
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
/*第一个参数是x方向移动的距离，第二个参数是y方向移动的距离，可以是百分比，值可以为0但不能没有*/
transform: translate(20px,0);
/*也可以分开写，👆的一行等同于👇两行*/
transfrom: translateX(20px);
transform: translateY(30px);
translate的优点就是不会影响到其它元素的位置，如果单位不是px而是百分比的话，表示的就是自身元素的百分比，这种移动方式对行内标签是没有效果的。
<head>
<style>
div:first-child {
width: 100px;
height: 100px;
background-color: red;
transform: translate(50%,20px);
}
div:last-child {
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
旋转rotate
2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转。
<!-- rotate中度数的单位是deg，顺时针是正数，逆时针是负数 -->
<!-- transfrom: rotate(度数); -->
<head>
<style>
img {
transition: all 1s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
</body>
现在是以元素的中心为旋转点进行旋转，这也是默认的旋转点，也可以通过transfrom-origin属性更改旋转点。
<!-- 两个参数分别是x方向和y方向的位置，可以是像素也可以是方位名词 -->
<!-- transfrom-origin: x y; -->
<head>
<style>
img {
transform-origin: 50px bottom;
transition: all 1s;
}
img:hover {
transform: rotate(90deg);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
</body>
缩放scale
缩放的意思就是可以放大和缩小，可以用scale来设置缩放，这种方式相较于直接修改宽高而言优势就是不影响其它盒子，和rotate一样，也可以通过transform-origin属性来修改缩放中心。
<!-- 第一个参数表示宽缩放为原来的m倍，第二个参数表示高缩放为原来的n倍，如果只填一个参数代表宽高同时缩放为原来的x倍
transform: scale(m,n);
transform: scale(x); -->
<head>
<style>
img {
transition: all 1s;
transform-origin: right bottom;
}
img:hover {
transform: scale(.5);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
<p>微信公众号：Robod</p>
</body>
CSS3 动画
动画(animation)是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果，相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
动画的基本使用
动画序列在学习动画之前，要先明确动画序列这个概念👇
1、使用@keyframes定义动画@keyframes 自定义的动画名称 { 0% { xxxxxx； } 100% { xxxxxxx； } }2、元素使用动画给需要使用动画的元素添加
animation-name(调用动画)以及animation-duration(持续时间)这两个属性。<head> <style> @keyframes robod_animation { 0% { transform: rotate(0) scale(1); } to { transform: rotate(90deg) scale(0.5); } } img { animation-name: robod_animation; animation-duration: 2s; } </style> </head> <body> <img src="./images/robod.png" alt=""> </body>
常用动画属性
速度曲线
上面提到了一个animation-timing-funtion属性用来设置动画的速度曲线，该属性的值一共有6个：
前面几个都很好理解，这个步长的意思就是整个操作划分为多少步，然后一步一步执行，类似于那种一格一格的进度条的感觉，可以做一些有意思的动画。
<head>
<style>
@keyframes steeeep {
from {
width: 0;
}
to {
width: 160px;
}
}
div {
width: 160px;
overflow: hidden;
white-space: nowrap;
font-size: 10px;
background-color: aqua;
animation: steeeep 2s steps(15) backwards;
}
</style>
</head>
<body>
<div>
欢迎关注微信公众号：Robod
</div>
</body>
3D转换
透视 perspective
在了解3D转换之前首要要明确一个概念——“透视”，电脑屏幕是二维的，我们没办法直接看到立体的东西，如果要想看到物体在Z轴上的变化，就得使用透视，透视又称视距，其实就是3D的东西投影在2D平面的效果，下图中的d就是透视，当物体不变时，透视越大，在屏幕上看到的就越小，透视越小，在屏幕上看到的就越大，所谓近大远小。透视的单位是px。
3D移动 translate3d
3D移动和2D移动类似，只不过是多了个Z轴。
/*这三个参数分别代表在xyz轴要移动的距离，z轴一般以px为单位*/
transform: translate3d(x , y , z);
/*也可以分开写*/
translate: translateX(x);
translate: translateY(y);
translate: translateZ(z);
首先给需要移动的元素的父元素添加透视，在透视固定的情况下，改变translateZ的大小，就会改变元素在屏幕上的大小。
<head>
<style>
body {
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 0 auto;
transform: translateZ(100px);
}
</style>
</head>
<body>
<div></div>
</body>
3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
transform: rotateX(45deg); /*沿x轴正方向旋转45度*/
transform: rotateY(45deg); /*沿y轴正方向旋转45度*/
transform: rotateZ(45deg); /*沿z轴正方向旋转45度*/
transform: rotate3d(1,1,0,45deg); /*沿着x轴与y轴的对角线旋转45度*/
那么哪一个方向是旋转正方向呢？这里有一个技巧，就是左手准则，左手大拇指指向某一个轴的正方向，手指弯曲的方向就是旋转的正方向，反之就是反方向。
<head>
<style>
body {
perspective: 500px;
}
img {
transition: all 1s;
}
img:hover:first-child {
transform: rotateX(45deg);
}
img:hover:nth-child(2) {
transform: rotateY(45deg);
}
img:hover:nth-child(3) {
transform: rotateZ(45deg);
}
img:hover:last-child {
transform: rotate3d(1,1,0,45deg);
}
</style>
</head>
<body>
<img src="./images/robod.png" alt="">
<img src="./images/robod.png" alt="">
<img src="./images/robod.png" alt="">
<img src="./images/robod.png" alt="">
</body>
3D呈现 transform-style
3D呈现就是用来控制子元素是否开启三维立体环境，默认是transform-style: flat(不开启)，如果想开启，可以修改为transform-style: preserve-3d。注意：代码是写给父元素的，但影响的子元素。
<head>
<style>
body {
perspective: 500px;
}
.box1 {
width: 200px;
height: 200px;
transition: all 2s;
transform-style: preserve-3d; /*和transform-style: flat*/
}
.box2 {
width: 100%;
height: 100%;
background-color: aqua;
transform: rotateX(45deg);
}
.box1:hover {
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
上面代码中的例子，先看一下transform-style: flat的效果：
当鼠标移到上面的时候，先是由本来的绕x轴旋转45度的状态转换为普通的平面图，再由平面图绕y轴进行旋转，这显然不是我们想要的效果。
再来看看transform-style: preserve-3d的效果👇
现在就是三维的转换效果了，直接由绕x轴旋转45度的状态直接再绕y轴旋转45度。
浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新的版本的浏览器无须忝加。
-moz-：代表 firefox浏览器的私有属性-ms-：代表ie浏览器私有属性-webkit-：代表 safari、chrome私有属性-o-：代表Opera私有属性
比如圆角属性就可以这样写👇
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
总结
好了，这就是我这段时间学习HTML5和CSS3所总结出来的一些知识点，一方面是怕我自己以后忘了可以拿来复习使用，另一方面也是希望可以帮助到一起学习的小伙伴们！