HTML5
简介 具有新的元素（HTML标签）、属性（新属性和CSS3特性）和行为（JS）。
- XHTML： 可扩展超文本标记语言，增强了HTML
- HTML5： 语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。 HTML5
- 语义化标签： 标签语义化< header>,< nav>,< article>,< section>,< aside>,< footer>
在vscode里 ! 直接生成基本框架
tips：
主要针对搜索引擎 可多次使用 IE9转换为块级元素
{display：block}PC端使用频率小于移动端
- 多媒体标签： 音频：
解决不同浏览器格式兼容问题
< audio controls="controls">
<source src="xxx.mp3" type="audio/mpeg">
<source src="xxx.ogg" type="audio/ogg">
都不支持返回我
</audio>
视频：
-
表单标签：
- 新增表单
- 属性自动限制输入文字的类型的判断
- 新增属性
CSS3
- 优点: 移动端，新增样式，应用广泛，不断更新
新增选择器：
类选择器、属性选择器、伪类选择器，权重为10；
伪元素和标签选择器权重为1;
伪元素权重为1，::before的权重为1，所以加起来权重为2
伪元素选择器：
tips：\
- 必须有content属性\
- 创建一个元素（盒子），属于行内元素。
想要控制盒子大小需要转换为块级元素display：block;/ inline-block;（行内块级元素）\ - 在DOM里看不见创建的元素，所以叫伪元素
2D转换：
translate
rotate：
scale：
- 格式：==transform: translate() rotate() scale()==
- 顺序影响效果（先旋转会改变坐标轴方向）
- 当同时有位移和其他属性，唯一放在最前面
看旋转，上案例‘ ’
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="big">
<div id="first"><img src="5.png"/></div>
<div id="second"><img src="4.png"/></div>
<div id="third"><img src="c.png"/></div>
<div id="fourth"><img src="../b.png"/></div>
<div id="sixth"><img src="../a.png"/></div>
</div>
<body>
</html>
首先我们先画一个大盒子，也就是旋转的容器，然后在里面再去添加几个小盒子用来展示图片。接着就设置css样式了 首先我们给这个大盒子的perspective属性设置透视距离就可以让里面的一张图片设置在后面而且不会被覆盖; 不过要注意的是设置perspective属性的时候只能比盒子的大，不然盒子会变形，设置个100000px都没问题; 然后通过大盒子的transform-style属性来设置成3D样式不然到时候设置里面小盒子的旋转平移的时候就会要在每个形变函数后面加上3D;这样就很麻烦;
#big{
perspective: 10000px;
position: relative;/*设置透视*/
top: 300px;
left: 200px;
transform-style: preserve-3d;/*设置成3D样式*/
animation: name 8s linear;
width: 500px;
height: 500px;
}
#big div{
width: 500px;
height: 500px;
position: absolute;
}
img{
width: 100%;
height: 100%;
}
然后通过translate和rotate函数来设置各个小盒子的位置
/*最左边的图片位置*/
#first{
transform:translateX(-250px)rotateY(-90deg);
}
/*最前面的图片位置*/
#second{
transform:translateZ(250px);
}
/*最右边的图片位置*/
#third{
transform: translateX(250px) rotateY(90deg);
}
/*最后面的图片位置*/
#fourth{
transform: translateZ(-250px);
}
/*最下面的图片位置*/
#fifth{
transform: translateY(250px) rotateX(90deg);
}
/*最上面的图片位置*/
#sixth{
transform: translateY(-250px) rotateX(90deg);
}
然后通过translate和rotate函数来设置各个小盒子的位置
/*最左边的图片位置*/
#first{
transform:translateX(-250px)rotateY(-90deg);
}
/*最前面的图片位置*/
#second{
transform:translateZ(250px);
}
/*最右边的图片位置*/
#third{
transform: translateX(250px) rotateY(90deg);
}
/*最后面的图片位置*/
#fourth{
transform: translateZ(-250px);
}
/*最下面的图片位置*/
#fifth{
transform: translateY(250px) rotateX(90deg);
}
/*最上面的图片位置*/
#sixth{
transform: translateY(-250px) rotateX(90deg);
}
然后设置大盒子的旋转动画
@keyframes name {
0%{
transform: rotateX(0deg) rotateY(0deg);
}
33%{
transform: rotateY(120deg) rotateX(120deg);
}
66%{
transform: rotateY(240deg) rotateX(240deg);
}
100%{
transform: rotateY(360deg) rotateX(360deg);
}
}
最后可得
