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. 【转载】ANSYS有限元分析中的单位问题

    原文地址:http://www.cnblogs.com/ylhome/archive/2009/02/26/1398756.html ansys中没有单位的概念,只要统一就行了.所以,很多人在使用时, ...

  2. 动态加载、移除、替换JS和CSS

    //动态加载一个js/css文件 function loadjscssfile(filename, filetype) { if (filetype == "js") { var ...

  3. <<google软件测试之道>>读书笔记

    以前一直从开发的角度来看待测试,看完这本书以后感觉错了,难怪之前公司的测试一直搭建不起来 1.开发人员,开发测试人员,测试人员 * 开发人员负责开发 * 开发测试人员近距离接触代码,负责编写测试用例, ...

  4. ios crash 日志分析

    以下内容来自网络 https://coderwall.com/p/ezdcmg/symbolicating-an-ios-crash-log-without-the-original-dsym-fil ...

  5. (C#） 基本概念一览表

    A abstract class An abstract class is a class that must be inherited and have the methods overridden ...

  6. ORACLE随机查询

    1. select * from (select * from tablename order by dbms_random.value) where rownum< N; 注:dbms_ran ...

  7. android.view.WindowLeaked

    08-30 13:17:05.645 25543-25543/com.tongyan.nanjing.subway E/WindowManager: android.view.WindowLeaked ...

  8. 51nod 最近刷题 简要题解

    51nod 1564 由于数据是随机的,可以证明,对于每一个数,向左或右找比它小的数,长度是logn级别的 考虑枚举最大值 注意,对于每一个最大值,如果直接用2个循环枚举左右端点的话,理论是lognl ...

  9. C++模板元编程 - 函数重载决议选择工具（不知道起什么好名）完成

    这个还是基于之前实现的那个MultiState,为了实现三种类型“大类”的函数重载决议:所有整数.所有浮点数.字符串,分别将这三种“大类”的数据分配到对应的Converter上. 为此实现了一些方便的 ...

  10. linux 下的clock_gettime() 获取精确时间函数

    #include <time.h> int clock_gettime(clockid_t clk_id, struct timespec* tp); clock_gettime() 函数 ...