H5+C3
一.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类型
- 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默认子元素不开启;
代码写给父级,影响的是子盒子