HTML5知识点1

分手后的思念是犯贱 2022-04-12 13:44 174阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>demo5</title>
      
    <style type="text/css">
        a{
            color: red;  
            text-decoration: none;
            border-bottom: 5px potted red;
        }
        a:visited{
            color: blue;  
            text-decoration: underline;
        }
        a:hover{
            color: yellow;  
            text-decoration: none;
            padding-bottom: 15px;
            background: url(MySource/images/Card/Plants/BoomWallNut.png) bottom repeat-x;
        }
    
        </style>
    
    </head>
        <body>
        
        <img width="1024" align="left" src="MySource/dog.jpg"> 
        
            
        <img style="vertical-align: middle"  src="MySource/dog.jpg" hspace="30" vspace="30" border="2" > <h4>你好</h4><p></p> 
        
        <hr align="center" width="1024" size="10">
            
            
        <a href="demo4.html">demo4.html</a>
        <a href="mailto:1984852655@qq.com?subject=联系我;body=告诉我">告诉我</a>
            
            
            
        <a href="#概述">概述</a>
        <h1><a id="概述">概述</a></h1>
            
            
            <img src="MySource/images/Card/Plants/BoomWallNut.png" usemap="#Map">
            <map name="Map">
              <area shape="rect" coords="16,266,108,349" href="demo4.html">
            </map>
            
                <form action="demo4.html"
                  method="post"   
                  name="some"
                      id="some1"
                  enctype="text/plain"
                  target="_blank"
                  novalidate
                  >
            
            <fieldset>
            
            <legend>测试</legend>
            <input type="text" value="niaho" size="20" maxlength="20" name="y">
            <input type="password" value="niaho" size="20" maxlength="20" name="x"><br>
            <input type="checkbox"  name="z" checked="checked">我爱你啊
            <input type="checkbox"  name="z" checked="checked">我不爱你<p></p>
            <input type="radio" name="onechoice" value="2" checked="checked">王源
            <input type="radio" name="onechoice"  value="1">王俊凯         
            <input type="radio" name="onechoice" value="3">千禧<br>
            </fieldset>
                    
            <input type="hidden" name="somehidden" value="some">   
            <input type="submit" value="提交">
            <input type="image" alt="确定" src="Plants/Cabbagepult.png"> 
            <input type="reset" value="复位"><br><br>
            <input type="button" value="运行" onclick="calculate()"><br><br>
            
            <input type="file" name="uploadfile" id="uploadffile" 
                   multiple accept="image/jpeg"/><br><br>  
            
            <textarea name="some" rows="10" cols="50" value="say">请文明用语</textarea><br><br>
            
            谁最好看:
            <select name="谁最好看">
                <optgroup label="Team1">
                    <option>王文萱</option>
                    <option>王文萱</option>
                    <option>王文萱</option>
                </optgroup>
                <optgroup label="Team2">
                    <option>王文萱</option>
                    <option>王文萱</option>
                    <option>王文萱</option>
                </optgroup>
            </select><br><br>
            
            </form>
            
            <input type="url" name="WebURL" id="webu1" value="http://www.naidu.com"><br><br>
            
            <input type="email" name="WebE" id="webe" value="1984852655@qq.com"><br><br>
            
            <input type="range" name="volume" id="volume" min="0" max="100" step="0.2"><br><br>
            
            <output name="x"></output><br><br>
            
            <input type="number" name="volum" id="volum" min="0" max="100" step="0.2"><br><br>
            
            <input type="tel" name="WebT" id="webt" value="18242027035" invalid="invalidHandler()"><br><br>
            
            <input type="search" name="WebS" id="webs" value="王文萱"><br><br>
            
            <input type="color" name="WebC" id="webc" ><br><br>
            
            <input type="date" name="WebD" id="webd"><br><br>
            
            
            
            <datalist id="emaillist">
                <option value="1984852655@qq.com">1984852655@qq.com</option>
                <option value="1984852656@qq.com">1984852656@qq.com</option>
            </datalist>
            
            <keygen name="security"/>
            
            <input type="text" size="20" maxlength="20" form="some1" placeholder="请输入信息"
                    autofocus autocomplete="on" list="emaillist" required pattern="[0-9]{6}"
                   ><br><br>
            <script type="text/javascript">
                var vali=document.getElementById("some1").validity; //返回ValidityState对象
                var vailii=document.getElementById("some1").willValidity; //表示表单是否需要验证
                var vailiil=document.getElementById("some1").validationMessage; //获取错误提示信息
                //ValidityState对象属性
                //valueMissing   typeMismatch   patternMismatch  tooLong  rangeUnderflow
                //rangeOverflow  stepMismatch   customError 使用自己定义的验证错误信息  true 自定义
                //checkValiity验证函数
                
                function CheckForm(frm){
                    if(frm.webd.checkValidity()){    //checkValiity验证函数
                        alert("点子邮件正确");
                }
                }
            
            </script>
            
            <script type="text/javascript">
                //setCustomValitity修改错误提示信息    }
                 //invalid事件，有元素没有通过验证时触发
                 //监听invalid事件,上面
            window.onload=function(){
                var register=document.getElementById("register");
                register.addEventListener("invalid",invalidHandler,true);
                document.getElementById("cage").setCustomValidity("年龄不符合规定");
            }
            function addError(err){
                document.getElementById("error".innerHTML)="*"+err+"<br/>";
            }
            function clearError(){
                document.getElementById("error").innerHTML="";
            }
            function invalidHandler(evt){
                var validity=evt.srcElement.validity;
                var src="";
                if(validity.customError){
                    str=evt.srcElement.validationMessage;
                }else{
                    
                    if(validity.valueMissing){
                        str+="不能为空"
                    }
                }
                addError(str);
                evt.stopPropagation();
                evt.preventDefault();
            }
        </script>
            
            
            <br><br><br><br>
            <audio src="MySource/horse.mp3">
            
            
            您的浏览器不支持
            </audio>
            <video src="MySource/movie.mp4" preload="auto" >
                
            您的浏览器不支持
            </video>
            <h2><pre>
            接口属性:
            currentSrc得到url地址   videoWidth  videoHeight      currentTime    startTime
            duration   volume    muted是否静音    ended    played:获得TimesRanges对象，包括播放部分的开始结束时间    paused    error错误代码    seeking是否正在请求媒体数据    
            seekable,获取媒体资源已经请求的TimesRanges对象，包括已请求部分的开始结束时间
            networkState,获取媒体资源的加载状态  
            buffered，获取本地缓存的媒体数据的TimesRanges对象
            readyState:当前媒体播放的就绪状态
            playbackRate：获取/设置媒体的播放速率
            defaultPlaybackRate:获取/设置媒体默认的播放速率
            </pre></h2>
            
            
            
            <h2><pre>
            load()加载媒体文件
            play()播放媒体文件
            pause()暂停媒体文件
            canPlayType(type) 测试浏览器是否支持
            </pre></h2>
            
            <h2>
            <pre>
    video audio的接口事件：
            play  
            playing  
            pause执行了pause()触发  
            timeupdate 播放位置被改变时触发  
            ended  
            waiting等待下一帧时
            ratechange 
            volumechange 
            canplay以当前播放速率，需要缓冲触发
            canplaythrough以当前播放速率，不需要缓冲触发
            durationchange
            loadstart  浏览器开始在网上寻找数据
            progress  浏览器正在获取媒体文件
            suspend 浏览器暂停获取，且文件获取并没有正常结束
            abort  中止获取媒体文件，但不是应为错误
            error  获取媒体过程中出错
            emptied  网络变为初始化状态
            stalled  浏览器尝试获取媒体数据时失败
            loadedmetadata 加载玩媒体元数据
            loadeddata  加载完当前位置的媒体播放数据
            seeking 浏览器正在请求数据
            seeked   浏览器停止请求数据
            </pre>
            </h2>
            
            <input type="checkbox" value="王源" draggable="true">王源
            
            <h2>
                <pre>
            鼠标拖动事件：
                 dragstart   drag  dragenter  dragover  dragleave  drop  dragend
                </pre>
                
            </h2>
            
            <h2>
                <pre>
            DataTransfer对象，支持拖拽数据的存储：
              dropEffect设置或获取拖拽操作的类型和要显示的光标类型 none copy  copyLink move
              effectAllowed设置或获取数据传送操作可应用于该对象的源元素
              none copy copyLink copyMove link linkMore move all aninitialized
              types:获取dragStart时间出发时为元素存储数据的格式
              files：获取存储在DataTransfer中正在拖放的文件列表FileList
              clearData（[sDataFormat]）:Text,URL,File,HTML,Image.没有参数清除全部数据
              setData([sDataFormat],[data]):Text,URL
              getData（[sDataFormat]）:Text,URL
              setDataImage（[imgElement],x,y）
              addElement([element])
                </pre>
                
            </h2>
            
            
            <div id="dragSource" draggable="true">拖这里<img src="MySource/images/interface/Almanac_PlantBack.jpg" height="72" width="75"></div>
            <div id="dropTarget"><br><br><br><br><br>
              <br></div>
            <script type="text/javascript">
                function DragStart(){
                    var source=document.getElementById('dragSource');
                    source.addEventListener('dragstart',function(e){
                        //e.target引起时间的对象。innerHTML对应的HTML代码
                        e.dataTransfer.setData('text/plain',e.target.innerHTML);
                        e.dataTransfer.effectAllowed='copy';
                    },false);
                }
                window.addEventListener('load',DragStart,false);
                function DragOver(){
                    var target=document.getElementById('dropTarget');
                    target.addEventListener('dragover',function(e){
                        this.className='dragover';
                        e.preventDefault();
                    },false);
                }
                window.addEventListener('load',DragOver,false)
                function Drop(){
                    var source=document.getElementById('dropTarget');
                    source.addEventListener('drop',function(e){
                        var data=e.dataTransfer.getData('text/plain');
                        this.innerHTML+=data;
                        e.dataTransfer.dropEffect="copy";
                        this.className="";
                    },false);
                }
                window.addEventListener('load',Drop,false);
            </script>
            
            
            
            <form action="" method="post">
            <input type="file" name="uploadfile" id="files" 
                   multiple accept="image/*"/>
            <input type="button" value="显示" onClick="showFiles()"/></form>
            <div id="msg"></div>
            <script>
            function showFiles(){
                var filelist=document.getElementById("files").files;
                var msg=document.getElementById("msg");
                for(var i=0;i<filelist.length;i++){
                    msg.innerHTML+=filelist[i].name+"<br/>";
                    msg.innerHTML+="文件长度"+filelist[i].size+"<br/>";
                    msg.innerHTML+="文件类型"+filelist[i].type+"<br/>"+"<br/>";
                }
            }
            </script>
            
            
            <script type="text/javascript">
                if(typeof FileReader == "undefined"){
                    alert("浏览器未实现FileReder接口")
                }else{
                    var flie=new FileReader();
                }
            </script>
            
            <h2><pre>
            readyState  文件状态 
            1.EMPTY没有读取   
            2.LOADUING正在读取   
            3.DONE读取完毕
            error  读取过程中的错误  
            1.NotFoundError  
            2.SecurityError安全错误
            3.NotReadableError无法读取
            4.EncodingError编码限制，通常是数据的URL表示的网址长度限制
            
            
            </pre>
            
            </h2>
            
            <h2><pre>
            1.readAsArrayBuffer(Blob);文件读取为数组缓冲区
            2.readAsBinaryString（Blob）;读取为二进制字符串
            3.readAsText(blob,encoding) 默认UTF-8,读取为文本
            4.readAsDataURL(blob) 读取为DataURL字符串,好像是图像欸
            5.abort（）中断读取
            </pre>
            
            </h2>
            
            <h2><pre>
            
            1.loadstart开始
            2.progress正在读取
            3.load成功完成数据读取
            4.abort中断
            5.error错误
            6.loadend结束读取，可能成功可能失败
            </pre>
            
            </h2>
            
            <form action="" method="post">
            <input type="file" multiple id="MyFiles"/>
            <input type="button" value="读取为二进制字符串" onclick="ReadAs('BinaryString')"/>
            <input type="button" value="读取为数组缓冲" onclick="ReadAs('ArrayBuffer')"/>
            <input type="button" value="读取为文本" onclick="ReadAs('Text')"/>
            <input type="button" value="读取为图像" onclick="ReadAs('DataURL')"/>
            <div id="message"></div>
            </form>
            <script type="text/javascript">
                function ReadAs(action){
                    var blob=document.getElementById("MyFiles").files[0];
                    
                    if(blob){
                        
                        var reader=new FileReader();
                        switch(action.toLowerCase()){
                            case "binarystring":
                                reader.readAsBinaryString(blob);
                                break;
                            case "text":
                                reader.readAsText(blob);
                                break;
                            case "dataurl":
                                reader.readAsDataURL(blob);
                                break;
                            case "arraybuffer":
                                reader.readAsArrayBuffer(blob);
                                break;
                
                   }
                    }
                    reader.onload=function(e){
                        var result=this.result;
                        if(/image\/\w+/.test(blob.type)&&action.toLowerCase()=="dataurl"){
                           document.getElementById("message").innerHTML="<img src'"+result+"'/>"
                         }else{
                           document.getElementById("message").innerHTML=result;
                           }
                    }
                }
            </script>
            
            <form action="" method="post">
                <input type="file" multiple id="My">
                <input type="button" value="读取文件" onclick="FileReaderEvent()">
                
                <div id="me"><br/><br/><br/><br/></div>
            </form>
            <script type="text/javascript">
                  function FileReaderEvent(){
                    var blob=document.getElementById("My").files[0];
                    var message=document.getElementById("me");
                    var reader=new FileReader();
                    
                    reader.onload=function(e){
                        message.innerHTML+="Event:load;<br/>";
                    }
                    reader.onloadstart=function(e){
                        message.innerHTML+="Event:loadstart;<br/>";
                    }
                    reader.onloadend=function(e){
                        message.innerHTML+="Event:loadend;<br/>";
                    }
                    reader.onerror=function(e){
                        message.innerHTML+="Event:error;<br/>";
                    }
                    reader.onabort=function(e){
                        message.innerHTML+="Event:loadabort;<br/>";
                    }
                    reader.onprogress=function(e){
                        message.innerHTML+="Event:progress;<br/>";
                    }
                    reader.onload=function(e){
                        message.innerHTML+="Event:load;<br/>";
                    }
                 
                       reader.readAsDataURL(blob);
                }
            </script>
            
            <div>
            把图片拖进下面的方框
            </div>
            <div id="droTarget"><br><br><br><br><br><br><br><br><br><br><br></div>
            <script type="text/javascript">
              var target;
                function dropHandle(e){
                    var fileList=e.getDataTransfer.files;
                    var fileType;
                    for(var i=0;i<fileList.length;i++){
                        /*fileType=fileList[i].type;
                        if(fileType.indexOf('image')==-1){
                            alert('请拖拽图片')；
                            return；
                        }*/
                        loadImg(fileList[i]);
                    }
                    
                }
                function loadImg(file){
                    var reader=new FileReader();
                    reader.onload=function(e){
                        var oImg=document.createElement('imbjkbg');
                        oImg.src=this.result;
                        target.appendChild(oImg);
                        
                    }
                    reader.readAsDataURL(file);
                }
                window.onload=function(){
                    target=document.getElementById("droTarget");
                    target.addEventListener('dragover',function(e){
                        e.preventDefault();
                    },false);
                    target.addEventListener('drag',dropHandle,false);
                }
            </script>
            
            
    </body>
    </html>