HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

新的功能:

1、用于绘画的 canvas 元素

2、用于媒介回放的 video 和 audio 元素

3、对本地离线存储的更好的支持

4、语意化更好的内容元素,比如 article、footer、header、nav、section

5、新的表单控件,比如 calendar、date、time、email、url、search

一、绘画canvas元素

  <canvas>定义图形,绘制路径,矩形,圆形,字符以及添加图像的方法 。

  首先创建canvas元素,并规定元素的id、宽度和高度撒的:

      <canvas id="myCanvas" width="200" height="100"></canvas>
 然后通过javas来绘制。Canvas元素本身没有绘图能力,所有的绘制工作必须在javascript内部完成渐变。
      <script type="text/javascript">
          var c=document.getElementById("myCanvas");
          var cxt=c.getContext("2d");
          cxt.fillStyle="#FF0000";
          cxt.fillRect(0,0,150,75);
      </script>

  JavaScript 使用 id 来寻找 canvas 元素:

      var c=document.getElementById("myCanvas");

  然后,创建 context 对象:

      var cxt=c.getContext("2d"); 

  getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

  下面的两行代码绘制一个红色的矩形:

      cxt.fillStyle="#FF0000";
      cxt.fillRect(0,0,150,75);

  fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

  下面的两行代码绘制一条直线:

      cxt.moveTo(100,100);

      cxt.lineTo(200,200);

  下面的一行代码是画一个圆:

      cxt.arc(70,18,15,0,Math.PI*2,false);

  这些属性值分别对应的是什么,70,18分别是X轴和Y轴,15是这个圆的半径,0是角度,Math.PI*2是圆周率,false代表顺时针而true是逆时针。

  颜色的渐变效果也是可以实现的:

    <script type="text/javascript">

        var c=document.getElementById("myCanvas");

        var cxt=c.getContext("2d");

        var grd=cxt.createLinearGradient(0,0,175,50);

        grd.addColorStop(0,"#FF0000");

        grd.addColorStop(1,"#00FF00");

        cxt.fillStyle=grd;

        cxt.fillRect(0,0,175,50);

     </script>

  还有一些其他效果:

     曲线quadraticCurreTo

    字体fillText

二、音频audio和视频video

  Video也支持多个source元素,链接到不同的视频文件,浏览器将使用第一个可识别的格式
  属性值:
    autoplay=”autoplay”就绪后马上播放
    loop=“loop”播放完再次播放

    preload="预加载"

    muted="静音"

    volume-=0.1音量减

    volume+=0.1音量加

    currentTime+=10 快进10秒

    currentTime-=10 快退10秒

    playbackRate=1  加速播放 (默认的播放速度)

  audio的属性值和video的一样

三、存储

  HTML5 提供了两种在客户端存储数据的新方法:

    localStorage - 没有时间限制的数据存储

    localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

    sessionStorage - 针对一个 session 的数据存储

    sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

四、语意化标签

  <article>标签定义外部的内容(结构元素)
  <aside>定义页面内容之外的内容。 aside的内容与article的内容相关。(结构元素)
  <figure>定义一组媒介内容的分组,以及它们的标题。(结构元素)
  <section>标签定义文档中的节(section,区段)。比如章节,页眉,页脚或文档中的其他部分(结构元素)

五、新的表单类型

  1、email   

    email 类型用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值。

    E-mail: <input type="email" name="user_email" />

  2、url

    url 类型用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。

    Homepage: <input type="url" name="user_url" />

  3、number

    number 类型用于应该包含数值的输入域。还能够设定对所接受的数字的限定:

    Points: <input type="number" name="points" min="1" max="10" />

  4、range

    range 类型用于应该包含一定范围内数字值的输入域。

    range 类型显示为滑动条。还能够设定对所接受的数字的限定:

    <input type="range" name="points" min="1" max="10" />

  5、Date pickers (date, month, week, time, datetime, datetime-local)

    HTML5 拥有多个可供选取日期和时间的新输入类型

    Date: <input type="date" name="user_date" />

  6、search

    search 类型用于搜索域,比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

  7、color颜色的选择

    

