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. Android——使用SQLiteDatabase操作SQLite数据库

    除了可以使用文件或SharedPreferences存储数据,还可以选择使用SQLite数据库存储数据. 在Android平台上,集成了一个嵌入式关系型数据库-SQLite,SQLite3支持 NUL ...

  2. oracle审计详解-转

    http://blog.chinaunix.net/u2/66903/showart_2082884.htmlOracle使用大量不同的审计方法来监控使用何种权限,以及访问哪些对象.审计不会防止使用这 ...

  3. Unity Shader——Writing Surface Shaders(1)——Surface Shader Examples

    这里有Surface Shader的一些例子.下面的这些例子关注使用内建的光照模型:关于如何使用自定义光照模型的例子参见Surface Shader Lighting Examples. 简单 我们将 ...

  4. javascript中的事件委托

    这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...

  5. Tomcat应用中post方式传参数长度限制

    Tomcat应用中post方式传参数长度限制 jsp页面上是没有限制的,但是在tomcat服务器上有限制,Tomcat 默认的post参数的最大大小为2M, 当超过时将会出错,可以配置maxPostS ...

  6. linux删除某个php程序进程的组合命令

    如,想要杀死正在运行的所有  main.php 进程: ps aux |grep main.php|grep -v grep|awk '{print $2}'|xargs kill -9 解析: ps ...

  7. Struts2对Ognl的支持

                                                      Struts2对Ognl的支持 一. 写作背景 由于工作性质的变化,最近一直在研究struts2,从 ...

  8. git branch几个简单操作

    1.git branch  该命令会列出当先项目中的所有分支信息,其中以*开头的表示当前所在的分支.参数-r列出远程仓库中的分支,而-a则远程与本地仓库的全部分支. 2.git branch deve ...

  9. go 的 protoc 插件调用逻辑

    要让protoc使用插件,需要做下面事情: Place the plugin binary somewhere in the PATH and give it the name "proto ...

  10. day6-3面向对象高阶

    面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例(即:对象),实 ...