01-3D

3d变换
transform:
平移
translateZ() + 向前 - 向后
translate3d(x, y, z)
旋转
rotateX() + 上面向里转,下面向外转
rotateY() + 右面向里转,左面向外转
rotate3d(x, y, z, 90deg)
x y z 数值范围0-1
rotate3d(1,0,1,90deg) x轴转90deg z轴转90deg
xyz 没有1的时候,被视为1,只有其中一个数值为的1的时候,小数才能生效
*rotateZ() 是平面的旋转 rotate() === rotateZ()

缩放
scaleZ()
scale3d(x, y, z)
单独使用scalez, scale3d没有任何效果,必须结合其他变形一起使用才能有效,而且要放到其他变形后面
景深: 场景深度,给元素设置近大远小的效果
要求给父元素或祖先元素设置
perspective: 900px-1200px
景深越大,效果越不明显
景深越小,效果越明显
景深原点
perspective-origin: 水平 垂直
数值
百分比 百分比参考元素的宽高
方位词 left right center top bottom center
!有景深才能有景深原点,景深原点就是一个视觉观察的中心点
3d场景
transform-style:
flat 默认 平面
preserve-3d 3d场景
元素背对用户是否可见
backface-visibility:
hidden 隐藏
visible 可见 默认
变形原点
transform-origin:
x y z
x y : 数值 百分比 方位词
z: 数值

02-动画和过渡的区别

相同点: 都是对时间进行改变
不同点
1. 过渡是主动触发的,动画自动触发
2. 过渡只有一次, 动画可以多次
3. 过渡不能对属性进行更精确的控制,动画可以

03-多媒体标签

  1. 视频标签<br /> video<br /> src 视频的地址<br /> mp4 webm ogg<br /> controls 控件<br /> autoplay 自动播放 在谷歌浏览器中只有配合静音属性后才可以自动播放<br /> muted 静音<br /> loop 循环播放<br /> poster 封面 视频没有加载完成时展示的画面<br /> 音频标签<br /> audio<br /> src 音频的地址<br /> mp3 wav ogg<br /> controls 控件<br /> autoplay 自动播放<br /> muted 静音<br /> loop 循环播放

04-H5新增表单标签

input
type = ‘email’ 邮箱校验
type = ‘number’ 数字输入框
min 最小
max 最大
step 步进
type = ‘url’ 路径 协议 http:// | https:// + 域名
type = ‘color’ 颜色
type = ‘range’ 滑块
min 最小
max 最大
step 步进
type = ‘search’ 搜索
type = ‘tel’ 电话 在移动端能唤起数字软键盘
type = ‘time’ 时间
type = ‘date’ 日期
type = ‘week’ 周
type = ‘month’ 月
type = ‘datetime-local’ 选择本地时间

05-H5新增表单属性

autofocus: 自动获取焦点 一个页面只能有一个autofocus
required: 必填
autocomplete: 自动补全 自动提示功能
on 打开
off 关闭
- 表单控件必须设置name属性
- 表单控件必须提交过
pattern: 正则表达式校验
^(?:(?:+|00)86)?1[3-9]\d{9}$
multiple: 多选 用于下拉 文件上传
list: 和datalist的id名字绑定,做到输入框的提示信息列表
datalist
option
value
label
form: 和form标签的id名字绑定,可以做到在表单域外的表单控件也可以提交数据

06-h5语义化标签

section 区块 章节 部分
header 网页的头部
main 网页的主体
nav 网页的导航
footer 网页的底部
article 文章
aside 文章的补充部分
figure 独立的图片区域
figcaption figure的标题
figcaption必须时figure的第一个或者最后一个标签