HTML5學(xué)習(xí)第二節(jié) HTML5新元素的介紹

首先要檢查你的瀏覽器是否支持HTML5，主要的JS代碼如下：

function check_html5()
{
if(!!document.createElement('video').canPlayType)
  {
  var vidTest=document.createElement("video");
  oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
  if (!oggTest)
    {
    h364Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    if (!h364Test)
      {
      document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
      }
    else
      {
      if (h364Test=="probably")
        {
        document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
        }
      else
        {
        document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
        }
      }
    }
  else
    {
    if (oggTest=="probably")
      {
      document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
      }
    else
      {
      document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
      }
    }
  }
else
  {
  document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
  }
}

一、HTML5下的視頻引用方式

通過以上的檢查之后，筆者用火狐測試了這個(gè)功能。視頻的元素是 video ，video 元素支持兩種格式的視頻：

其中 ogg 是指帶有 Thedora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

MPEG4 是指 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

代碼如下：

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

以上代碼的意思是：引用一段視頻，寬320 高240  controls意思是帶有視頻控制 source 是視頻地址，video元素允許有多個(gè)source元素，瀏覽器選擇自己識(shí)別的第一個(gè)視頻格式

video元素屬性如下：

剩余這些屬性讀者可以自己測試看看，注意選擇一個(gè)支持性好的瀏覽器測試哦。

二、HTML5下的音頻

至目前為止網(wǎng)上大多數(shù)的音頻播放器仍然是FLASH，在HTML5中可以用audio元素來代替它，audio 元素能夠播放聲音文件或者音頻流。audio支持的音頻格式如下：

在頁面中引用方式如下：

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

大家可以看到和視頻的引用方式?jīng)]有太大的區(qū)別，這個(gè)就不用解釋了吧，audio元素的其他屬性如下：

三、HTML5下的繪制圖形

在HTML5中可以使用 canvas 結(jié)合 javascript  繪制圖形，示例代碼如下：

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

這段代碼本身并不能畫圖，需要通過以下的JS代碼來畫圖

<script type="text/javascript">
var c=document.getElementById("myCanvas");//獲取ID為myCanvas的元素
var cxt=c.getContext("2d");//創(chuàng)建context對象，context對象是內(nèi)建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
cxt.fillStyle="#FF0000";//設(shè)置context對象的fillStyle屬性,即是背景顏色
cxt.fillRect(0,0,150,75);//調(diào)用fillRext 方法，創(chuàng)建矩形圖像，從坐標(biāo)（0,0）畫至坐標(biāo)(150,75)
</script>

如果需要了解過多的context對象的話去搜索下關(guān)于這個(gè)對象的其他方法吧。

 四、客戶端數(shù)據(jù)存儲(chǔ)

TML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：

• localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)

• sessionStorage - 針對一個(gè) session 的數(shù)據(jù)存儲(chǔ)

在HTML5出來之前，都是由COOKIE來做這些工作，但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對服務(wù)器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。不過IE和火狐都有其他的客戶端存儲(chǔ)數(shù)據(jù)方式，IE有它的userdata 火狐有它的 globalStorage ，但是有了HTML5的這兩種新的存儲(chǔ)方式，其他一切存儲(chǔ)方式都是浮云。

在 HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請求傳遞的，而是只有在請求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能。當(dāng)然了這種請求方式和userdata globalStorage都差不多的，請求要快的多。

關(guān)于localStorage方法：

localStorage 方法存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制。

測試代碼如下

<script>

if(localStorage.count)localStorage.count = Number(localStorage.count)+1;
else localStorage.count = 1;
alert(localStorage.count)

</script>

關(guān)于sessionStorage方法：

sessionStorage 方法針對一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除

測試代碼如下：

if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
alert(sessionStorage.pagecount)

我是在火狐下測試的，刷第一次的時(shí)候是1，如果不清除COOKIE的情況下再刷，第二次就是2，但是清除COOKIE之后再刷，結(jié)果會(huì)是1，難道這些存儲(chǔ)方式還和COOKIE還有藕斷絲連的關(guān)系？