H5标签:
H5就是HTML5
H5新增标签:
1、header:头部信息
2、section:内容
3、footer:底部信息
4、<progress value="" max="100"> </progress>进度条
改变progress背景颜色:
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value { background: #0064B4; }
value:值
5、移动端适配:
<meta name="viewport" content="width=device-width,initial-scale=1.0
">
viewport视口 device-width 设备宽度, initial-scale=1.0 不缩放
6、article:文章标签,可以包含文字p标签,图片img标签
7、aside:侧边栏:和div相同
8、dialog:对话框,提示框 log:日志(默认样式:display:none;opcaity:0;不显示)
9、 details:带详细信息的列表
<details open="open">
<summary>详细信息内容</summary>
<h3>啥啥啥</h3>
<p>sss<p>
</details>
10、figure:独立流内容 可放图片,图表,图像
figcaption 是figure的标题
<figure>
<figcaption>全国GDP增长</figcaption>
</figure>
11、meter:度量衡
<meter value="30" max="100" height="80"></meter>
value当前值 max:最大值 min:最小 low:最低值 height:最高值
音频:audio
写法①:<audio><source src=""></source></audio>
写法②:<audio src=""></audio>
属性(写在标签上):
src=""引入音频文件
controls:audio标签的必须项(写,才显示播放器),作用:控制播放和暂停
autoplay:自动播放
loop:循环播放
muted:静音播放
prelode="auto/metadata/none":页面刷新时是否先加载音频
metadata:刷新页面,加载音频
none 刷新页面,不加载音频
视频:video
写法①:<video><source src=""></source></video>
写法②:<video src=""></video>
属性:
src=""引入视频的路径
controls:视频的播放和暂停 必须写,不写视频不显示播放按钮
autoplay:视频自动播放
loop:循环播放
muted:静音播放
preload="auto/metadata/none"
auto:刷新页面时,网络好加载视频
metadata:刷新页面时,加载视频
视频封面:poster="图片url"这个路径代码中不会像img标签那样提示,直接写准确的路径
12、H5本地存储
HTML5本地存储Localstorage 土著
Local本地的 storage存储
一、sessionStorage:session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站的这个时间段,session对象的有效期就这么长
H5新增input属性
<input type="">:
1、拾色器:<input type="color">
2、必须输入邮件:<input type="email">
3、获取url地址:url<input type="url">
4、生成数字:<input type="number">
5、搜索框<input type="search">
6、日期和时间:<input type="deta">
-tetatime:<input type="datetime">
7、区间范围:<input type="range">
-range
画布:canvas:是绘制图形,图标等容器,它没有绘画能力(只是个图形的容器),实现绘画要结合脚本使用
蘑菇街基本布局:
移动端需要注意的细节问题:
1、移动端字体最小不能小于13px
2、移动端的宽度最小是320px,所以对固定的值有最小值
3、移动端的a标签注意宽高设置(手触 触发不了)
4、使用文本超出省略号尽量使用div标签
5、修改input中placeholder 默认字体颜色:input::-webkit-input-placeholder {}
单位换算:
rem,em,px区别
1em=1rem=16px 0.5em=8px
Px 像素 px是固定长度单位,不随其他元素的变化而变化
em em是相对于父级元素的单位,会随父级元素的属性(font-size 或其他属性) 变化而变化。只是父子级
rem(css3新增的相对长度单位)
rem是相对于根目录(html元素)的,所有他会随html元素的属性(font-size)变化而变化(width,height,padding,line-height)
ren,em,px区别
1、px是固定值
2、em和rem 是相对值
3、em是需要设置父级比例,子级根据父级变化,rem是需要设置html根目录比例,页面所有元素根据目录变化
4、em和rem都可以转换成px
1em=16px (浏览器像素)
1rem=16px (浏览器像素)
偶数选择器:
&:nth-child(odd){}
奇数选择器:
&:nth-child(event){}
CSS3基础:
1、圆角:border-radius
-值 百分比 50% 100%
-值 像素 根据圆的直径算角的弧度
-如果是合并角 先写上下 再写左右
例:border-top-left-radius:50%;对
border-left-top-radius:50%;错
13
`
半圆属性:border-radius:50% 0 0 /100% 100% 0 0;
半圆弧线:border-radius:100% 0 100% 0;
background:transparent; transparent透明
border-top:red solid 10px;
写伪类和伪元素必备
1、content:"";
2、position: absolute(本身需要加relative 相对定位)
不同形状基本都是有宽高,伪类或者边框实现
无宽高 设置边框 和不同颜色是不同三角形
设置宽高 由三角形变成梯形
五边形 是 三角形 + 倒梯形
六边形 是 长方形 + 两边三角形
八边形 是 上下两个等腰梯形 + 中间长方形
2、背景渐变
-线性渐变:
background:linear-gradient(red,green);
如果想让第一个颜色值占整个div的20%,第二个值占80%可以这么写(颜色占比):
background:linear-gradient(red 20%,green 80%);
方向改变:background:linear-gradient(to right,red 40%,green 30%);
-径向渐变:radial-gradient(red,green);
颜色占比 background:radial-gradient(red 40%,green 30%);
-边框图片:border-image 边框图片
3、过渡:transition
transition:3s;
transition:all 3s;所有属性都过渡3秒
4、2D转换 transform
2D位移:translate 转换只有两个轴X轴和Y轴,3D转换有3个轴 X,Y,Z
transform:translate(100px,200px)第一个值是X轴的坐标,第二个值是Y坐标
transform:translateX(100px) 水平位移向右100px,正值往右,负值往左
transform:translatY(100px) 垂直位移向右100px,正值往右,负值往左
2D旋转:rotate
transform:rotate(60deg);正数顺时针,负数逆时针
transform:rotareX(60deg);X轴正数顺时针旋转60°,负数逆时针
transform:rotareY(60deg);Y轴负数逆时针旋转60°,正数数顺时针
2D缩放:scale
0.1-0.9是缩小的倍数,1-无穷大整数放大的倍数
transform:scale(2,3);X放大两倍,Y轴放大3倍
transformscaleX(0.5);X缩小0.5倍
transform:scaleY(0.1);Y轴缩小的0.1倍
2D倾斜:skew
transform:skew(60deg,60deg);X Y轴同时倾斜60deg
transform:skewX(60deg);X轴倾斜60度
transform:skewY(60deg);Y轴倾斜60度
矩阵:matrix(n,n,n,n,n,n) 定义2D转换用6个值
矩阵是通过算法将上面4个 位移,旋转,缩放,倾斜效果同时写出来
要实现位移,旋转,缩放,倾斜同时的效果写法:transform: translate(600px,100px) rotate(-360deg) scale(2,0.5) skew(60deg,60deg);
2d和3d的区别:属性相同,区别就是 3d使用时多了3d两个字母
旋转基点:transform-origin:left/right/top/bottom;
透视旋转基点:perspective-origin:X Y;
5、3D转换 transform:3d;
3d转换是3个轴 X Y Z 都互相垂直
3d空间显示的2个必要条件:
1、透视 :perspective:500px;近大远小
2、transform-style: preserve-3d;让子级元素在3d空间显示
3D位移:translate3d
transform:translate3d(100px,200px,300px);第一个值是X轴的坐标,第二个值是Y轴坐标,第三个值是Z轴坐标
transformtranslateX(100px);水平位移向右100px,正值往右,负值往左
transform:translateY(100px);垂直位移向下100px,正值往下,负值往上
transform:translateZ(100px);前后位移向下100px,正值往前,负值往后
3D旋转:rotate 单位:deg
前面三个数分别是X,Y,Z旋转的矢量值,范围0-1
transform:rotate3d(1,1,1,280deg);正数顺时针,负数逆时针
transform:rotateX(200deg); X轴顺时针旋转200度
transform:totateY(200deg); Y轴逆时针旋转200度
transition:rotateZ(-200deg);Z轴逆时针旋转200度
3D缩放:scale3d;(si gei ou)
0.1-0.9是缩小的倍数,1-无穷大整数放大的倍数
transform:scale(2,3,5);X放大两倍,Y轴放大3倍,Z轴放大5倍
transformscaleX(0.5);X缩小0.5倍
transform:scaleY(0.1);Y轴缩小的0.1倍
transform:scaleZ(0.1);Z轴缩小的0.1倍
6、盒子阴影:box-shadow:apx bpx cpx dpx #e;
a阴影水平的位置,当a的为0 阴影就是水平左右平均
b阴影垂直的位置,当b的为0,阴影就垂直上下都平均
c阴影模糊程度,c值越大模糊越大
d阴影的范围,d值越大模糊程度越大
e阴影的颜色,直接写色值或者16进制颜色值
7、文字阴影(只有4个值):text-shadow:apx bpx cpx #d;
第一个值 文字阴影水平 0 就是左右均等,正数往右,负数往左
第二个值 阴影垂直位置 0 上下均等,正数往下,负数往上
第三个值 模糊程度 0是完全不模糊,值越大模糊程度越大
第四个值 阴影的色值
!8、动画:
动画必备条件:
①关键帧:@keyframes
语法1:@keyframes 动画名称{
from{}
to{}
}
语法2:@keyframes 动画名称{
10%{}
50%{}
75%{}
100%{}
}
②时间:(调用动画时候写时间)
调用动画
animation:动画名称 时间 (s) 播放次数
默认属性:
- 播放次数 播放一次linear
- 循环播放 infinite
9、动画播放的方向:animation-direction
- animation-direction:normal;正序播放
- animation-direction:reverse;倒序播放
- animation-direction:alternate;交替播放
- animation-direction:alternate-reverse;反向交替
10、时间函数:animation-timing-function:
- ease/is/开始和结束时慢速,中间快速
- ease-in 开始慢速
- ease-out 结束慢速
- ease-in-out 开始结束慢速,中间匀速
- linear 匀速播放
11、动画延迟:animation-delay:
animation-delay:2s;
12、动画播放状态:animation-play-state:
- running 默认 动画正常播放
- paused 动画暂停播放 不播放
13、动画填充模式 animation-fill-mode
-animation-fill-mode:none; 动画前后不改变样式
-animation-fill-mode:forwards;(前进) 保持最后一帧样式
-animation-fill-mode:backwards;(后退) 回到第一帧的样式
-animation-fill-mode:both;
14、多媒体查询@media
1、媒体功能
*print 打印机
*color,color-index 彩绘
*scan 定义电视类设备的扫描工序
设备尺寸范围:
@media only screen and(min-width=960px){}
media 多媒体 only仅限于 screen屏幕
min-width 最小宽度 min-height 最小高度
max-width 最大宽度 max-height 最小高度
>=640px min-width:640px
>=640px <960px min-width:641px and max-width:960px
<=640px max-width:640px
多媒体查询优点:可以兼容多个设备以及实现响应式布局
例:@media only screen and(min-width=640px)and(max-width=959px)
{
width:100%
height:521px;
background:#000000;
}
15、弹性布局 flex布局:弹性容器和弹性子元素组成
1、弹性容器设置
display:flex;父级设置flex属性,父级容器变成弹性容器
2、弹性盒子的方向设置
flex-direction:row;横向排列
flex-direction:row-reverse;横向反向排列
flex-directiob:column;纵向排列靠上
flex-direction:column-reverse;纵向反向排列靠下
3、弹性盒子换行
flex-wrap:nowrap;默认设置,不换行
flex-wrap:wrap;换行
flex-wrap:wrap-reverse;反向换行
4、flex-flow可以同时设置flex-direction和flex-wrap
flex-flow:row wrap;空格隔开两个属性
row可以替换 row reverse column column-reverse;
wrap可以替换 nowrap wrap-reverse
5、控制项目在主轴排列方式:justify-content
flex-start 横向靠左,纵向靠上
flex-end 纵向靠右,横向靠下
center 居中
space-between (上下/左右)两边靠边中间平分
space-around 两边有空隙中间平分,两边空隙是中间一半
6、控制轴线排列方式:align-content
flex-start 横向靠左,纵向靠上
flex-end 底对齐
center 垂直方向居中对齐
stretch(子项不能设置高度,拉伸至父级高度) 强制填满容器
space-between(两者之间) 上下两端对齐
space-around 上下环绕居中
space-evenly 两边间隙居中间相等
space(太空 空间)
between(两者之间)
around(周围)
streth(拉伸)
7、align-items控制子项再交叉轴上位置
align-items:flex-start 横向靠上 纵向靠左
align-items:flex-end 横向靠下 纵向靠右
align-items:center 居中
align-items:baseline 基线
align-items:streth (子项不能设置高度)拉伸至父级高度或宽度
8、align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式
align-self:flex-start 横向靠上,纵向靠左
align-self:flex-end 横向靠下 纵向靠右
align-self:center 居中
align-self:baseline 基线 与flex-start效果类似
align-self:(子项不能设置高度) 拉伸至父级高、宽度
width:-webkit-fit-content; 不能设置宽度具体值和百分比时,横向撑满一整屏
order 设置子项排序 order="1" order="2" 设置子元素在上面还是下面
flex-shrink 当子项超出父级时所有子项收缩比例
1、如果设置0就代表不收缩,flex-wrap:normal;
flex-basis basis基准,如果父级有空余空间,可以单独设置flex-basis,如果有这个会把之前的width的值替换
flex:flex-grow flex-shrink flex-basis; flex可以综合三个属性同时写到一起 空格隔开,也可以单独设置