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%),等价
center
center
- 还可以给 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
移动translate3d
3D
移动就是在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
分享到这