css3和h5总结(资料不全,欢迎补充)
概括
H5
1.新增标签
-header 头部
-footer 底部
-nav 导航条
-video 视频
属性
-src 引入视频路径
-controls=controls 控制播放和暂停控件显示
-autoplay=autoplay自动播放
-loop=loop循环播放
-muted=muted静音播放
-刷新页面预加载preload=auto自动
preload=metadata刷新加载音频
preload=none不加载
-poster视频封面，地址需要自己填写
-audio 音频
属性
-src 引入视频路径
-controls=controls 音频控件显示
-autoplay=autoplay自动播放
-loop=loop循环播放
-muted=muted静音播放
-刷新页面预加载preload=auto自动
preload=metadata刷新加载音频
preload=none不加载
-poster视频封面，地址需要自己填写
//视频播放
<video controls="controls" src="" loop="loop"
autoplay="autoplay" muted="muted" preload="auto" poster=""></video>
//音频播放
<audio controls="controls" src=""></audio>
-figure 图表
-aside 侧标蓝
-canvas 画布
-dialog 对话框
-summary 列表标题
-progress 进度条
-acticle 文章
-sectiom 区域 节 段
src和href区别
href和import区别
2.移动端适配
<meta neme="viewport"content="width=device-width,initial-scale=1.0" />
写移动端必须写移动端适配
-百分比
-rem
-像素750 先写出iphone6尺寸下的页面
csss3知识点
圆角 盒子阴影 过渡 渐变
弹性布局 flex布局
2d转换
3d转换
多媒体查询@media 响应式布局
用浮动布局 浮动带来的问题 间距margin padding
css3
1.圆角 border-radius
1.盒子阴影 box-shadow: 0 0 10px 30px aqua;
2.渐变
线性渐变background:linear-gradient(red,green);
默认从上到下,如果想从左到右lin-gradient(to right,red,green):
径向渐变background:radial-gradient(red,green);
3.过渡 transition: all 2s;控制
4.2d转换 transform
-位移transform:translate(x,y);
-旋转transform:rotate(60der);
-缩放 transform:scale(x,y);
-倾斜2d和3d transform:skew(x,y);
-矩阵
5.3d转换
-位移transform:translate3d(x,y,z);
-旋转transform:rotate3d(1,1,1,60deg);
-缩放 transform:scale3d(x,y,z);
-倾斜2d和3d transform:skew(x,y);
-矩阵
转换基点:transform-origin:left/right/top/bottom;
3d环境
transform-style:preserve-3d
透视 近大远小,模拟眼球
perspective:500px;
6.动画 animation
-怎么实现动画效果:关键帧keyframes
-关键帧怎么用
一个状态
@keyframes 名称{
100%{ }
}
两个状态
@keyframes 名称{
from{}
to{}
}
多个状态
@keyframes 名称{
0%{}
50%{}
100%{}
}
动画属性
-循环播放 infinite
-动画填充模式 animation-fill-mode:
forwards保持最后一帧
backwards返回第一帧
-动画延迟animation-delay:4s;
-动画方向animation-direction
正序normal
倒序reverse
交替alternate
反向交替altername-reverse
-动画播放状态animation-play-state
运行running
暂停paused
-时间函数animation-timing-function
ease
ease-in
ease-out
ease-in-out
7.多媒体查询 响应式布局 @media
特点：一个页面适用于多个设备手机,ipad,pc
手机 320-640px 样式
ipad 640-759px 样式2
air 760-960px 样式3
pc 960以上 样式4
多媒体查询语句
@media screen and (min-width:100px) and (max-width:640px){
}
8.弹性布局 flex布局
注意：弹性布局不需要浮动和margin
vertical-align
1.横竖排列 项目主轴排列方式 justify-coltent
justify-content
-flex-start
-flex-end
-center
-space-botteen
space-around
align-items
-baseline
-flex-start
-flex-end
-center
-stretch
align-content
-flex-start
-flex-end
-center
space-around
-space-between
1.布局方式
2.传统float布局和弹性flex布局
3.盒子水平垂直居中
4.上下左右都居中
5.左列定宽，右列自适应
一切皆对象，面向对象
1.js自增如何运算(a++一元运算符)
a++ ++a a-- --a
2.二元运算符
a+=b
3.三元运算符 简单判断语句
条件？结果1是真的:结果2是假的
4.js基本数据类型
number string boolean null undefined
5.引用数据类型
对象object 数组array 函数function
6.null和undefined区别
null==undefined结果是true
null===undefined结果是false，数据类型不相等
typeof null是object typeof undefined结果是undefined
4.强制类类转换 1.强制类型转换 2.隐式类型转换
Number()
Boolean()
String()
parseInt()强制转换为Number
5.隐式类型转换
+ 1+"1"=11string,+遇到string是链接作用
- "2"-1=1unmber
*
/
%
string:"" " " "sdfsf" "4"
boolean true false
null undefined
number: 0 3 NaN 0.5
NaN not a number 不是一个具体的数值,属于number类型
NaN==NaN结果是false
运算符
1.算数运算符 + - * / %
2.比较运算符
3.赋值运算符 += -= *= /= %=
4.逻辑运算符
&& 与 全真则真 一假则假
|| 或 全假则假 一真则真
! 非 取反
短路运算
语句
1.循环语句
for while do..while
2.判断语音
if..else switch
3.跳转语音
break 中断 终止循环
continue 跳过当前循环，进行下一个循环
break和continue区别
=== ==
Math
1.向上取整 Math.ceil()
2.向下取整 Math.floor
3.绝对值 Math.abs() 把负数变成正数，正数还是正数
4.四舍五入 Math.round()0-1的小数
5.随机数 Math.random()
1-10
document.write(Math.ceil(Math.random()*10));
6.π=Math.PI
技术问题
1.针对html css浮动和定位
-清除浮动 clear:both
-定位position,概念次要,
-一个div不设置宽高,上下左右都居中 绝对定位
-定位结合弹性布局h5 css3
-品字布局
-css能继承属性
font系列全部都可以继承,color,text系列除decoration和indent
语义化标签：img strong a h1-h6 p em
非语义话标签 s u b i span
行标签：br,a,span,,em,i,p,ol,ul
块标签：div,p,h1-h6,ul,li,dl,dt,dd
行内块：img,input,textarea
-href 和 src (link @import)
2.h5 css3
-h5新增标签
-header
-footer
-nav
-audio
-video
-progress
-canvas
-dialog
css3新特性：圆角 盒子阴影 2d 3d 动画 flex @media
2d旋转trasnlate向左移动50% 定位向右移动50%,位移结合定位实现盒子居中
-transition和animation区别 animate
-布局方式:弹性布局 传统布局 响应式布局
-上下左右都居中
-响应式布局，特性 一个页面适用于多个设备，
-bootstrap就是根据@media原理
-px em rem区别，实用rem必须掌握
js
-基本数据类型和引用数据类型区别
基本数据类型存入栈
引用数据类型存入堆
栈(stack)：栈会自动分配内存空间，会自动释放，存放基本类型，简单的数据段，占据固定大小的空间。
基本类型：String，Number，Boolean，Null，Undefined
堆(heap):动态分配的内存，大小不定也不会自动释放，存放引用类型，指那些可能由多个值构成的对象，保存在堆内存 中，包含引用类型的变量，实际上保存的不是变量本身，而是指向该对象的指针。
引用类型：Function，Array，Object
-null和undefined区别
null==undefined结果是true
null===undefined结果是false，数据类型不相等
typeof null是object typeof undefined结果是undefined
-for,while,do <while></while>
-匹配星期一对应1(switvj)
-循环输出数组,对象,函数。分别有各自方法
-break和continue区别
=== ==区别 a++ ++a
浙公网安备 33010602011771号