HTML5的新增功能有哪些?

  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颜色的选择

    

时间: 2024-10-13 06:45:56

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

HTML5的新增功能

下面是介绍的HTML5的新功能: HTML5是HTML4的升级版本,相比于后者,HTML5增加了Web网页的表现力,同时也增加了表单.本地数据等全新功能,对于我们网站的建设是一个全新的体验,也是一个机遇,因为HTML5里面众多功能的创新以及改革对于我们未来网站建设是一个很好的指引. 一 HTML5出现了新的 <canvas>标记 Flash各位站长都知道,这是一个让大家很头疼的东西,有些站长为了使自己的画面更加华丽动感,所以就 在首页中加载了各种各样的Flash视频,这样一来,网页效果虽然得到

html5中新增的form表单属性

html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属性值,当设置为on时,启动该功能:当设置off时,关闭该功能.启用该功能后,当用户在自动完成域开始输入时,浏览器就会在该域中显示填写的选项.用户每提交一次,就会增加一个用于选择的选项 <!DOCTYPE html> <html> <head lang="en"

HTML5 INPUT新增属性

HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证.input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅.我们先看下input新增了的属性:新增属性一:autoconmpleteautoconmplete可以赋值为 on 或者 off.当为 on的时候,浏览器能自动存储用户输入的内容.当用户返回到曾经填写过值的页面的时候,浏览器能把用户写过的值自动填写在相应的input框里.现在很多网站都实现了这个功能,不过基本都

HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理。

一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.time.mark.section.header.footer.hgroup.progress.figure.figcaption.nav.meter.output.details.summary.ruby和main   三.让IE5.5~9支持HTML5新标签 1. IE5.5~8下对于不支持的标签

html5的新增的标签和废除的标签

新增的结构标签 section元素 表示页面中的一个内容区块,比如章节.页眉.页脚或页面的其他部分.可以和h1. h2……等元素结合起来使用,表示文档结构.例:HTML5中<section>……</section>;HTML4中<div> ……</div>. article元素 表示页面中一块与上下文不相关的独立内容.比如一篇文章. aside元素 表示article元素内容之外的.与article元素内容相关的辅助信息. header元素 表示页面中一个内

PHP5.2至5.6的新增功能详解

截至目前(2014.2), PHP 的最新稳定版本是 PHP5.5, 但有差不多一半的用户仍在使用已经不在维护 [注] 的 PHP5.2, 其余的一半用户在使用 PHP5.3 [注].因为 PHP 那"集百家之长"的蛋疼语法,加上社区氛围不好,很多人对新版本,新特征并无兴趣.本文将会介绍自 PHP5.2 起,直至 PHP5.6 中增加的新特征. PHP5.2 以前:autoload, PDO 和 MySQLi, 类型约束 PHP5.2:JSON 支持 PHP5.3:弃用的功能,匿名函数

Netbackup 7.6新增功能和优势

  一.新增功能 1.1NetBackup Accelerator(适用于 VMware) 此功能使用 Accelerator 技术加快虚拟化备份速度,在完成增量备份期间还提供完全备份映像.借助 VMware 更改数据块跟踪 (CBT) 和 NetBackup Accelerator,仅将发生变化的数据块从客户端传输至介质服务器. ·       备份速度增加高达 35 倍,可以更好地满足服务级别协议要求而不影响恢复 ·       减少了数据传输量,因此缓解了基础架构承受的压力 1.2NetB

ADO.NET 中的新增功能

ADO.NET 中的新增功能: .NET Framework (current version) 以下是 .NET Framework 4.5 中 ADO.NET 的新增功能. SqlClient Data Provider 以下是 .NET Framework 4.5 中用于 SQL Server 的 .NET Framework 数据提供程序的新增功能: ConnectRetryCount 和 ConnectRetryInterval 连接字符串关键字 (ConnectionString)

入门讲解HTML5的画布功能(1)

个人认为在HTML5中画布功能其实并不实用,当然趋势是在FLASH不没落的情况下.通过学习我发现画布功能能够实现的东西非常有情调,但是前端人员也要有一定的审美和构思才能做出有意思的东西,因为canvas能提供的东西实在太少了. 当然在苹果抵制Flash的前提下,Flash的前景并不光明,这也给了我们前端人员更多的负担和机会.因为在这一块UI是没有我们对于HTML5来的熟悉的.下面就是我对HTML5学习过后的一个总结. first part 首先,虽然口口声声是HTML5的内容,但是由于canva