1. 程式人生 > >淺談H5技術

淺談H5技術

controls 創建ca 音量控制 article 4.3 標準 support foo can

1.什麽是H5:HTML5將成為HTML、XHTML以及HTML DOM的新標準。目前仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些HTML5支持。

2.背景:HTML5 是 W3C 與 WHATWG 合作的結果。

3.一些規定:

  a.新特性應該基於 HTML、CSS、DOM 以及 JavaScript。

  b.減少對外部插件的需求(比如 Flash)

  c. 更優秀的錯誤處理

  d.更多取代腳本的標記

  e.HTML5 應該獨立於設備

  f.開發進程應對公眾透明

4.新特性:

  4.1.用於繪畫的 canvas 元素

    4.1.1.canvas元素:HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。 畫布是一個矩形區域,您可以控制其每一像素。 canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

    4.1.2.使用方法:

      a.創建canvas:<canvas id="myCanvas" width="200" height="100">warning</canvas>

      b.通過 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>

  4.2. 用於媒介回放的 video 和 audio 元素

    4.2.1.audio元素:HTML5 規定了一種通過 audio 元素來包含音頻的標準方法。 audio 元素能夠播放聲音文件或者音頻流.

      4.2.1.1.audio支持的三種視頻格式在瀏覽器中的支持情況:技術分享圖片

      4.2.1.2.<audio> 標簽的屬性:技術分享圖片

      4.2.1.3.語法:<audio src="音頻路徑" controls="controls"> </audio>controls屬性供添加播放,暫停和音量控制。

      4.2.1.4.例子:<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>

           說明:<audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示的,為了確保不大部分的瀏覽器都可以適用。 audio 元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式

    4.2.2.vidio元素:直到現在,仍然不存在一項旨在網頁上顯示視頻的標準。 今天,大多數視頻是通過插件(比如 Flash)來顯示的。然而,並非所有瀏覽器都擁有同樣的插件。HTML5 規定了一種通過 video 元素來包含視頻的標準方法。

      4.2.2.1.audio支持的三種視頻格式在瀏覽器中的支持情況:技術分享圖片

      4.2.2.2.<video> 標簽的屬性:技術分享圖片

      4.2.2.3.語法:<video src="視頻路徑" controls="controls"> </video>

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

  4.3.對本地離線存儲的更好的支持

  4.4.新的特殊內容元素,比如 article、footer、header、nav、section

  4.5. 新的表單控件,比如 calendar、date、time、email、url、search

淺談H5技術