淺談H5技術
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技術