html5 标签与对应属性详细使用方法

HTML 5 视频

video标签

当前，video 元素支持三种视频格式：

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

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

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

使用方法：<video src="movie.ogg" controls="controls"></video>

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

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。

<video width="320" height="240" controls="controls">

  <source src="movie.ogg" type="video/ogg">

  <source src="movie.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

<video> 标签的属性：

autoplay   值：autoplay      如果出现该属性，则视频在就绪后马上播放。

controls    值：controls      如果出现该属性，则向用户显示控件，比如播放按钮。

height          设置视频播放器的高度。

loop          值：loop           如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload    值：preload      如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src           要播放的视频的 URL。

width        设置视频播放器的宽度。

 

HTML 5 音频

 

audio标签

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

当前，audio 元素支持三种音频格式：

Ogg Vorbis，MP3，Wav。

使用方法：<audio src="song.ogg" controls="controls"></audio>

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

例：<audio src="song.ogg" controls="controls">Your browser does not support the audio tag.</audio>

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件

例：

<audio controls="controls"> 

 <source src="song.ogg" type="audio/ogg"> 

 <source src="song.mp3" type="audio/mpeg">

 Your browser does not support the audio tag.

</audio>

属性：

autoplay   值：autoplay    如果出现该属性，则音频在就绪后马上播放。

controls    值：controls     如果出现该属性，则向用户显示控件，比如播放按钮。

loop          值：loop           如果出现该属性，则每当音频结束时重新开始播放。

preload    值：preload      如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src     要播放的音频的 URL。

 

HTML 5 拖放

 

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

<img draggable="true" />

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

ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

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

function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}

放到何处 - ondragover

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

进行放置 - ondrop

 

HTML 5 画布

 

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

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素：

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

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>

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

使用您指定的颜色来绘制渐变背景：

<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>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

把一幅图像放置到画布上：

<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>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

 

HTML5 内联 SVG

 

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

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

 

把 SVG 直接嵌入 HTML 页面

<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>

 

画布

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

SVG

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

 

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>

下面的例子对用户在当前 session 中访问页面的次数进行计数：

<script type="text/javascript">

if (

sessionStorage.pagecount

)  { 

 sessionStorage.pagecount=Number(

sessionStorage.pagecount

) +1; 

 }else  { 

sessionStorage.pagecount

=1; 

}document.write("Visits "+

sessionStorage.pagecount

+" time(s) this session.");

</script>

 

HTML 5 应用程序缓存

 

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

例：

<!DOCTYPE html>

<html manifest="/example/html5/demo_html.appcache">

<body>

<script type="text/javascript" src="/example/html5/demo_time.js">

</script>

<p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p>

<p><img src="/i/w3school_banner.gif" /></p>

<p>请打开<a href="/example/html5/html5_html_manifest.html" target="_blank">这个页面</a>，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。</p>

</body>

</html>

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

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

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

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

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

 

HTML 5 Web Workers

 

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

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

<!DOCTYPE html>

<html>

<body>

<p>计数: <output id="result"></output></p>

<button onclick="startWorker()">开始 Worker</button>

<button onclick="stopWorker()">停止 Worker</button>

<br /><br />

<script>

var w;

function startWorker()

{

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

  {

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

  {

  w=new Worker("/example/html5/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>

检测 Web Worker 支持

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

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

  // Yes! Web worker support!  // Some code..... 

 }else  { 

 // Sorry! No Web Worker support..

  }

 

创建 web worker 文件

var i=0;

function timedCount(){

i=i+1;

postMessage(i);

setTimeout("timedCount()",500);}

timedCount();

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