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

  • 相关阅读:
    埃拉托色尼的素数查找法的优化问题
    Salesforce开发者学习笔记之三:Salesforce平台架构
    Salesforce开发者学习笔记之二:Salesforce开发平台应用场景
    Salesforce开发者学习笔记之一:基本知识
    Salesforce Apex 使用JSON数据的示例程序
    Salesforce Apex页面中调用远端网络服务
    Salesforce Apex 开发环境设置和Hello World示例
    四、Java 安装
    三、Windows 基础
    二、大数据生态圈尝鲜
  • 原文地址:https://www.cnblogs.com/DebbieBlog/p/5843483.html
Copyright © 2020-2023  润新知