Html5+CSS3
第一天 语义化标签、音视频标签属性、CSS3新增表单和表单属性以及结构伪类选择器、属性选择器、伪元素选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5新增语义化标签</title>
<!--
注：1.语义化标签主要针对 搜索引擎 -移动端用的最多
2.页面中可以使用多次->也可以无限次使用
3.在IE9中，需要把这些元素转换为块级元素 display:block;
4.还有很多的其他标签
H5新增语义化标签
1. <header> 头部标签
2. <nav> 导航标签
3.<article> 内容标签
4.<section> 块级标签
5.<aside> 侧标栏标签
6.<footer> 尾部标签
一.H5多媒体标签
1.音频:<audio>
原生支持音频格式文件播放，支持有限的格式,如下
1.ogg Vorbis格式：Firefox3.5 opera10.5 chrome3.0
2.MP3格式：IE9 chrome3.0 Safari3.0
注：一般放以上两种格式的音频文件
3.Wav格式：Firefox3.5 opera10.5 chrome3.0 Safari3.0
属性:
1.autoplay:autoplay; 该属性为：在音乐就绪后马上播放
注：支持IE9及以上的
注：谷歌禁用了autoplay
注：因不同游览器支持不同音频格式，解决方案就是准备多个格式的音频文件
2.controls:controls; 该属性为：向用户显示控件，比如播放按钮
3.loop:loop; 该属性为：循环->每当音频结束时重新开始播放
2.视频:<video>
支持格式:
1.Ogg格式：Firefox3.5+ Opera10.5+ Chrome5.0+
2.MPEG 4(MP4): IE9.0+ Chrome5.0+ Safari3.0+
3.WebM(网络视频格式): Firefox4.0+ Opera10.6+ Chrme6.0+
音频和视频共有<sourse>单标签
属性：
与audio属性一样
不一样的有:
1.preload:auto(预先加载视频) none(不应加载视频); 为:是否等加载完再播放 如有autoplay则忽略改属性
2.porster:imgurl; 为:加载等待的画面图片
3.muted:muted; 为:静音播放
二.H5新增表单与表单属性
表单:
1.type="email" 为：限制用户输入为email类型
2.type="url" 为：限制用户输入为url类型
3.type="date" 为：限制用户输入为日期类型
4.type="time" 为：限制用户输入为时间类型
5.type="month" 为：限制用户输入为月类型
6.type="week" 为：限制用户输入为周类型
重点 7.type="number" 为：限制用户输入为数字类型
重点 8.type="tel" 为：限制用户输入为手机号码类型
重点 9.type="search" 为：搜索框
10.type="color" 为：生成一个颜色选择表单
表单属性:
1.required:required; 表示为：内容不能为空。必填
重点 2.placeholder:提示文本(占位符);表示为：表单提示信息，存在默认值则不显示
3.autofocus:autofocus;表示为：自动聚焦属性，页面加载完成时自动聚焦到指定表单
4.autocomplete:off/on；表示为：当用户在字段开始键入时，游览器基于之前键入过的值，显示出在字段中填写的选项，
条件1.需要放在表单内，同时加上name值
条件2.同时成功提交
注：默认有该属性，为启用状态
重点 5.multiple:multiple; 表示为：可以多选文件条件
三.CSS3
无论CSS还是CSS3同样设置样式都会叠加或者说覆盖之前的样式
注:1.类选择器，属性选择器，伪类选择器，权重为10。标签选择器权重为1
2.属性选择器权重高于标签选择器
1.CSS3属性选择器:
E[att]:选择具有att属性的E元素
E[att="val"];选择具有att属性且属性等于valu的E元素
E[att^="val"];匹配具有att属性 且值以value开头的E元素
E[att$="val"];匹配具有att属性 且值以value结尾的E元素
E[att*="val"];匹配具有att属性 且值中含有value的E元素
2.结构伪类选择器：
E:first-child 为 匹配父元素中第一个子元素E
E:last-child 为 匹配父元素中最后一个E元素
E：nth-child(n) 为 匹配父元素中第n个子元素E
E:first-of-type 为 指定类型E的第一个
E:last-of-type 为 指定类型E的最后一个
E:nth-of-type(n) 为 指定类型E的第N个
3.伪元素选择器
注：基于父元素的内容来插入的
1.before和after必须有content属性
2.before和after创建的元素属于行内元素，元素相当于盒子
3.在dome里面看见的元素叫伪元素
4.伪元素和标签选择器一样，权重为1
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
4.伪元素字体图标
优势：在于结构简单
字体图标教程往上有很多，就放一个阿里的
> [https://www.iconfont.cn/] 阿里巴巴矢量图标库
-->
<style>
header,
nav {
width: 100%;
height: 300px;
background-color: aqua;
margin-bottom: 100px;
}
video {
width: 600px;
}
.gekai {
height: 300px;
}
</style>
<body>
<!-- 一般都是用source单标签来存放音视频 -->
<audio autoplay="autoplay" controls="controls">
<source src="../media/audio/薛之谦 - 演员.mp3" type="audio/mpeg">
<source src="../media/audio/薛之谦 - 演员.mp3" type="audio/ogg">
不支持播放audio播放
</audio>
<video controls="controls" muted="muted" loop poster="../../imgs/timg.jpg">
<source src="../media/video/触屏音箱品牌视频.mp4" type="video/mp4">
<source src="../media/video/触屏音箱品牌视频.ogg" type="video/ogg">
不支持播放video播放
</video>
<!-- H5的input表单和表单属性 -->
<div class="">-----------表单--------------</div>
<form action="">
<ul>
<li>邮箱: <input type="email"></li>
<li>网址: <input type="url" name="" id=""></li>
<li>日期：<input type="date"></li>
<li>时间: <input type="time"></li>
<li>数字: <input type="number"></li>
<li>手机号码： <input type="tel"></li>
<li><input type="search"></li>
<li>选择颜色：<input type="color"></li>
<li><input type="submit" value="提交"></li>
</ul>
</form>
<div class="gekai"></div>
<div class="">---------表单属性--------</div>
<form action="">
用户名: <input type="text" name="sousuo" autocomplete="on" placeholder="请输入纯数字的手机号码">
手机号码： <input type="tel" required="required">
数字： <input type="number">
搜索框: <input type="search" name="" id="" autofocus="autofocus">
<!-- 文件多选属性 -->
提交文件： <input type="file" multiple="multiple">
<input type="submit" value="提交">
</form>
</body>
</html>
第二天 2D转换、CSS3动画与调用动画、透视、移动、旋转、放大缩小、注意点和各自优缺点
/<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二天学习</title>
<!--
一.2D转换
综合写法transform: translate(X,Y) rotate(deg(度数)) scale(x,y)...等;
设置(放大缩小和旋转的)转换中心属性：transform-origin: x y;
注：1.综合写的时候的顺序,有位移时先写位移（看具体用的情况写）
2.优点:不会影响其他元素的位置
属性：1.移动:translate(X,Y) XY轴移动 Y轴下方为正数
注：1.对行内标签没有效果
2.可以为length和50%(移动宽度/高度的一半)之类数值
3.旋转:rotate(deg(度数))
4.
注：设置转换中心属性：
transform-origin: x y; 没写时 默认为中心点旋转(center center)
X Y轴 用空格隔开值为 length top、bottom、left、right、center
注：1.rotate里跟度数deg
2.默认旋转中心为元素中心
3.缩放:scale(x,y) 类似于宽高
注：1.可设置转换中心缩放,transform-origin: x y;->lenght 为倍数 无单位，为一个数时 宽高都是这个倍数
2.不占位置
transform:scale(1,1) 宽高放大1倍，相对于没有放大
注：1.如transform:scale(2,2)/transform:scale(2) 宽高放大两倍
2.如transform:scale(0.5,0.5)/transform:scale(0.5) 缩小
二.CSS3动画
animation ->1.缺点：盒子放大缩小等，会占位置->即隔开开其他相邻盒子;2.优点：可改变任意多的样式和任意多的次数和逐渐变化成所改变的样子
animation ：名称 持续时间 运动曲线 何时开始 播放次数 是否逆向回到初始状态 动画起始或结束状态;->除了animation-play-state(悬停时)属性之外都有
注：name和duration属性必写
1.@keyframs 规定动画->关键帧
2.animation-name 指定要绑定到选择器的关键帧的名称
3.animation-duration 动画指定需要多少秒或毫秒完成
4. animation-timing-function: steps(length/关键帧/指定时间函数中匀速的步长); 设置动画将如何完成一个周期。
linear(匀速) ease(先低速,加速,后变慢) ease-in(低速开始) ease-out(低速结束) ease-in-out(低速开始与结束)
5.animation-delay: 2s; 设置动画在启动前的延迟间隔。何时开始
6.animation-iteration-count 定义动画的播放次数。默认为1，infinite(无限循环)
7.animation-direction 指定是否应该轮流逆向播放动画。默认为normali(否),altenate逆播放
8.animation-fill-mode: forwards(保持)/backwards(回到起始);完成后的状态->规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)
9.animation-play-state 指定动画是否正在运行或已暂停。默认running,还有paused
注：1.缺点：盒子放大缩小等，会占位置->即隔开开其他相邻盒子
2.优点：可改变任意多的样式和任意多的次数和逐渐变化成所改变的样子
3.百分比要是整数,为总时间的划分。如总时间10s 25%->0.5s
1.定义动画: 关键字:from和to 等同于0%和100%
@keyframes 动画名称 {
注：真正开始做的动画从大于0%的开始写
0% {
}
25% {
transform: translate(100px,50px) rotate(50deg) scale(1.2);
background-color: rgb(20, 221, 63);
}
50% {
transform: translate(300px,150px) rotate(150deg) scale(2);
background-color: rgb(57, 20, 221);
}
100% {
transform: translate(500px,260px) rotate(260deg) scale(3);
background-color: rgb(10, 201, 226);
}
}
2.调用动画
animation-name: 动画名称;
animation-duration: 持续时间;
-->
<style>
p {
width: 300px;
height: 300px;
background-color: blue;
/* 2D转换-移动 */
/* transform: translate(300px,100px); */
/* 2D转换-旋转 */
/* transform: rotate(50deg); */
transition: ease 1s;
transform-origin: 100% 0;
}
p:hover {
/* 可以一起写 */
/* transform: translate(300px,100px) rotate(180deg); */
transform: rotate(180deg);
}
.b {
width: 300px;
height: 300px;
background-color: #000;
}
/* 对行内标签没有效果 */
span {
width: 300px;
height: 300px;
background-color: rgb(19, 212, 84);
/* transform: translate(50%,50%); */
}
/* 对行内标签没有效果 over*/
/* 放大缩小 */
.suoxiao img {
width: 300px;
transition: ease 0.5s;
/* transform-origin: left bottom; */
}
.suoxiao img:hover {
transform: scale(2,2);
}
.cs {
text-align: right;
}
/* 放大缩小 over*/
/* CSS3动画 */
.donghua {
width: 50px;
height: 50px;
background-color: blueviolet;
transition: ease 10s;
/* 绑定动画 */
animation-name: one;
/* 持续时间 */
animation-duration: 10s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 2s;
/* 重复次数 infinite为无限循环*/
/* animation-iteration-count: 1; */
/* 是否逆向播放 */
/* animation-direction: alternate; */
/* 回到起始状态还是保持动画完成后的状态 forwards(保持)/backwards(回到起始) */
animation-fill-mode: forwards;
/* 简写 animation ：名称 持续时间 运动曲线 何时开始 播放次数 是否逆向回到初始状态 动画起始或结束状态;*/
/* animation: one 10s ease 2s 1 alternate forwards; */
}
/* 鼠标放上去动画停止 离开则继续 默认running,还有paused*/
.donghua:hover {
animation-play-state: paused;
}
@keyframes one {
10% {
transform: translate(100px,50px) rotate(50deg) scale(1.2);
background-color: rgb(20, 221, 63);
}
25% {
transform: translate(200px,100px) rotate(100deg) scale(1.5);
background-color: rgb(20, 221, 137);
}
50% {
transform: translate(300px,150px) rotate(150deg) scale(2);
background-color: rgb(57, 20, 221);
}
75% {
transform: translate(400px,200px) rotate(200deg) scale(2.5);
background-color: rgb(57, 20, 221);
}
100% {
transform: translate(500px,260px) rotate(260deg) scale(3);
background-color: rgb(10, 201, 226);
}
}
/* CSS3动画 over*/
</style>
</head>
<body>
<p></p>
<div class="b"></div>
<span>对行内标签/元素没有效果</span>
<div class="suoxiao"><img src="../../../复习与练习/imgs/timg.jpg" alt=""></div>
<div class="cs">测试是否占位置->测试结果 不占位置</div>
<div class="donghua"></div>
<div class="cs">测试animation是否占位置->测试结果 占位置</div>
</body>
</html>
第三天 3D转换 、透视/视距、游览器私有前缀、3D呈现
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第三天-CSS33D动画</title>
<!--
注：在3D环境下要对齐好边缘和旋转中心点
3D转换
1.3D位移:translate3d(x,y,z) xyz为必填项
注：有透视时才能看到translateZ的变化，Z轴为物体离眼睛的距离（在有透视情况下，无透视时看不出）
2.3D旋转rotate3d(x,y,z)
注:自定义轴为rotate3d(x,y,z,deg) 如：transform: rotate3d(0, 1, 0, 45deg)
3.透视/视距:perspective: length; ->写在被观察元素的父元素身上 数值越小 视距(看到的物体)越近/越大
4.3D呈现：控制子元素是否开启三维立体环境，所以写给父元素
transfrom-style:flat(子元素不开启3d立体空间)/preserve-3d(子元素开启立体空间)
游览器私有前缀
注：为了兼顾老版本的写法，较新版本的游览器无需添加
-moz-:firefox游览器私有属性
-ms-:ie游览器私有属性
-webkit-:safari、chrome游览器私有属性
-o-:Opera游览器私有属性
写法如 -moz-border:1px sold #cc;
-ms-border:1px sold #cc;
-webkit-border:1px sold #cc;
-o-border:1px sold #cc;
border:1px sold #cc;
-->
<style>
/* 1.3D位移:translate3d(x,y,z) */
body {
perspective: 500px;
}
.wy {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: rgb(84, 12, 219);
/* transform: translate3d(100px, 100px, 150px); */
transform: translateZ(300px);
}
.rotate3ds {
display: block;
margin: 0 auto;
width: 400px;
height: 400px;
background-color: cadetblue;
transition: all 2s;
}
.rotate3ds:hover {
transform: rotate3d(0, 1, 1, 45deg);
}
.box {
position: relative;
width: 300px;
height: 300px;
background-color: darkgray;
margin: 100px auto;
/* 透视/视距效果 */
/* perspective: 200px; */
transition: all 3s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(10, 144, 221);
}
.box div:last-child {
background-color: darkorange;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="wy"></div>
<img src="../../imgs/timg.jpg" class="rotate3ds"></img>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
版权声明：本文为qq_44279495原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。