HTML5之New Elements

大致使用了許多HTML5支援的新元素，並在接下來要搭建的Web Page中大量嘗試，感謝國外網站提供了許多免費開源的HTML5模板，使得真正理解新元素的使用情境和意義變得越發輕鬆。這裡也順便總結一下自己的體會：

HTML5新元素

1. Semantic/Structural Elements
<article> Defines an article
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break

2. Media Elements
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for <video> and <audio>
<embed> Defines a container for an external application or interactive content (a plug-in)
<track> Defines text tracks for <video> and <audio>

3. Advance Elements
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

HTML5擯棄的舊元素
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>

網頁布局的影響：

- 在布局的表意上，更加清晰明了，在舊的方式下，我們通常使用float:left下的div元素來劃分頁面的各個部分，包括了頁頭、頁尾、導航、主題等等。例如在頁頭中包含導航地區，也仍然使用div嵌套div的方式。
- 而使用HTML5之後，頁頭可以使用專門header元素，頁尾可以使用專門的footer元素，導航可以專用nav元素，主題部分若是文字為主的地區，可以專用article元素，在中間嵌套圖片、程式碼片段等，可以專用figure元素。
- 總而言之，由於元素的抽象更加細緻，使得表意上更加清晰，日後重構頁面的時候，讓閱讀代碼的人也可以更加容易的分析頁面的整體結構。

瀏覽器的影響：

- 注意不是所有的元素都被主流browser所支援，例如details和summary元素，目前為止就只被chrome所支援, chrome提供了details元素的閉合和展開預設實現，當閉合的時候
- 筆者在想這個元素的設計提交是否出自Google的員工，-_-|||
- 在IE瀏覽器系列，大部分HTML5的元素，就只能被IE9所支援，這個對於中國的使用者來說，估計比較要命
- 想time這種代表時間或者日期的新元素，能代替之前百家爭鳴各式各樣自製的日曆控制項，由瀏覽器來提供樣式和準系統，但悲劇的是，目前還沒有一家瀏覽器廠商支援它

其他元素體驗：

- embed元素提供了在網頁中內嵌其他plugin application的能力，最常見的是flash
- datalist豐富的輸入框的自動填滿和提示功能，內建讓使用者輸入關鍵字的時候能夠自動匹配option中包含的選項內容，目前似乎只有Firefox等少數browser支援
- input type="range"提供了一個拉動條可以調整輸入值的範圍，input type="number"提供了專屬數位輸入框
- aside提供了對主要內容地區之外的側邊欄設計，例如在許多網站上能看到的右側長條廣告地區
- 不得不提的是canvas提供了在一定範圍的地區內進行圖形繪製，結合Javascript調用圖形繪製的API，可以實現頁面的各種特效，一個很強大的例子：http://www.effectgames.com/demos/canvascycle/

總結：

- HTML5新增加的元素對於Web頁面的開發人員來說可能是一次挑戰，因為要改變的習慣很多，要熟悉的內容也很細
- 以前從table/tr/td來做網頁，到Web2.0時代大量使用div+css2.x一樣，任何新的設計和理念的出現都一定是有它的道理，對於當今agile盛行快速變化的世界，頁面的重構在使用老的元素下，龐大的頁面嵌套這滿螢幕的div和table，工作量非常之龐大，所以才會有更清晰表意的各種HTML5新元素誕生
- 在Javascript解釋速度、browser本地化計算能力、硬體速度飛躍提升的背景下，例如canvas提供的圖形繪製API，讓頁面特效可以無限強大，網頁遊戲也甚至可以趕上以往用戶端遊戲的效果

Reference:

一篇介紹HTML5的好文章：http://www.ibm.com/developerworks/cn/xml/x-html5/