HTML5
文章目录
一.HTML5 ` 新增标签
1 . 新增了语义化标签
2 、多媒体音频标签
3.input标签新增属性
4.form表单新增属性
CSS3
一.CSS3 属性选择器
1.属性选择器列表
2.结构伪类选择器
3.伪元素选择器
二. 2D 转换之 translate
1 . 2D 转换 rotate
2. 设置元素旋转中心点(transform-origin)
3. 2D 转换之 scale
4. 2D 转换简写
三. 动画(animation)
1 . 动画简写方式
2.速度曲线细节
四、3D 转换
1 . 3D 转换知识要点（难）
2、透视 perspective(难）
3. translateZ
4.3D 旋转rotateX
5、3D 呈现 transform-style（难）
一.HTML5新增标签
1. 新增了语义化标签
- `header` --- 头部标签
- `nav` --- 导航标签
- `article` --- 内容标签
- `section` --- 块级标签
- `aside` --- 侧边栏标签
- `footer` --- 尾部标签
2 、多媒体音频标签
-
多媒体标签有两个，分别是
- 音频 –
audio - 视频 –
video
- 音频 –
①audio：参数：
②video：参数：
总结：
- 多媒体标签在不同浏览器下情况不同，存在兼容性问题
- 谷歌浏览器把音频和视频标签的自动播放都禁止了
3.input标签新增属性
4.form表单新增属性
CSS3
一.CSS3 属性选择器
1.属性选择器列表
2.结构伪类选择器
① nth-child 参数 (重要)
-
nth-child 详解
-
注意：本质上就是选中第几个子元素
-
n 可以是数字、关键字、公式
-
n 如果是数字，就是选中第几个
-
常见的关键字有
even偶数、odd奇数 -
常见的公式如下(如果 n 是公式，则从 0 开始计算)
-
但是第 0 个元素或者超出了元素的个数会被忽略
-
3.伪元素选择器
①before 之前
②after 之后
before和after必须有content属性before在内容前面，after 在内容后面before和after创建的是一个元素，但是属于行内元素- 伪元素和标签选择器一样，权重为 1
二. 2D 转换之 translate
-
2D转换-
2D转换是改变标签在二维平面上的位置和形状 -
移动：
translate -
旋转：
rotate -
缩放：
scale
-
-
translate语法- x 就是 x 轴上水平移动
- y 就是 y 轴上水平移动
transform: translate(x, y) transform: translateX(n) transfrom: translateY(n) -
注意：
2D的移动主要是指 水平、垂直方向上的移动translate最大的优点就是不影响其他元素的位置translate中的100%单位，是相对于本身的宽度和高度来进行计算的
1. 2D 转换 rotate
-
rotate 旋转
2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转
-
rotate语法/* 单位是：deg 记得带单位！*/ transform: rotate(度数) -
注意：
rotate里面跟度数，单位是deg- 角度为正时，顺时针，角度为负时，逆时针
2. 设置元素旋转中心点(transform-origin)
-
transform-origin语法transform-origin: x y; -
注意
- x y 默认旋转的中心点是元素的中心 (50% 50%)，等价
centercenter - 还可以给 x y 设置像素或者方位名词(
top、bottom、left、right、center)
- x y 默认旋转的中心点是元素的中心 (50% 50%)，等价
3. 2D 转换之 scale
-
scale的作用- 控制元素的放大与缩小
-
语法
transform: scale(x, y) -
注意
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大transform: scale(2, 2): 宽和高都放大了二倍transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致transform:scale(0.5, 0.5): 缩小scale优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
4. 2D 转换简写
-
注意
- 同时使用多个转换，其格式为
transform: translate() rotate() scale() - 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
- 当同时有位置或者其他属性的时候，要将位移放到最前面
- 同时使用多个转换，其格式为
三. 动画(animation)
-
动画的基本使用
- 先定义动画
- 在调用定义好的动画
-
语法格式(定义动画)
@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } } -
语法格式(使用动画)
div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间； } -
注意
- 0% 是动画的开始，100 % 是动画的完成
- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用
from和to，等同于 0% 和 100%
1. 动画简写方式
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
-
注意
- 简写属性里面不包含
animation-paly-state - 暂停动画
animation-paly-state: paused; 经常和鼠标经过等其他配合使用 - 要想动画走回来，而不是直接调回来：
animation-direction: alternate - 盒子动画结束后，停在结束位置：
animation-fill-mode: forwards
- 简写属性里面不包含
-
代码演示
animation: move 2s linear 1s infinite alternate forwards;
2.速度曲线细节
animation-timing-function: 规定动画的速度曲线，默认是ease
四、3D 转换
1. 3D 转换知识要点（难）
3D位移：translate3d(x, y, z)3D旋转：rotate3d(x, y, z)- 透视：
perspctive 3D呈现transfrom-style
-
3D移动translate3d3D移动就是在2D移动的基础上多加了一个可以移动的方向，就是 z 轴方向transform: translateX(100px)：仅仅是在 x 轴上移动transform: translateY(100px)：仅仅是在 y 轴上移动transform: translateZ(100px)：仅仅是在 z 轴上移动transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离- 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充
-
语法
transform: translate3d(x, y, z)
2、透视 perspective(难）
body {
perspective: 1000px;
}
3. translateZ
translateZ与perspecitve的区别perspecitve给父级进行设置，translateZ给 子元素进行设置不同的大小
4.3D 旋转rotateX
- 语法
transform: rotateX(45deg)– 沿着 x 轴正方向旋转 45 度transform: rotateY(45deg)– 沿着 y 轴正方向旋转 45 度transform: rotateZ(45deg)– 沿着 z 轴正方向旋转 45 度transform: rotate3d(x, y, z, 45deg)– 沿着自定义轴旋转 45 deg 为角度
5、3D 呈现 transform-style（难）
-
transform-style- 控制子元素是否开启三维立体环境
transform-style: flat代表子元素不开启3D立体空间，默认的transform-style: preserve-3d子元素开启立体空间- 代码写给父级，但是影响的是子盒子
H5C3 暂时放下一段落了，囫囵吞枣式的看完，近期学一下JS，有需要笔记的也可以关注我
基础HTML+CSS笔记(内附中文手册链接)在上一篇《html+css基础语法笔记》
JS学习Day1笔记js基础Day1
分享到这
