HTML5基础总结

HTML5是HTML语言的第五次重大版本升级,新增了如下内容:
1.新增<video>、<audio>标签在页面上直接播放多媒体资源;
2.新增<input>标签的type属性的可选值，即新的表单控件,如日期标签,数字标签,邮箱地址标签等;
3.新增<input>标签的属性，支持自动获得焦点以及数据有效性检查;
4.对文件上传进行了增强，可以一次选中多个文件，可以指定上传文件的类型，可以在页面读取要上传的文件的内容;
5.新增元素的拖放效果;
6.新增画图功能;
7.新增本地存储功能：window.localStorage.

一.播放多媒体资源(音视频)

<video controls='controls' autoplay='autoplay' style='height:100%;width:100%;'>

    <source src='01.mp4'/>

</video>

<audio controls='controls' autoplay='autoplay'>

    <source src="02.mp3" type=""/>

</audio>

二.新的表单控件

<form>

    date:<input type='date' name='date'/>  <br/>

    time:<input type='time' name='time'/>  <br/>

    number:<input type='number' name='number'/>  <br/>

    range:<input type='range' name='range' min='1' max='5'/>  <br/>

    search:<input type='search' name='search'/>  <br/>

    color:<input type='color' name='color'/>  <br/>

    <!--以下标签浏览器可能不支持-->

    email:<input type='email' name='email'/>  <br/>

    url:<input type='url' name='url'/>  <br/>

    datetime:<input type='datetime' name='datetime'/>  <br/>

    <input type='submit' value='提交'/>

</form>

三.新的标签属性(placeholder,required,pattern,autofocus,form)

form id='form1'>

    <!--提示，必填，正则格式-->

    <input type='text' name='xx'

           placeholder='请输入数字'

           required='required'

           pattern='[0-9]*'

           autofocus='autofocus'

           form='form1'

    />

    <br/>

    <input type="submit" name="sub" value='提交'>

</form>

四.文件上传功能增强(支持多个文件,本地读取文件)

<body>

    <input type='file' name='fileList' id='fileList' multiple="multiple" accept="image/*"/>

    <ul id='imgUl'></ul>

    <div id='imgDiv'></div>

</body>

可进行文件信息的读取和文件的本地预览

 script type='text/javascript'>

     window.onload=function(){

         document.getElementById("fileList").onchange=function(){

             var fileList = this.files;

             for(var i=0;i<fileList.length;i++){

                 var file = fileList.item(i);

                 //显示文件信息（文件名，大小，文件类型）

                 /*

                 var ul=document.getElementById("imgUl");

                 var li=document.createElement("li");

                 li.innerHTML=file.name+" 大小：" + file.size + " 类型：" + file.type;

                 ul.appendChild(li);

                 */

                 //客户端文件预览(如图片预览)

                 var fileReader=new FileReader();

                 fileReader.onload=function(){

                     var div=document.getElementById("imgDiv");

                     var img=document.createElement("img");

                     img.src=this.result;    //result为读取到的base64编码数据

                     div.appendChild(img);

                 };

                 //fileReader.readAsText(file);

                 fileReader.readAsDataURL(file);  //读取文件内容作为Base64数据

             }

         };

     }

 </script>

五.元素拖放效果

<body>

    <div id="div01" style="height:100px;width:100px;background-color:blue;" draggable=true >aaa</div>

    <div id="div02" style="height:200px;width:200px;background-color:green;">bbb</div>

</body>

拖放元素处理过程:开始拖拽->退拽移动->放置

 <script type="text/javascript">

     window.onload=function(){

         //开始拖拽元素

         document.getElementById("div01").ondragstart=function(){

             var id=this.getAttribute("id");

             event.dataTransfer.setData("id",id);  //传递数据

         };

         //取消默认事件，设置元素可放置

         document.getElementById("div02").ondragover=function(){

             return false;

         };

         //放置事件触发，代码处理放置过程

         document.getElementById("div02").ondrop=function(){

             var id=event.dataTransfer.getData("id");   //取数据

             var dragElement=document.getElementById(id);

             this.appendChild(dragElement);

         };

     }

 </script>

六.绘图功能

Canvas绘图.

七.本地存储window.localStorage

 <script type="text/javascript">

     //存数据

     window.localStorage.name="wumiao";

     window.localStorage.age="18";

     //取数据

     alert(window.localStorage.name);

     alert(window.localStorage.age);

 </script>

巴特西

HTML5基础总结

最新文章

热门文章