HTML5基础总结

Posted Hello World!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于HTML5基础总结的主要内容,如果未能解决你的问题,请参考以下文章

HTML5基础总结

VsCode 代码片段-提升研发效率

HTML5新增相关标签的和属性

对于HTML5与CSS3基础教程的总结

HTML5期末大作业:餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段

如何获取 HTML5 视频中加载的当前片段百分比?