1.html5标签
语义化标签
- header 头部标签
- nav 导航标签
- article 内容标签
- section 块级标签
- aside 侧边栏标签
- footer 尾部标签
h5表单属性
-
placeholder:占位符-提示信息
-
autofocus:自动获得焦点-一般页面中放1个
-
autocomplete 自动完成
- 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
- 默认已经打开 如
autocomplete=on
关闭autocomplete =off
- 需要放在表单内同时加上name属性
-
multiple:可以多选文件提交
- 结合文件上传标签
<input type="file" >
一起使用
- 结合文件上传标签
-
form属性,可以将输入标签放在表单的外面,还受到表单的管理
-
required:必填验证
-
novalidate:关闭验证
- 在表单上添加该属性,那么在提交的时候就不会再执行 required验证
-
pattern:自定义验证-通过编写正则表达式自定义验证规则 一般和required同时使用
- 表单事件
audio 音频标签
语法:
<audio src="小猪佩奇.mp3" autoplay> </audio>
支持的格式
格式 | MIME-type |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
video 视频标签
语法:
<video src="小猪佩奇.mp4" autoplay controls ></video>
支持的格式
格式 | MIME-type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
video常用属性、方法、事件
属性 | 方法 | 事件 |
---|---|---|
duration 视频播放时长 | play 播放 | canplay 视频加载完毕 准备播放 |
currentTime 当前播放进度 | pause 暂停 | timeupdate 播放时-持续触发 |
volume 音量大小 |
source标签
可以通过在多媒体标签内加入source标签,用来指定多个播放路径,当第一个source标签的路径出错时,自动会切换到第二个source标签
<!-- 当1.mp4出错时,自动切换到2.mp4 ... -->
<video >
<source src="1.mp4">
<source src="2.mp4">
<source src="3.mp4">
</video>
object-fit属性
当video标签视频内容宽度没有铺满video标签时,可以在css写上 该属性即可
video {
/* 让视频内容铺满整个video标签 */
object-fit: fill;
}
公共属性
以下属性 是要直接写在标签上的 如 autoplay controls
<video src="小猪佩奇.mp4" autoplay controls ></video>
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 规定视频输出应该被静音。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
伪类选择符
结构伪类选择器
E:first-child —— 匹配父元素的第一个子元素
E:nth-child(n) E:nth-last-child(n)
匹配到父元素的第n个元素 或者 是倒数第n个元素(n也可以为公式、数字、关键字)
常见的关键词有even偶数、odd奇数
E:nth-of-type(n)
E:nth-child(n)
匹配父元素的第n个子元素E。E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E。
属性选择器
- E[att] 选择具有att属性的E元素。
- E[att=“val”] 选择具有att属性且属性值等于val的E元素。
- E[att^=“val”] 选择具有att属性且属性值为以val开头的字符串的E元素。
- E[att$=“val”] 选择具有att属性且属性值为包含val的字符串的E元素
- E[att*=“val”] 选择具有att属性且属性值为包含val的字符串的E元素。
伪元素选择器
- E::before 在E元素前插入一个元素
- E::after 在E元素后插入一个元素
- E::first-letter 选择到了E容器内的第一个字母
- E::first-line 选择到了E容器内的第一行文本
想要让伪元素有效,必须遵循以下注意事项
- 伪元素只能给双标签加 不能给单标签加
- 伪元素的冒号前不能有空格 如
E ::before
这个写法是错误的 - 伪元素里面必须写上属性
content:""
;
2.2D、3D转换、动画animation
2d移动 translate
语法:div{
transform: translate(50px,50px);
}
- translate中的百分比单位是相对于自身元素的
translate:(50%,50%);
- translate类似定位,不会影响到其他元素的位置
- 对行内标签没有效果
2d旋转 rotate
使用步骤:
- 给元素添加转换属性
transform
- 属性值为
rotate(角度)
如transform:rotate(30deg)
顺时针方向旋转30度
div{
transform: rotate(0deg);
}
特点
- 角度为正时 顺时针 负时 为逆时针
- 默认旋转的中心点是元素的中心点
转换中心 transform-origin
该属性可以修改元素旋转的时候的中心点
- transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
- transform-origin:top left; 左上角 和 transform-origin:0 0;相同
- transform-origin:50px 50px; 距离左上角 50px 50px 的位置
- transform-origin:0; 只写一个值的时候 第二个值默认为 50%;
2d缩放 scale
- 给元素添加转换属性
transform
- 转换的属性值为
scale(宽的倍数,高的倍数)
如 宽变为两倍,高变为3倍transform:scale(2,3)
div{
transform:scale(2,3);
}
小结
- transform:scale(1,1) 放大一倍 相对于没有放大
- transform:scale(2,2) 宽和高都放大了2倍
- transform:scale(2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
- transform:scale(0.5,0.5) 缩小
- transform:scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解
动画 animation
用@keyframes定义动画,类似定义类选择器
/* 1 声明动画函数 */
@keyframes ani_div {
0%{
width: 100px;
background-color: red;
}
50%{
width: 150px;
background-color: green;
}
100%{
width: 300px;
height: 300px;
background-color: yellow;
}
}
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 2 调用动画 */
animation-name: ani_div;
/* 持续时间 */
animation-duration: 2s;
}
语法:
-
动画名
设置要使用的动画名
animation-name:xxx;
-
持续时间
设置动画播放的持续时间
animation-duration:3s
-
速度曲线
和设置过渡的速度曲线一样
animation-timing-function:linear;
- linear: 匀速
- ease: 慢-快-慢 默认值
- ease-in: 慢-快。
- ease-out: 快-慢。
- ease-in-out: 慢-快-慢。
-
延迟时间
animation-delay: 0s;
-
循环次数
设置动画播放的循环次数
animation-iteration-count: 2;
infinite 为无限循环 -
循环方向
animation-direction
如在动画中定义了 0%:红色 100%:黑色 那么 当属性值为
- normal 默认值 红 -> 黑
- reverse 反向运行 黑 -> 红
- alternate 正-反-正… 红 -> 黑 -> 红…
- alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
- 以上与循环次数有关
-
动画等待或者结束的状态
animation-fill-mode
设置动画在等待或者结束的时候的状态- forwards:动画结束后,元素样式停留在 100% 的样式
- backwards: 在延迟等待的时间内,元素样式停留在 0% 的样式
- both: 同时设置了 forwards和backwards两个属性值
-
暂停和播放
animation-play-state
控制 播放 还是 暂停running
播放paused
暂停复合写法
animation: name duration timing-function delay iteration-count direction fill-mode; animation:动画名称 持续性时间 运动曲线 合适开始 播放次数 是否反方向 起始或结束的标志
动画结束事件animationend
元素在动画结束之后,会自动触发的事件 animationend
var div = document.querySelector("div"); div.addEventListener("animationend", function () { console.log("div的动画结束之后,触发"); })
css3兼容处理
css3涉及到较多的新属性,某些低版本(如ie8以及以下)的浏览器对css3的支持程度不够,因此需要做以下处理
添加对应的浏览器的前缀 常见前缀如下
- 谷歌 -webkit
- 火狐 -moz
- IE -ms
如对
border-radius
进行兼容性处理-webkit-border-radius: 30px 10px; -moz-border-radius: 30px 10px; -ms-border-radius: 30px 10px; // border-radius 一定要放在最后 border-radius: 30px 10px;
如果发现添加前缀也解决不了兼容性问题,那么就不要使用该css3属性
3D转换
3d移动 translate3d
- transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
- translform:translateX(100px) 仅仅是移动在x轴上移动
- translform:translateY(100px) 仅仅是移动在Y轴上移动
- translform:translateZ(100px) 仅仅是移动在Z轴上移动
视距 perspertive
perspertive 就是用来设置 人 和 物体 的距离
写在被观察元素的父盒子里
左手准则
要判断某元素沿着x轴是怎么旋转的
- 左手的手拇指指向 x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了
3d旋转 rotate3d
语法:
transform:rotateX(45deg);
沿着x轴正方向旋转 45度transform:rotateY(45deg)
沿着y轴正方向旋转 45degtransform:rotateZ(45deg)
沿着Z轴正方向旋转 45degtransform:rotate3d(x,y,z,deg)
沿着自定义轴旋转 deg为角度 了解即可
3D缩放 scale3d
语法:
transform: scale3d(1 ,1,2);
宽,高 缩放一倍,厚度放大两倍transform: scaleX(1)
只缩放宽transform: scaleY(1)
只缩放高transform: scaleZ(1)
只缩放厚
视距原点 perspective-origin
视距原点 可以设置 人 站在x轴和y轴的位置
- 视距原点和视距一样,也是设置给要观察元素的父元素上
- perspective-origin:center center; 默认值是元素的中心点
- perspective-origin:10px; 指定了一个参数的时候,第二个参数默认为center 也就是50%;
- perspective-origin:10% %; 百分比都是相对于自身的宽度和高度
转换样式(3D呈现) transform-style
控制子元素是否开启3维立体环境
transform-style: flat;
平面模式 - 不开启3维立体环境transform-style: preserve-3d;
3维立体环境