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基础总结的更多相关文章

  1. html5基础的常用的技巧

    html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...

  2. HTML5基础知识及相关笔记

    HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的 ...

  3. html5 基础入门

    html5 基础入门 前言介绍 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML工作团队. 如果从狭 ...

  4. HTML5 基础测试题

          HTML5 基础测试题 1.HTML5 之前的 HTML 版本是什么?() A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 2.HTML5 的正确 d ...

  5. HTML5基础——笔记

    HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...

  6. html5基础知识点

    1.WEB基础知识 1.WEB 与 Internet 1.Internet 互联网 若干台计算机 通过 网线 所连接而成的物理设备 主要服务: 1.Telnet 2.Email 3.WWW(Word ...

  7. html5基础知识

    html5+css3 html5定义很多简便东西和宽松语法:     文档头:         <!doctype html>     文档编码:         <meta cha ...

  8. HTML5 基础

    1.HTML5 简介 HTML5 是最新的 HTML 标准,他是万维网的核心语言.标准通用标记语言下的一个应用“超文本标记语言”. HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第 ...

  9. HTML5基础学习

    分享一下html5的一些基础,小白上路! 一.html5基本结构 <!DOCTYPE html> ↑声明文档类型为HTML5文件. 文档声明,在HTML文档必不可少.且必须放在文档第一行 ...

  10. HTML5基础-新增标签+新增属性+布局案例

    html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figca ...

随机推荐

  1. 一些java方法，一些感想

    String.valueof(),string,toString; 都是转化为字符串,如果为null的话用tostring会报空指针异常,String的效率最高,string.valuof效果最好. ...

  2. Android Listview 性能优化

    首先我一般使用的适配器是BaseAdapter,其中有两个方法最主要,分别是: getCount,getView, 在对Listview 进行优化的时候,首先使用 convertview 和viewH ...

  3. 关于 MaxScript 获取所有贴图

    相关内容记录在官方文档 BitmapTexture : TextureMap 中 fn allUsedMaps = ( sceneMaps = usedMaps() for m in meditmat ...

  4. JSBinding / About 2048 sample

    2048 Source 2048 source code is here: https://github.com/gabrielecirulli/2048 Play here!http://gabri ...

  5. ASP.NET同页面内【用户控件与父页面】以及【用户控件与用户控件】之间方法调用

    在用户控件中,获取父页面的方法 1:方法没有参数(userInfor()) string userInfor = Convert.ToString(this.Page.GetType().GetMet ...

  6. [转] Makefile经典教程(掌握这些足够)

    目录(?)[-] Makefile 介绍 1 Makefile的规则 2 一个示例 3 make是如何工作的 4 makefile中使用变量 5 让make自动推导 6 另类风格的makefile 7 ...

  7. [Spring MVC] - Annotation验证

    使用Spring MVC的Annotation验证可以直接对view model的简单数据验证,注意,这里是简单的,如果model的数据验证需要有一些比较复杂的业务逻辑性在里头,只是使用annotat ...

  8. IOS开发-第三方SDWebImage下载网络图片的使用

    从网络上请求图片时,没有使用第三方的话,下载会很慢,而且堵塞线程,还要自己处理多线程问题,效果还非常不明显,使用了SDWebImage这个第三方类库之后,下载图片就变的容易多了. SDWebImage ...

  9. 黄聪：Access-Control-Allow-Origin，JS跨域解决办法

    .htaccess添加下面代码: <IfModule mod_headers.c> Header add Access-Control-Allow-Origin "*" ...

  10. Spark RDD类源码阅读

    每天进步一点点~开搞~ abstract class RDD[T: ClassTag]( //@transient 注解表示将字段标记为瞬态的 @transient private var _sc: ...