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>
可进行文件信息的读取和文件的本地预览
1 script type='text/javascript'> 2 window.onload=function(){ 3 document.getElementById("fileList").onchange=function(){ 4 var fileList = this.files; 5 for(var i=0;i<fileList.length;i++){ 6 var file = fileList.item(i); 7 8 //显示文件信息（文件名，大小，文件类型） 9 /* 10 var ul=document.getElementById("imgUl"); 11 var li=document.createElement("li"); 12 li.innerHTML=file.name+" 大小：" + file.size + " 类型：" + file.type; 13 ul.appendChild(li); 14 */ 15 16 //客户端文件预览(如图片预览) 17 var fileReader=new FileReader(); 18 fileReader.onload=function(){ 19 var div=document.getElementById("imgDiv"); 20 var img=document.createElement("img"); 21 img.src=this.result; //result为读取到的base64编码数据 22 div.appendChild(img); 23 }; 24 //fileReader.readAsText(file); 25 fileReader.readAsDataURL(file); //读取文件内容作为Base64数据 26 } 27 28 }; 29 } 30 </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>
拖放元素处理过程:开始拖拽->退拽移动->放置
1 <script type="text/javascript"> 2 window.onload=function(){ 3 //开始拖拽元素 4 document.getElementById("div01").ondragstart=function(){ 5 var id=this.getAttribute("id"); 6 event.dataTransfer.setData("id",id); //传递数据 7 }; 8 //取消默认事件，设置元素可放置 9 document.getElementById("div02").ondragover=function(){ 10 return false; 11 }; 12 //放置事件触发，代码处理放置过程 13 document.getElementById("div02").ondrop=function(){ 14 var id=event.dataTransfer.getData("id"); //取数据 15 var dragElement=document.getElementById(id); 16 this.appendChild(dragElement); 17 }; 18 } 19 </script>
六.绘图功能
Canvas绘图.
七.本地存储window.localStorage
1 <script type="text/javascript"> 2 //存数据 3 window.localStorage.name="wumiao"; 4 window.localStorage.age="18"; 5 6 //取数据 7 alert(window.localStorage.name); 8 alert(window.localStorage.age); 9 </script>
