zoukankan      html  css  js  c++  java
  • Html5学习系列

    Html5学习系列

    HTML5 规定了一种通过 video 元素来包含视频的标准方法

    Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

    MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

    WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

    如需在 HTML5 中显示视频,您所有需要的是:

    <video src="movie.ogg" controls="controls">

    </video>

    control 属性供添加播放、暂停和音量控件。

    HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

    audio 元素能够播放声音文件或者音频流。

    <audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的:

    实例

    <audio src="song.ogg" controls="controls">

    Your browser does not support the audio tag.

    </audio>

    HTML5 拖放实例

    设置元素为可拖放

    首先,为了使元素可拖动,把 draggable 属性设置为 true :

    <img draggable="true" />

    拖动什么 - ondragstart 和 setData()

    然后,规定当元素被拖动时,会发生什么。

    在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

    dataTransfer.setData() 方法设置被拖数据的数据类型和值:

    function drag(ev)

    {

    ev.dataTransfer.setData("Text",ev.target.id);

    }

    在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。

    放到何处 - ondragover

    ondragover 事件规定在何处放置被拖动的数据。

    默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

    这要通过调用 ondragover 事件的 event.preventDefault() 方法:

    event.preventDefault()

    进行放置 - ondrop

    当放置被拖数据时,会发生 drop 事件。

    在上面的例子中,ondrop 属性调用了一个函数,drop(event):

    function drop(ev)

    {

    ev.preventDefault();

    var data=ev.dataTransfer.getData("Text");

    ev.target.appendChild(document.getElementById(data));

    }

    代码解释:

        调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

        通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

        被拖数据是被拖元素的 id ("drag1")

        把被拖元素追加到放置元素(目标元素)中

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像

    创建 Canvas 元素

    向 HTML5 页面添加 canvas 元素。

    规定元素的 id、宽度和高度:

    <canvas id="myCanvas" width="200" height="100"></canvas>

    通过 JavaScript 来绘制

    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>

    <script type="text/javascript">

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

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

    cxt.moveTo(10,10);

    cxt.lineTo(150,50);

    cxt.lineTo(10,50);

    cxt.stroke();

    </script>

    <script type="text/javascript">

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

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

    cxt.fillStyle="#FF0000";

    cxt.beginPath();

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

    cxt.closePath();

    cxt.fill();

    </script>

    把图片放到画布上

    <script type="text/javascript">

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

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

    var img=new Image()

    img.src="flower.png"

    cxt.drawImage(img,0,0);

    </script>

    什么是SVG?

        SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

        SVG 用于定义用于网络的基于矢量的图形

        SVG 使用 XML 格式定义图形

        SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

        SVG 是万维网联盟的标准

    SVG 的优势

    与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

        SVG 图像可通过文本编辑器来创建和修改

        SVG 图像可被搜索、索引、脚本化或压缩

        SVG 是可伸缩的

        SVG 图像可在任何的分辨率下被高质量地打印

        SVG 可在图像质量不下降的情况下被放大

    把 SVG 直接嵌入 HTML 页面

    在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中:

    实例

    <!DOCTYPE html>

    <html>

    <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

      <polygon points="100,10 40,180 190,60 10,60 160,180"

      style="fill:lime;stroke:purple;stroke-5;fill-rule:evenodd;" />

    </svg>

    </body>

    </html>

    Canvas 与 SVG 的比较

    下表列出了 canvas 与 SVG 之间的一些不同之处。

    Canvas

    • 依赖分辨率
    • 不支持事件处理器
    • 弱的文本渲染能力
    • 能够以 .png 或 .jpg 格式保存结果图像
    • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

    SVG

    • 不依赖分辨率
    • 支持事件处理器
    • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
    • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
    • 不适合游戏应用

    HTML5 - 使用地理定位

    请使用 getCurrentPosition() 方法来获得用户的位置。

    下例是一个简单的地理定位实例,可返回用户位置的经度和纬度。

    <!DOCTYPE html>

    <html>

    <body>

    <p id="demo">点击这个按钮,获得您的坐标:</p>

    <button onclick="getLocation()">试一下</button>

    <script>

    var x=document.getElementById("demo");

    function getLocation()

      {

      if (navigator.geolocation)

        {

        navigator.geolocation.getCurrentPosition(showPosition,showError);

        }

      else{x.innerHTML="Geolocation is not supported by this browser.";}

      }

    function showPosition(position)

      {

      x.innerHTML="Latitude: " + position.coords.latitude +

      "<br />Longitude: " + position.coords.longitude;       

      }

    function showError(error)

      {

      switch(error.code)

        {

        case error.PERMISSION_DENIED:

          x.innerHTML="User denied the request for Geolocation."

          break;

        case error.POSITION_UNAVAILABLE:

          x.innerHTML="Location information is unavailable."

          break;

        case error.TIMEOUT:

          x.innerHTML="The request to get user location timed out."

          break;

        case error.UNKNOWN_ERROR:

          x.innerHTML="An unknown error occurred."

          break;

        }

      }

    </script>

    </body>

    </html>

    在客户端存储数据

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

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

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

    之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

    localStorage 方法

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

    如何创建和访问 localStorage:

    实例

    <script type="text/javascript">

    localStorage.lastname="Smith";

    document.write(localStorage.lastname);

    </script>

    下面的例子对用户访问页面的次数进行计数:

    实例

    <script type="text/javascript">

    if (localStorage.pagecount)

      {

      localStorage.pagecount=Number(localStorage.pagecount) +1;

      }

    else

      {

      localStorage.pagecount=1;

      }

    document.write("Visits "+ localStorage.pagecount + " time(s).");

    </script>

    sessionStorage 方法

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

    如何创建并访问一个 sessionStorage:

    实例

    <script type="text/javascript">

    sessionStorage.lastname="Smith";

    document.write(sessionStorage.lastname);

    </script>

    使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。

    什么是应用程序缓存(Application Cache)?

    HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

    应用程序缓存为应用带来三个优势:

    • 离线浏览 - 用户可在应用离线时使用它们
    • 速度 - 已缓存资源加载得更快
    • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

    Cache Manifest 基础

    如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性:

    <!DOCTYPE HTML>

    <html manifest="demo.appcache">

    ...

    </html>

    每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

    manifest 文件的建议的文件扩展名是:".appcache"。

    请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

    web worker 是运行在后台的 JavaScript,不会影响页面的性能。

    什么是 Web Worker?

    当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

    web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

    浏览器支持

    所有主流浏览器均支持 web worker,除了 Internet Explorer。

    HTML5 Web Workers 实例

    下面的例子创建了一个简单的 web worker,在后台计数:

    在创建 web worker 之前,请检测用户的浏览器是否支持它:

    if(typeof(Worker)!=="undefined")

      {

      // Yes! Web worker support!

      // Some code.....

      }

    else

      {

      // Sorry! No Web Worker support..

      }

    创建 web worker 文件

    现在,让我们在一个外部 JavaScript 中创建我们的 web worker。

    在这里,我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:

    var i=0;

    function timedCount()

    {

    i=i+1;

    postMessage(i);

    setTimeout("timedCount()",500);

    }

    timedCount();

    以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

    注释:web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。

    创建 Web Worker 对象

    我们已经有了 web worker 文件,现在我们需要从 HTML 页面调用它。

    下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:

    if(typeof(w)=="undefined")

      {

      w=new Worker("demo_workers.js");

      }

    然后我们就可以从 web worker 发生和接收消息了。

    向 web worker 添加一个 "onmessage" 事件监听器:

    w.onmessage=function(event){

    document.getElementById("result").innerHTML=event.data;

    };

    当 web worker 传递消息时,会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

    完整的 Web Worker 实例代码

    我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码:

    实例

    <!DOCTYPE html>

    <html>

    <body>

    <p>Count numbers: <output id="result"></output></p>

    <button onclick="startWorker()">Start Worker</button>

    <button onclick="stopWorker()">Stop Worker</button>

    <br /><br />

    <script>

    var w;

    function startWorker()

    {

    if(typeof(Worker)!=="undefined")

    {

      if(typeof(w)=="undefined")

        {

        w=new Worker("demo_workers.js");

        }

      w.onmessage = function (event) {

        document.getElementById("result").innerHTML=event.data;

      };

    }

    else

    {

    document.getElementById("result").innerHTML="Sorry, your browser

     does not support Web Workers...";

    }

    }

    function stopWorker()

    {

    w.terminate();

    }

    </script>

    </body>

    </html>

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。

    Server-Sent 事件 - 单向消息传递

    Server-Sent 事件指的是网页自动获取来自服务器的更新。

    以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。

    接收 Server-Sent 事件通知

    EventSource 对象用于接收服务器发送事件通知:

    实例

    var source=new EventSource("demo_sse.php");

    source.onmessage=function(event)

      {

      document.getElementById("result").innerHTML+=event.data + "<br />";

      };

    服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。

    PHP 代码 (demo_sse.php):

    <?php

    header('Content-Type: text/event-stream');

    header('Cache-Control: no-cache');

    $time = date('r');

    echo "data: The server time is: {$time} ";

    flush();

    ?>

    ASP 代码 (VB) (demo_sse.asp):

    <%

    Response.ContentType="text/event-stream"

    Response.Expires=-1

    Response.Write("data: " & now())

    Response.Flush()

    %>

    代码解释:

    • 把报头 "Content-Type" 设置为 "text/event-stream"
    • 规定不对页面进行缓存
    • 输出发送日期(始终以 "data: " 开头)
    • 向网页刷新输出数据

    HTML5 新的 Input 类型

    HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

    本章全面介绍这些新的输入类型:

    • email
    • url
    • number
    • range
    • Date pickers (date, month, week, time, datetime, datetime-local)
    • search
    • color

    HTML5 的新的表单元素:

    HTML5 拥有若干涉及表单的元素和属性。

    本章介绍以下新的表单元素:

    • datalist
    • keygen
    • output

    ----来自w3cschool

  • 相关阅读:
    hadoop中namenode发生故障的处理方法
    开启虚拟机所报的错误:VMware Workstation cannot connect to the virtual machine. Make sure you have rights to run the program, access all directories the program uses, and access all directories for temporary fil
    Hbase的安装与部署(集群版)
    分别用反射、编程接口的方式创建DataFrame
    用Mapreduce求共同好友
    SparkSteaming中直连与receiver两种方式的区别
    privot函数使用
    Ajax无刷新显示
    使用ScriptManager服务器控件前后台数据交互
    数据库知识
  • 原文地址:https://www.cnblogs.com/zmlljx/p/12215085.html
Copyright © 2011-2022 走看看