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>
时间： 2024-10-28 15:12:12