1）<audio src“文件地址” controls="controls"></audio> 音频标签语法格式         MP3 ogg

  autoplay=autoplay 音频马上播放
  controls=controls  向用户显示控件，比如播放按钮
  loop=loop 结束后重新播放
  preload=preload   加载

（2）<video src “文件地址”controls="controls"></dvideo>视频标签语法         MP4 ogg

  muted==muted 静音播放

  新增input标签，属性:           内容不能为空                                                光标             显示输入记录  关掉
    用户名：<input type="text" required="required" placeholder=“请输入用户名”autofocus=“autofocus”autocomplete=on/off>        <input type="submit"value=“提交”>
                   
                                         提交多个文件
        <input type="file" name= id = multiple=multiple
     

  css3

                类选择器，属性选择器，伪类选择器，权重为10；

                        E 父元素
                        （选择符）
                  (1)
    结构伪类选择器;  E:frist-child 选中第一个子元素
                     E:last-child  选中最后一个子元素
                          E:nth-child（n） 选中第n个
                     常见关键词 ：even 偶数 odd 基数；
                               （2n）偶数 ；（2n+1）基数 ；（5n）5.10.15 ；（n+5）从5个开始到最后；（-n+5）5以前；

                        nth-child(n) 是从所有子级元素开始算的，不管儿子的类型。

                    (2)
                     E：first-of-type                  指定类型的E的第一个；
                     E: last-of-type                  指定类型E的最后一个；
                     E: nth-of-type（n）        指定类型E的第个；

                        of-type" 选择指定类型的元素

  属性选择器：E[att]                 选择具有att属性的E元素；
              E[att=“val”]    选择具有att属性值等于val的E
              E[att^=“val”]   选择具有att属性开头串的E
              E[att$="val"]        选择           结尾
              E[att*=“val”]                  中间；



  伪元素选择器：：：before  在元素前面插入内容
                ：：after   在元素后面插入内容

                （1）必须有 conten：“”；

                （2）属于行内元素；
      
                （3）权重为1

  
    2D 转换 transfo；（位移，旋转，缩放）

                （1）位移：transform:translate(50px,50px)

                        translate中的百分比单位是相对于自身元素的宽和高  translate:(50%,50%);

                                        度数                               
                （2）旋转：transform：rotate（deg）；
                       
                        旋转中心默认为元素的中心点；
                               
                        转换中心：transfo-orgin
                        1.transform-origin：50% 50% 默认；
                        2.transform-origin：top left 左上角   0 0
                        3.transform-origin：50px 50px； 距离左上角50px 50px的位置
                               
                                            倍数；
                （3）缩放：transfor：scale（x，y）；
         
   
     动画：animation；
   
          步骤： 先在css定义动画，在给目标元素使用动画；
         
           定义动画：
                    名称
         @keyframes move {
                   开始 0% {
                          transform:translateX(0)
                         }
                   结束 100%{
                        transform:translateX(1000px)
                           }
                        }
        div {
        调用动画；
        名称：                animation-name move；
        时间：          animation-duration：2s；               
        速度曲线：         animation-timing-function  linear（匀速）；
        何时开始：        animation-delay；   默认0s；
        播放次数：        animation-iteration-count；  默认1次， infinite（无数次）
        逆向播放：        animation-direction   默认 normal      alternate（倒车）
        运行和暂停：         animation-play-state  默认runnin    paused（暂停）
        结束后的状态：  animation-fill-mode 保持forwards  回到起始backwards
   
        动画简写：animation：name（名字） duration（运行时间） timing-function（运动曲线）
         delay(何时开始）iteration-count（播放时间） direction（逆向播放） fill-mode；（暂停）
       

        速度曲线细节        
      
        animation-timing-function :
   
        1 . linear 匀速 2.ease 低速开始，变快，结束慢（默认）3.ease-in 低速开始
       
        3.ease-out 低速结束 4.ease-in-out 低俗开始和结束。5.steps（步数）。


   3 D ：
           （1）  视距：perspertive：1000px；（人和物体的距离）
            
             3D转换 ：X轴  transform:rotateX(90deg)；  （耍单杠）
                        
             3D转换 ：Y轴  transform:rotateY(90deg)；  （钢管舞）
               
             3D转换 ：Z轴  transform:rotateZ(90deg)；  （幸运大抽奖）
                 
                          transform:rotateZ(x，y，z deg)

           （2）  缩放：
       
                    X轴  transform：scaleX（倍数）   缩放宽
                       
                    Y轴  transform：scaleY（倍数）   缩放高
       
                    Z轴  transform：scaleZ（倍数）   缩放厚度

           （3） 转换样式： transform-style：

                transform-style：flat； 平面模式，不开启三维立体环境 （默认）
          
                  transform-style：preserve-3d；    三维立体环境

                代码写给父级，但是影响的是子盒子
                视距、视距原点、转换样式 这三个属性都是给父元素添加的；
移动web开发流式布局:

        PC端：
                屏幕大
                视口：浏览器的大小。而且可以改变浏览器的大小，也就改变了视口的大小。
        手机端：
                屏幕小
                浏览器大小是不能改变的。
               
                历史问题：以前布局的页面是不是都是以pc端为主，小屏幕怎么显示大网页。
                解决：手机浏览器厂商，设置了默认的视口--布局视口layout viewport  980px。               
               
                现在的问题：随着手机设备的发展，专门针对手机端设计小页面，但浏览器的默认视口比较大。               
                解决：发明了1个meta标签，作用：改变手机浏览器的默认视口大小，根据手机浏览器大小。

       meta标签（能够在移动页面中复制过来，知道含义）
                作用：根据手机浏览器屏幕大小，改变手机浏览器的默认视口大小。
                默认视口大小 = 设备屏幕大小

                              视口        内容        设备宽度                 缩放         初始缩放比
                <meta name="viewport" content="width=device-width, urer-scalable=no,initial-scale=1.0"
                        最大放缩比     最小放缩比
                maximum-scale=1.0 ，minimum-scale=1.0>


       2倍视图：
               
                  在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题；

                由来：图片在高清的屏幕显示时，会被放大，图片放大就会模糊。

                解决：制作图片时制作倍图，布局显示的时候缩小显示。
               
                1.插入图片（设置图片的宽、高）
                2.背景图片（缩放背景图，background-size:; 把整个图片进行缩放）
                        1>单个背景图
                        2>精灵图【量准坐标】
                                第1步，先在fireworks，把精灵图缩小一半，然后量坐标
                                第2步，在代码里，设置背景图片，并把背景图片缩小一半。
弹性布局 1. 加给父元素的属性
                       
                            设置主轴的方向： 水平                       垂直      
        （1）设置子元素排列方向：flex-direction：row     row-rever    colum   colum-rever
                                             左到右        右到左     上到下   下到上




        （2）设置子元素排列方式：justify-content :
   
                flex-start:头部开始 主轴是x轴时 从左到右

                flex-end:尾部开始 主轴是x轴时 从尾部开始排列
       
                center 主轴居中对齐  主轴x轴        水平居中

                space-around 平分剩余空间
       
                space-between 先两边贴边 再平分剩余空间

        
          换行： flex-wrap:   默认不换 nowrap     换行 wrap；


                      设置侧轴上子元素排列方式：

                （单行）align-items： 设置侧轴上子元素排列方式（单行）
                                        - flex-start 从头部开始


                                        - flex-end 从尾部开始


                                        - center 居中显示


                                        -stretch 拉伸


                （多行）align-content:设置侧轴上子元素排列方式（多行）
          
                        flex-start  默认 再侧轴的头部开始排列
       
                        flex-end      在侧轴的尾部开始排列
   
                        center      在侧轴中间显示

                        space-around   子项在侧轴平分剩余空间
                       
                        space-between  子项在侧轴先分布两头，在平分剩余空间

                        stretch     设置子项元素高度平分父元素高度

        flex-flow 属性：       
                        flex-flow:row wrap;

               
          
             2. 给子元素添加样式：

                  
                flex：控制子元素本身的缩放，定义子项目分配剩余的空间 flex表示站的分数：

                  flex：<数字>

        比例值的计算：

                当前父元素中，所有兄弟元素 flex值的和（即总份数）。
                如果没有设置flex，则默认为 0（即子元素不会去占据剩余空间）。
               
        align-self：控制子项自己在侧轴上的排列方式：
                       
                        span：nth-chrld（2）{
                                             align-self：flex-end；                       
                                                }
               
        order:定义项目的排列顺序：
                           
                                order<数字>

                        数值越小，越排列在前面
                       

1）<audio src“文件地址” controls="controls"></audio> 音频标签语法格式         MP3 ogg

  autoplay=autoplay 音频马上播放
  controls=controls  向用户显示控件，比如播放按钮
  loop=loop 结束后重新播放
  preload=preload   加载

（2）<video src “文件地址”controls="controls"></dvideo>视频标签语法         MP4 ogg

  muted==muted 静音播放

  新增input标签，属性:           内容不能为空                                                光标             显示输入记录  关掉
    用户名：<input type="text" required="required" placeholder=“请输入用户名”autofocus=“autofocus”autocomplete=on/off>        <input type="submit"value=“提交”>
                   
                                         提交多个文件
        <input type="file" name= id = multiple=multiple
     

  css3

                类选择器，属性选择器，伪类选择器，权重为10；

                        E 父元素
                        （选择符）
                  (1)
    结构伪类选择器;  E:frist-child 选中第一个子元素
                     E:last-child  选中最后一个子元素
                          E:nth-child（n） 选中第n个
                     常见关键词 ：even 偶数 odd 基数；
                               （2n）偶数 ；（2n+1）基数 ；（5n）5.10.15 ；（n+5）从5个开始到最后；（-n+5）5以前；

                        nth-child(n) 是从所有子级元素开始算的，不管儿子的类型。

                    (2)
                     E：first-of-type                  指定类型的E的第一个；
                     E: last-of-type                  指定类型E的最后一个；
                     E: nth-of-type（n）        指定类型E的第个；

                        of-type" 选择指定类型的元素

  属性选择器：E[att]                 选择具有att属性的E元素；
              E[att=“val”]    选择具有att属性值等于val的E
              E[att^=“val”]   选择具有att属性开头串的E
              E[att$="val"]        选择           结尾
              E[att*=“val”]                  中间；



  伪元素选择器：：：before  在元素前面插入内容
                ：：after   在元素后面插入内容

                （1）必须有 conten：“”；

                （2）属于行内元素；
      
                （3）权重为1

  
    2D 转换 transfo；（位移，旋转，缩放）

                （1）位移：transform:translate(50px,50px)

                        translate中的百分比单位是相对于自身元素的宽和高  translate:(50%,50%);

                                        度数                               
                （2）旋转：transform：rotate（deg）；
                       
                        旋转中心默认为元素的中心点；
                               
                        转换中心：transfo-orgin
                        1.transform-origin：50% 50% 默认；
                        2.transform-origin：top left 左上角   0 0
                        3.transform-origin：50px 50px； 距离左上角50px 50px的位置
                               
                                            倍数；
                （3）缩放：transfor：scale（x，y）；
         
   
     动画：animation；
   
          步骤： 先在css定义动画，在给目标元素使用动画；
         
           定义动画：
                    名称
         @keyframes move {
                   开始 0% {
                          transform:translateX(0)
                         }
                   结束 100%{
                        transform:translateX(1000px)
                           }
                        }
        div {
        调用动画；
        名称：                animation-name move；
        时间：          animation-duration：2s；               
        速度曲线：         animation-timing-function  linear（匀速）；
        何时开始：        animation-delay；   默认0s；
        播放次数：        animation-iteration-count；  默认1次， infinite（无数次）
        逆向播放：        animation-direction   默认 normal      alternate（倒车）
        运行和暂停：         animation-play-state  默认runnin    paused（暂停）
        结束后的状态：  animation-fill-mode 保持forwards  回到起始backwards
   
        动画简写：animation：name（名字） duration（运行时间） timing-function（运动曲线）
         delay(何时开始）iteration-count（播放时间） direction（逆向播放） fill-mode；（暂停）
       

        速度曲线细节        
      
        animation-timing-function :
   
        1 . linear 匀速 2.ease 低速开始，变快，结束慢（默认）3.ease-in 低速开始
       
        3.ease-out 低速结束 4.ease-in-out 低俗开始和结束。5.steps（步数）。


   3 D ：
           （1）  视距：perspertive：1000px；（人和物体的距离）
            
             3D转换 ：X轴  transform:rotateX(90deg)；  （耍单杠）
                        
             3D转换 ：Y轴  transform:rotateY(90deg)；  （钢管舞）
               
             3D转换 ：Z轴  transform:rotateZ(90deg)；  （幸运大抽奖）
                 
                          transform:rotateZ(x，y，z deg)

           （2）  缩放：
       
                    X轴  transform：scaleX（倍数）   缩放宽
                       
                    Y轴  transform：scaleY（倍数）   缩放高
       
                    Z轴  transform：scaleZ（倍数）   缩放厚度

           （3） 转换样式： transform-style：

                transform-style：flat； 平面模式，不开启三维立体环境 （默认）
          
                  transform-style：preserve-3d；    三维立体环境

                代码写给父级，但是影响的是子盒子
                视距、视距原点、转换样式 这三个属性都是给父元素添加的；
移动web开发流式布局:

        PC端：
                屏幕大
                视口：浏览器的大小。而且可以改变浏览器的大小，也就改变了视口的大小。
        手机端：
                屏幕小
                浏览器大小是不能改变的。
               
                历史问题：以前布局的页面是不是都是以pc端为主，小屏幕怎么显示大网页。
                解决：手机浏览器厂商，设置了默认的视口--布局视口layout viewport  980px。               
               
                现在的问题：随着手机设备的发展，专门针对手机端设计小页面，但浏览器的默认视口比较大。               
                解决：发明了1个meta标签，作用：改变手机浏览器的默认视口大小，根据手机浏览器大小。

       meta标签（能够在移动页面中复制过来，知道含义）
                作用：根据手机浏览器屏幕大小，改变手机浏览器的默认视口大小。
                默认视口大小 = 设备屏幕大小

                              视口        内容        设备宽度                 缩放         初始缩放比
                <meta name="viewport" content="width=device-width, urer-scalable=no,initial-scale=1.0"
                        最大放缩比     最小放缩比
                maximum-scale=1.0 ，minimum-scale=1.0>


       2倍视图：
               
                  在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题；

                由来：图片在高清的屏幕显示时，会被放大，图片放大就会模糊。

                解决：制作图片时制作倍图，布局显示的时候缩小显示。
               
                1.插入图片（设置图片的宽、高）
                2.背景图片（缩放背景图，background-size:; 把整个图片进行缩放）
                        1>单个背景图
                        2>精灵图【量准坐标】
                                第1步，先在fireworks，把精灵图缩小一半，然后量坐标
                                第2步，在代码里，设置背景图片，并把背景图片缩小一半。
弹性布局 1. 加给父元素的属性
                       
                            设置主轴的方向： 水平                       垂直      
        （1）设置子元素排列方向：flex-direction：row     row-rever    colum   colum-rever
                                             左到右        右到左     上到下   下到上




        （2）设置子元素排列方式：justify-content :
   
                flex-start:头部开始 主轴是x轴时 从左到右

                flex-end:尾部开始 主轴是x轴时 从尾部开始排列
       
                center 主轴居中对齐  主轴x轴        水平居中

                space-around 平分剩余空间
       
                space-between 先两边贴边 再平分剩余空间

        
          换行： flex-wrap:   默认不换 nowrap     换行 wrap；


                      设置侧轴上子元素排列方式：

                （单行）align-items： 设置侧轴上子元素排列方式（单行）
                                        - flex-start 从头部开始


                                        - flex-end 从尾部开始


                                        - center 居中显示


                                        -stretch 拉伸


                （多行）align-content:设置侧轴上子元素排列方式（多行）
          
                        flex-start  默认 再侧轴的头部开始排列
       
                        flex-end      在侧轴的尾部开始排列
   
                        center      在侧轴中间显示

                        space-around   子项在侧轴平分剩余空间
                       
                        space-between  子项在侧轴先分布两头，在平分剩余空间

                        stretch     设置子项元素高度平分父元素高度

        flex-flow 属性：       
                        flex-flow:row wrap;

               
          
             2. 给子元素添加样式：

                  
                flex：控制子元素本身的缩放，定义子项目分配剩余的空间 flex表示站的分数：

                  flex：<数字>

        比例值的计算：

                当前父元素中，所有兄弟元素 flex值的和（即总份数）。
                如果没有设置flex，则默认为 0（即子元素不会去占据剩余空间）。
               
        align-self：控制子项自己在侧轴上的排列方式：
                       
                        span：nth-chrld（2）{
                                             align-self：flex-end；                       
                                                }
               
        order:定义项目的排列顺序：
                           
                                order<数字>

                        数值越小，越排列在前面