5.1笔记

html5 里面的新标签

   <article>独立内容</article>
   <aside>定义侧边栏</aside>
   <bdi>  脱离元素的设置方向</bdi>
   <dialog open> 弹框</dialog>
   <summary>详细</summary>
   <p> 详细部分</p>
   <header>上标</header>
   <footer> 下标</footer>

定义内容区块

<section>一块内容</section>
<time> 2019-05-02</time>
<p>home<wbr>home<wbr>homehome<wbr>home<wbr>home home<wbr>home<wbr>home home<wbr>home<wbr>home</p>
类似折行   在网页伸缩的时候按照单词来换行

html5里面的布局标签

<article>
<aside>
<header>
<footer>
<nav>
<section>

媒介

<video src="./mp4/aido.mp4" controls autoplay loop muted></video>
 <audio src="" controls loop autoplay muted></audio>
<video poster="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4268067765,629557654&fm=58&bpow=400&bpoh=565">
    <source src="./mp4/aido.mp4" type="video/mp4">
</video>

video controls 控制条 autoplay自动播放 loop 循环播放 muted 静音
audio 所有属性和video 一样

canvas>绘图</canvas>

css3

阴影

box-shadow:10px 10px 10px red,20px 20px 20px blue
box-shadow: 0 0 10px red inset
线性渐变
background: linear-gradient(90deg,red,yellow);
圆形渐变
  background: radial-gradient(red, yellow, blue, green, pink, orange);

css3里面的动画

transform translate(平移x,y,z) rotate(旋转x,y,z) skew(变形 deg) scale(伸缩 w,h)
translate 默认x rotate 默认旋转z 旋转中心

transform-origin:0 50%;设置旋转中心

过渡 过渡的是元素的属性值
transition-timing-function动画的执行方式 linear 匀速 ease-in 慢开 ease-in-out 慢开慢关

 transition-timing-function: linear;       

帧动画

           动画名称
            animation-name:animate ;
            动画执行时间
            animation-duration: 5s;
            动画执行方式
            animation-timing-function: linear;
            动画的延迟               
             animation-delay: 1s;
            动画播放多少次   infinite循环播放
            animation-iteration-count: 1;
            播放方式  alternate  奇偶播放
            animation-direction: alternate;
            动画是否播放 paused
            animation-play-state: running;
            animation:animate 1s 2s linear infinite alternate;
            动画停止到完成位置
            animation-fill-mode: forwards;

transform-style:preserve-3d; 2d转3d

css3 box 弹性布局

固定模式布局 流动布局100% 弹性布局 flex （手机移动端 类似于table）

display:flex;  把容器转化为弹性布局
flex-direction: column;  规定里面的元素按照什么方式来布局  row  column  翻转
align-items  子元素在y 轴上对其的方式  center 居中  flex-end  底边  flex-start  上边  stretch 垂直拉伸
justify-content x轴对齐   center 居中  flex-end 右边对齐  flex-start  左边对齐  space-between 左右两边对齐 中间平分pace-around  均分所有空白
flex-wrap: wrap;  控制行里面  进行换行
align-content: space-between;  在行里面使用 行留白的时候有效果
flex: 1; 行里面的元素进行分配空间  按等份分配

css3里面的手机自适应

viewport 视口
width=device-width  宽度等于屏幕的宽
initial-scale=1.0  伸缩比例为1.0
maximum-scale=3.0  最大伸缩比例
minimum-scale=1.0  最小伸缩比例
user-scalable=no 禁止用户缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0,user-scalable=no">