html5

h5 拓展了哪些内容

• 语义化标签
• 本地存储
• 兼容特性
• 2D、3D
• 动画、过渡
• CSS3 特性
• 性能与集成

h5 新增标签

header（头部标签）、nav（导航标签）、article（内容标签）、section（块级标签）、aside（侧边栏标签）、footer（尾部标签）` 新增标签
header（头部标签）、nav（导航标签）、article（内容标签）、section（块级标签）、aside（侧边栏标签）、footer（尾部标签）

多媒体标签- 音频 – audio- 视频 – video

audio视频格式兼容性

audio的参数

audio兼容性使用方法，使用source

video 视频格式兼容性video 属性设置

video兼容性代码展示

input 新增type

表单新增属性

css3 属性选择器

css3 在 CSS2 的基础上拓展、新增的样式- 移动端支持优于 PC 端

结构伪类选择器

伪元素选择器

• before 和 after 必须有 content 属性
• before 在内容前面，after 在内容后面
• before 和 after 创建的是一个元素，但是属于行内元素
• 创建出来的元素在 Dom 中查找不到，所以称为伪元素
• 伪元素和标签选择器一样，权重为 1

2D 转换之 translate

• 2D 转换是改变标签在二维平面上的位置和形状

• 移动： translate

• 旋转： rotate

• 缩放： scale
移动x\y是百分比或px 百分比是相对于自身的宽高
  transform: translate(x，y);
  旋转deg是角度
  transform: rotate(0deg);
  缩放x\y是倍数
  transform: scale(x, y)

/* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(180deg) scale(1.2);

盒子水平垂直居中

定位（postion）+ transform: translate(-50%，-50%)

旋转中心

1.可以跟方位名词
transform-origin: left bottom;
2. 默认的是 50% 50% 等价于 center center
3. 可以是px 像素
transform-origin: 50px 50px;

动画

创建动画
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}

动画的使用
div {
/* 调用动画 /
animation-name: 动画名称;
/ 持续时间 /
animation-duration: 持续时间；
}
常见动画属性

div {
width: 100px;
height: 100px;
background-color: aquamarine;
/ 动画名称 /
animation-name: move;
/ 动画花费时长 /
animation-duration: 2s;
/ 动画速度曲线 /
animation-timing-function: ease-in-out;
/ 动画等待多长时间执行 /
animation-delay: 2s;
/ 规定动画播放次数 infinite: 无限循环 /
animation-iteration-count: infinite;
/ 是否逆行播放 /
animation-direction: alternate;
/ 动画结束之后的状态 */
animation-fill-mode: forwards;
}

div:hover {
/* 规定动画是否暂停或者播放 */
animation-play-state: paused;
}

动画速度曲线

animation-timing-function属性

3D 转换

• x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
• y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
• z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值

透视需要写在被视察元素的父盒子上面 perspecitve 距离视觉点越近的在电脑平面成像越大，越远成像越小

• transform: rotate3d(x, y, z, deg) – 沿着自定义轴旋转 deg 为角度
• x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
  • transform: rotate3d(1, 1, 0, 180deg) – 沿着对角线旋转 45deg
  • transform: rotate3d(1, 0, 0, 180deg) – 沿着 x 轴旋转 45deg

3D 呈现 `transform-style

• 控制子元素是否开启三维立体环境
• transform-style: flat 代表子元素不开启 3D 立体空间，默认的
• transform-style: preserve-3d 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子