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 οnclick="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 οnclick="startWorker()">开始 Worker</button>
  <button οnclick="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 页面传回一段消息。