zoukankan      html  css  js  c++  java
  • 关于html5新增的功能(百度)

      HTML5包含以下新增和更新功能: 

      1. 新增了一种HTML文档类型:<DOCTYPE html> 
      2. 新增了一些结构化标记的元素(<header>,<nav>,<footer>,<section>等) 
      3. 向后兼容的HTML和XHTML分析规则 
      4. 新增了用于多媒体内容的<audio>和<vidio>标记元素 
      5. 更多的输入元素类型值,允许本地的日期选择,时间,颜色和数字 
      6. 从HTML中删除了框架frame(但是ifame保留了,对它进行了沙盒sandbox处理) 
      7. 用于二维绘图,媒体播放,媒体类型注册,拖放以及跨文档消息传输的API 
      8. 用于实现脱机浏览的Web应用程序缓存

    一、绘画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颜色的选择

  • 相关阅读:
    sabaki and leelazero
    apply current folder view to all folders
    string operation in powershell
    wirte function in powershell
    add environment path to powershell
    Module in powershell
    sql prompt
    vmware中鼠标在部分区域不能使用
    调整多个控件的dock的顺序
    行为型模型 策略模式
  • 原文地址:https://www.cnblogs.com/DebbieBlog/p/5843483.html
Copyright © 2011-2022 走看看