Posted on 2012-07-04 00:27
zljpp 閱讀(867)
評論(0) 編輯 收藏
大致使用了許多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/
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/