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. Django教程

    开发环境:Centos7,Django 1.10,Python 2.7 Django入门 本教程内容大部分来源于Django官网,有翻译不到位的欢迎大家指正,这部分的内容有助于新手快速搭建一个网站,让 ...

  2. php返回json,xml,JSONP等格式的数据

    php返回json,xml,JSONP等格式的数据 返回json数据: header('Content-Type:application/json; charset=utf-8'); $arr = a ...

  3. python学习-day12：列表、元祖、字典介绍和内置

    list:列表 >>>----可以被修改.修改成元素,元素可以使单独的数字,也可以是:新的list. 通过:链表..每个元素存储的时候,同时会指向下一个元素. 二.list编辑修改方 ...

  4. WEB-INF目录下的文件访问权限(待解决)

    对于Tomcat服务器而言,WEB-INF目录下的文件是不能通过在浏览器中直接输入地址的方式来访问. 原因:还不清楚

  5. RMAN_学习笔记3_RMAN Catalog恢复目录

    2014-12-23 Created By BaoXinjian

  6. ADF_Database Develop系列1_设计数据库表之Diagram/Tables/View/Sequence

    2013-05-01 Created By BaoXinjian

  7. metaspace之三--Metaspace解密

    概述 metaspace,顾名思义,元数据空间,专门用来存元数据的,它是jdk8里特有的数据结构用来替代perm,这块空间很有自己的特点,前段时间公司这块的问题太多了,主要是因为升级了中间件所致,看到 ...

  8. Haproxy+asp.net +RedisSessionStateProvider 完美实现负载均衡，并且session保持

    .net framework 4.5下测试成功,使用RedisSessionStateProvider 2.2.1保持session数据,通过Haproxy保持会话数据.首先在PM下安装RedisSe ...

  9. .bashrc文件是干什么的(转)

    使用man bash命令查看到的联机帮助文件中的相关解释如下:.bashrc - The individual per-interactive-shell startup file. 这个文件主要保存 ...

  10. C#编写的通过汉字得到拼音和五笔码

    public static class SpellAndWbConfig { #region 变量声明 // XML文件读取实例 /// <summary> /// XML文件读取实例 / ...