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. HumanNet v2:用于疾病研究的人类基因网络 X科研网

    HumanNet v2:用于疾病研究的人类基因网络人类基因网络已被证明在疾病研究的许多方面都很有用,已经开发了许多基于网络的策略来产生关于基因 - 疾病 - 药物关联的假设.预测和组织与特定疾病最相关 ...

  2. vi快捷操作

    全部删除: 按esc键后,先按gg(到达顶部),然后dG 全部复制: 按esc键后,先按gg,然后ggyG 全选高亮显示: 按esc键后,先按gg,然后ggvG或者ggVG 单行复制: 按esc键后, ...

  3. Vue学习笔记【29】——Vue路由(命名视图实现经典布局)

    命名视图实现经典布局 标签代码结构:  <div id="app">    <router-view></router-view>    < ...

  4. 微信jssdk安卓机分享QQ好友和QQ空间出现{"errMsg":"shareQQ:fail"}

    使用ajax请求appid之类的配置,然后进行wx.config和wx.ready,苹果机上是完全OK的,但是安卓机上十次有九次是失败,只有一次能成功,百度了一下,有人说是参数有空格,有人说是微信bu ...

  5. 一些idea

    二分答案似乎和最小生成树有着不可描述的奇怪关系.(滑稽 联赛级别的在矩形上乱搞的题无非几个思路(按出现概率排序):建图,二维前缀和,dp 涉及到求合法区间数的问题往往要用到桶.等差数列等思想,或者尝试 ...

  6. js 对象浅拷贝和深拷贝

    var model={name:"boy",age:13}; var CopyModel=model; console.log(CopyModel.name); model.nam ...

  7. 78、tensorflow滑动平均模型,用来更新迭代的衰减系数

    ''' Created on 2017年4月21日 @author: weizhen ''' #4.滑动平均模型 import tensorflow as tf #定义一个变量用于计算滑动平均,这个变 ...

  8. JS - 计算两个数组的交集、差集、并集、补集(多种实现方式)

    方法一:最普遍的做法 使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本.也不用引入其他第三方库. 1,直接使用 filter.concat 来计算 var ...

  9. asp.net 随笔

    20190625 网站发布后,添加文件,必须重启iis的应用程序池和网站才能使用添加的文件.

  10. sqlserver定时作业,定时执行存储过程

    首先,我想说,我真的是渣了,一个这个玩意弄了半天,算了,直接切入正题吧. 第一步: 先写好存储过程 用了两张表,你们自己建立吧 <br data-filtered="filtered& ...