HTML 5 有多棒？

前言

雖然我也不太清楚詳細內容，不過 HTML 5 不是只有新增 audio 和 video 兩種元素而已，好像還加入了很多跟 AJAX(Javascript) 和 CSS 有關的先進技術呀。

換句話說，HTML 網頁終於不再只是靜態的？ XD

HTML 5 與影音播放

優點

利用 HTML 5 的 audio 和 video 兩種元素及相關屬性，可以讓你在網頁中播放 ogg/ogv 這種開放的影音格式，或 mp4 這種常見的影音包裝格式。

這有個重點，是你不必管你的播放器是否得三不五時，為了無聊的小事去頻頻更新，而且也不必太擔心不能播放 ogg/ogv 檔。

缺點

雖然說是 HTML，但 audio 和 video 常常還是需要有 Javascript 支援，才能正常使用那些操作面板。

另外就是影音檔案的連結可能會很容易被抓出來，得靠些方式擋直連或暴力下載。

而且並不是說不用 Flash，播放影片就會比較順，畢竟採 h.264 壓縮方式的 mp4 影音檔，如果是壓成 HD 畫質的話，可是超級吃 CPU 的。（所以 Nico Video 限制影音總流量也不是沒啥道理，原因是不是這樣我不知道就是。）

還有個問題就是，不支援 HTML 5，只支援 Flash Player 的瀏覽器（即一些不再提供更新的），可能得要直接下載檔案來播才行，無法在瀏覽器內播放。

（至於「彈幕」能不能玩，我想 HTML 5 是有可能做到的，只是我沒研究如何才能做到。）

相關連結

• Firefox HTML5 Audio Demo Test
• Firefox Browser | Video tour of Firefox browser features
• Experiment with video accessibility and time-aligned text
• Rex's blah blah blah » 軟體專利的荒謬性
• Using audio and video in Firefox - MDC
• 最新的跨瀏覽器攻擊手法：Clickjacking

HTML 5 與圖片繪製

優點

在 HTML 5 規格中，有一個 canvas 元素，可以讓你配合 Javascript，即時繪製動態的 2D（SVG） 或 3D（WebGL） 圖片。意思是說，你可以用簡單的一些圖文，製造出與使用者互動的圖片，比如說玩皮球或俄羅斯方塊之類的，或者你也可以拿來畫畫。

另外因為是用向量繪圖的方式繪製向量圖片，所以不太需要擔心會像點陣圖那樣失真。

缺點

基本上用 canvas 技術畫出來的圖片，只是即時運算出來的「圖形」，所以不會有任何圖片檔案，你想下載什麼原始的點陣圖片是沒辦法的。

相關連結

• carto:net - SVG tutorial and example site
• samples | croczilla.com

用 HTML 5 控制物件動作

這部分好像牽扯到挺複雜的 Javascript 知識，我不太會解釋，要請各位直接看範例了。

• Chrome Experiments - Home

HTML 5 與更符合網頁內容的標籤

國文老師上課都會教到，你的文章要有固定格式，標題該空四格、段落開頭要空兩格、引用要用引用符號……等等的，所以一開始就是用來承載文章的 HTML，當然也要特別注重去使用「有意義的標籤」。

HTML 5 改掉舊時代什麼都想用 div 包起來的大問題，而採用 nav、section、aside 和 footer 等有意義的元素，來裝該裝進這些容器中的有意義的內容。

這樣做的好處，不只是你在搜尋引擎所顯示的結果中，排名會比較前面、顯示的資料會比較清楚而已，這也會帶給你諸多網頁親和力上的好處。

• HTML5案例--用HTML 5和CSS 3开发博客 - 第1页 - HTML5应用交流 - 艾睿论坛 - HTML5论坛-HTML5 RIA应用交流 - Powered by bbsMax

HTML 5 與遊戲移植

既然 HTML 5 配上支援的瀏覽器，可以讓你播放影音、控制物件的話，那要做成線上遊戲也是可以的！

• 誰說 HTML5 只能看不能玩？Quake 2 GWT 讓你見識它真正的威力

其它：有點離題的東東

• 画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD ...這個有點離題了不過還是順便放上來好了 lol
• Apple - HTML5