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-width: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}\n\n";

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

上一篇:canvas 模糊


下一篇:纯前端canvas手绘海报