html5+css3基础总结

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%：黑色 那么当属性值为
1. normal 默认值 红 -> 黑
2. reverse 反向运行 黑 -> 红
3. alternate 正-反-正… 红 -> 黑 -> 红…
4. alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
5. 以上与循环次数有关
动画等待或者结束的状态

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
1. transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
2. translform:translateX(100px) 仅仅是移动在x轴上移动
3. translform:translateY(100px) 仅仅是移动在Y轴上移动
4. translform:translateZ(100px) 仅仅是移动在Z轴上移动

视距 perspertive

perspertive 就是用来设置人和物体的距离

写在被观察元素的父盒子里

左手准则

要判断某元素沿着x轴是怎么旋转的

左手的手拇指指向 x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

3d旋转 rotate3d

语法：

transform:rotateX(45deg); 沿着x轴正方向旋转 45度
transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
transform: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维立体环境