HTML5的新增功能有哪些?的更多相关文章

  1. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  2. HTML5 INPUT新增属性

    HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证.input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅.我们先看下i ...

  3. THML5新增功能

    HTML5新增功能 1.语义化标记: 1)article:article标签装载显示一个独立的文章内容.例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等 artilce可以嵌套 ...

  4. ADO.NET 中的新增功能

    ADO.NET 中的新增功能: .NET Framework (current version) 以下是 .NET Framework 4.5 中 ADO.NET 的新增功能. SqlClient D ...

  5. .NET Framework3.0/3.5/4.0/4.5新增功能摘要

    Microsoft .NET Framework 3.0 .NET Framework 3.0 中增加了不少新功能,例如: Windows Workflow Foundation (WF) Windo ...

  6. 与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能

    [源码下载] 与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能 作者:webabcd 介绍与众不同 windows ...

  7. PHP V5.2 中的新增功能,第 1 部分: 使用新的内存管理器

    PHP V5.2:开始 2006 年 11 月发布了 PHP V5.2,它包括许多新增功能和错误修正.它废止了 5.1 版并被推荐给所有 PHP V5 用户进行升级.我最喜欢的实验室环境 —— Win ...

  8. WPF4.5 中的新增功能和增强功能的信息

    本主题包含有关 Windows Presentation Foundation (WPF) 版本 4.5 中的新增功能和增强功能的信息. 本主题包含以下各节: 功能区控件 改善性能,当显示大时设置分组 ...

  9. .NET Framework 4.5、4.5.1 和 4.5.2 中的新增功能

    .NET Framework 4.5.4.5.1 和 4.5.2 中的新增功能 https://msdn.microsoft.com/zh-cn/library/ms171868.aspx

随机推荐

  1. sql的分页

    public static string GetPageSql(string sql, int start, int end)        {            return string.Fo ...

  2. UNP学习 路由套接口

    一.概述 在路由套接口中支持三种类型的操作: 1.进程能通过写路由套接口想内核发消息.举例:路径就是这样增加和删除的. 2.进程能在路由套接口上从内核读消息. 3.进程可以用sysctl函数得到路由表 ...

  3. 探索Redis设计与实现1:Redis 的基础数据结构概览

    本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...

  4. gdb流程控制(例: 循环打印数组)

    参考:https://blog.csdn.net/justlinux2010/article/details/9453151 循环/条件 在gdb的脚本中循环遍历整个哈希表,并且加上判断条件来进行统计 ...

  5. Mac Office2016 安装及破解

    一.安装包下载地址 http://officecdn.microsoft.com/sg/C1297A47-86C4-4C1F-97FA-950631F94777/OfficeMac/Microsoft ...

  6. 三.通过jenkins对系统的监控(2)

    在这记录下,通过HTTP Request Plugin监控系统的异常.和上一篇原理差不多. 1.首先需要安装HTTP Request Plugin.插件安装好后,在系统设置下面会新增如下配置: 具体有 ...

  7. 53、tensorflow基本操作

    import tensorflow as tf import numpy as np x_data = np.float32(np.random.rand(2,100)) print(x_data) ...

  8. layui.form小例子

    layui.form小例子 需要引入layui的包 <!doctype html> <html> <head> <meta charset="utf ...

  9. spring boot找不到或无法加载主类 io.renren.RenrenApplication

    spring boot找不到或无法加载主类 io.renren.RenrenApplication 出现问题: spring boot 项目以前一直是好好的,用mvn clean package 打包 ...

  10. proc伪文件系统 - 加载一个进程

    内核模块的编译方法及注意事项 Ubuntu内核(2.6.32) 2.6内核中,模块的编译需要配置过的内核源码:编译.链接后生成的内核模块后缀为.ko:编译过程首先会到内核源码目录下读取顶层的Makef ...