HTML5+CSS3总结

一.HTML5

1. 语义化标签

标签	描述
header	头部标签
nav	导航标签
article	内容标签
section	定义文档某区域
aside	侧边栏标签
footer	尾部标签

2.多媒体标签

①audio 音频

属性	值	描述
autoplay	autoplay	音频在就绪后马上播放
controls	controls	向用户显示控件，比如播放按钮
loop	loop	每当音频结束时重新开始播放
src	url	要播放的音频的url

②video 视频

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌需添加muted）
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	播放器是否继续播放该视频，循环播放
preload	auto(预先加载视频)、none(不应加载视频)	规定是否预加载视频
src	url	视频url地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

3.新增input类型

• email
• url
• date
• time
• month
• week
• number
• tel
• search
• color

4.新增表单属性

属性	值	说明
required	required	其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性
autocomplate	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项
multiple	multiple	可以多选文件上交

5.属性选择器

选择符	简介
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元素

类选择器、属性选择器、伪类选择器，权重为10

6.结构伪类选择器

选择符	简介
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个

2n：偶数
2n+1：奇数
n+5：从第五个开始（包含第五个）到最后
-n+5：前五个（包含第五个）
even：偶数
odd：奇数

7.伪元素选择器

::before 元素内部的前面插入内容
::after 元素内部的后面插入元素
必须具有content属性

8.滤镜

 filter: blur(5px);     blur模糊处理  数值越大越模糊 

9.过渡

谁做过渡给谁加
transition: 要过渡的属性 花费时间 运动曲线 何时开始;

	1. 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都 变化过渡， 写一个all 就可以。 
	2. 花费时间： 单位是 秒（必须写单位） 比如 0.5s  
	3. 运动曲线： 默认是 ease （可以省略） 
	4. 何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间  默认是 0s  （可以省略） 
	transition: width .5s ease 0s, height .5s ease 1s; 
	transition: all 0.5s;

二.CSS3

1.2D转换

①移动translate

transform: translate(100px, 100px)；
transform: translate(50%,0)

②旋转rolate(单位deg)

transform: rotate(45deg);
转换中心点：
transform-origin: left bottom;
默认的是50% 50%

③缩放scale

transform: scale(0.5, 0.5);
不会影响其它盒子，而且可以设置缩放中心点

2.动画

①定义动画
②使用动画

3.3D转换

轴	描述
x轴	水平向右：右正左负
y轴	垂直向下：下正上负
z轴	垂直屏幕：外正里负

①3D位移

transform: translate3d(100px, 100px, 100px)
z轴：物体距离屏幕的距离

②3D旋转：rotate3d
③透视：perspective 近大远小px，透视写在被观察元素的父盒子上，值越小越清楚
④3D呈现

transform-style: preserve-3d;
控制子元素是否开启三维立体环境，flag默认子元素不开启；
代码写给父级，影响的是子盒子