H5C3部分 零碎知识点

（1）表单类型：email  url  number  tel  search  range  color  date  month   week  
            例如  <input type="email" name="email" id=""/>

                     <input type="number" name="number" step="3" />

    （2）表单元素：text  password
            例如智能下拉菜单  
            <label >性别：<input type="text" name="sex" list="sex" /></label>
            <datalist id="sex">
                <option >男</option>
                <option >女</option>
                <option >不祥</option>

            </datalist>

        （3）表单属性： placeholder:提示文字（占位符）
                                   autofocus:自动获取焦点
                                   autocomplete: 自动完成（填充的） on 开启（默认）  off 取消自动提示
                                   required: 必填
                                   multiple: 多选
                                   novalidate:关闭默认的验证功能（只能加给form）
                                   pattern: 自定义正则验证
                                   pattern="1\d{10}"
          例如  用户名：<input type="text" placeholder="例如：李狗蛋" autofocus name="userName" autocomplete="on" required/>
                   电话：<input type="tel" pattern="1\d{10}" />

                    上传：<input type="file" name="file" multiple/>

        （4）表单事件：oninput (当用户输入的时候）

                                  oninvalid（当验证不通过时触发）
                                  setCustomValidity（用于设置验证不通过时的 提示文字）

           例如  txt1.oninvalid=function(){
                         this.setCustomValidity('亲，请输入正确的邮箱格式！');
                    }

          （5）多媒体：audio  video

                    autoplay: 自动播放
                    controls:控制条
                    loop：循环
                    <!--推荐的兼容写法：-->   
                    <audio controls loop>
                        <source src="music/yinyue.mp3"/>
                        <source src="music/yinyue.ogg"/>
                        <source src="music/yinyue.wav"/>
                        抱歉，你的浏览器不支持音频标签！

                    </audio>

                    <video controls autoplay>
                        <source src="video/movie.mp4"/>
                        <source src="video/movie.ogg"/>
                        <source src="video/movie.webm"/>
                        抱歉，浏览器要换了！

                    </video>

        （6）CSS3选择器

                ① 属性选择器
                    div[class]{color:red;}  //所有div带有class类名的
                    div[class="box1"]      //div 带有class属性 ，并且值为 box1
                    div[class^="aa"]        //div 带有class属性 ，并且值以 aa开头
                    div[class$="aa"]        //div 带有class属性 ，并且值以 aa结尾

                    div[class*="aa"]         //div 带有class属性 ，并且值包含aa

                ②伪类选择器
                    :hover  :link  :active  :visited  lvha
                    li:first-child   //第一个
                    li:last-child   //最后一个
                    li:nth-child(11)  //第11个，编号从1开始
                    li:nth-child(odd)  或 li:nth-child(2n+1) //奇数
                    li:nth-child(even) 或 li:nth-child(2n) //偶数
                    li:nth-child(-n+5)  //选中前五个
                    li:nth-last-child(-n+5)  //选中后五个

                    li:nth-child(6n)     //6的倍数

                    div:empty   //伪类 div双标签里为空的会被选中        

                    h2:target    //伪类  要配合锚点使用   详情见：http://blog.csdn.net/hyupeng1006/article/details/79395984

                    span::before和span::after  //伪元素  详情见：http://blog.csdn.net/hyupeng1006/article/details/79396046

                    li::first-letter   //选中第一个字母（识别支持各种语言）

                    div::first-line  //选中第一行

           （7）颜色

                ① opacity:0.3;   //可以给盒子设置半透明，但是外盒子设置了透明度会影响里面子盒子，并且子盒子无法改变透明度
                    background: transparent;  //可以单独设置透明度，但是无法 改变透明的值

                    background-color: rgba(0,0,255,0.3); //常用这个设置透明度

           （8）阴影

                ① 文本阴影  text-shadow: 水平位移 垂直位移  模糊程度  阴影颜色;  如：text-shadow: 24px 27px 22px #333;

                    可以设置多个阴影，每个阴影之间使用逗号隔开。  如：text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
                ② 边框阴影  box-shadow: 水平位移 垂直位移  模糊程度  阴影大小 阴影颜色 外/内阴影(inset)  外阴影不用写
                    如：box-shadow:3px 3px 3px 3px #666 inset

           （9）盒模型

                box-sizing: content-box;   //设置的放内容区域大小

                box-sizing: border-box;    //设置盒子模型中最大盒子大小，如果在加paddig border 只会减小放内容的区域

          （10）背景

                ①背景尺寸  cover  覆盖   contain: 包含    如：background-size:cover;   

                ②背景原点  background-origin: padding-box;   //默认
                                    background-origin: border-box;   //从border-box开始显示

                                    background-origin: content-box   //从content-box开始显示

                 ③背景裁剪  background-clip:content-box;    //和背景原点一样

                 ④多背景   给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开
                        background: url(images/bg1.png) no-repeat left top
                                            ,url(images/bg2.png) no-repeat right top
                                            ,url(images/bg3.png) no-repeat right bottom
                                            ,url(images/bg4.png) no-repeat left bottom
                                            ,url(images/bg5.png) no-repeat center;

            （11）渐变
                    ①线性渐变  linear-gradient(方向，起始颜色，终止颜色);

                        （方向：to left   to right  to top   to bottom 　角度　30deg）

                    ②径向渐变  radial-gradient（辐射半径, 中心的位置，起始颜色，终止颜色）

                        （中心点位置：at  left  right  center bottom  top）

             （12）过渡     （加给盒子本身）
                    transition: 过渡属性 持续时间  运动曲线 延迟执行时间   如：transition:all 4s ease-out 1s

                    （运动曲线： linear 线性  ease ease-in ease-out  ease-in-out :先加速后减速）

             （13）2D变换 （加给盒子动作的上面  如：div:nth-child(2):hover）
                    ①放缩   transform:scale(水平放缩比例，垂直放缩比例)； 如： transform: scale(2,0.5);

                        （如果只写一个值等比例缩放）

                    ②位移  transform:translate:(水平位移，垂直位移);   如：transform:translate(-50%,-50%);

                         （如果只写一个值 水平移动    百分比 ：相对于自身移动）

                    ③旋转  transform:rotate(-945deg);

                          （正值：顺时针    负值：逆时针）

            （14）3D变换和动画  （略）

            （15）多列分布
            -webkit-column-count:3;           //分几列
            -webkit-column-rule:1px dashed red;    //分割线
            -webkit-column-gap:60px;        //设置列间距
            -webkit-column-width: 400px;   //列宽度

            -webkit-column-span: all;          //设置跨列

            （16）伸缩布局（下面两个都要加）
                    display: flex;    /* 设置伸缩布局*/（必须先写上这个）

                    flex-direction: row;  /* 设置主轴方向*/

                  （主轴方向：row 水平  row-reverse 水平翻转  column  垂直 column-reverse）

            （17）主轴和侧轴对齐方式和flex伸缩比例
                    主轴对齐方式：
                        justify-content: flex-start;  //从主轴开始的方向对齐
                        justify-content: flex-end;   //从主轴结束的方向对齐
                        justify-content: center;      //居中对齐
                        justify-content: space-around;  //在父盒子中平分
                        justify-content: space-between;  //两端对齐 平分
                    侧轴对齐方式：
                        align-items:flex-start;
                        align-items:flex-end;
                        align-items:center;
                        align-items:baseline;  //基线 默认同flex-start
                        align-items:stretch;    //拉伸
                    flex伸缩比例：

                        flex: 2; （共10份）

             （18）拖拽

                ① 一个盒子拖拽     
                注意：首先要为被拖拽的盒子加 draggable="true"
                    <div class="box"  draggable="true"></div>
                    <script>
                        var box=document.querySelector('.box');
            //        拖拽开始
                        box. ondragstart=function(){
                        }
            //      拖拽结束
                        box. ondragend=function(){
                        }
            //        拖拽离开 :鼠标拖拽时离开被拖拽的元素是触发
                        box. ondragleave=function(){
                        }
            //      拖拽中
                        box. ondrag=function(){

                        }

                 ②一个盒子拖拽到另一个盒子上面
                        <div class="one" draggable="true"></div>
                        <div class="two"></div>
                        <script>
                        //目标元素的拖拽事件
                        var two=document.querySelector('.two');
                    // 当被拖拽元素进入是触发
                        two.ondragenter=function(){
                            console.log('来了...');
                        }
                    // 当被拖拽元素离开时触发
                        two.ondragleave=function(){
                            console.log('走了...');
                        }
                //      当 拖拽元素在 目标元素上是 连续触发
                        two.ondragover=function(e){
                    //  阻止拖拽事件的默认行为；
                            e.preventDefault();
                            console.log('over...');
                        }
            //        当在目标元素上松开鼠标是触发
                        two.ondrop=function(){
                            console.log("松开鼠标了...");
                        }

                </script>

            （19）本地存储
                     sessionStorage  session（会话，会议） 5M  当窗口关闭是数据销毁  内存
                     localStorage    20M 永久生效 ，除非手动删除  清理垃圾  硬盘上
                        window.localStorage.setItem('userName',txt.value); 
                        window.localStorage.getItem('userName');

                        window.localStorage.removeItem('userName');

            （20）网络状态监听
                    window.addEventListener('online',function(){
                       alert('网络连接已建立！');
                    });
                    window.addEventListener('offline',function(){
                        alert('网络连接已断开！');
                    })