Posted on 2012-07-04 00:27
zljpp 閱讀(869)
評論(0) 編輯 收藏
大致使用了許多HTML5支持的新元素，并在接下來要搭建的Web Page中大量嘗試，感謝國外站點(diǎn)提供了許多免費(fèi)開源的HTML5模板，使得真正理解新元素的使用場景和意義變得越發(fā)輕松。這里也順便總結(jié)一下自己的體會(huì)：
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>
網(wǎng)頁布局的影響：
- 在布局的表意上，更加清晰明了，在舊的方式下，我們通常使用float:left下的div元素來劃分頁面的各個(gè)部分，包括了頁頭、頁尾、導(dǎo)航、主題等等。例如在頁頭中包含導(dǎo)航區(qū)域，也仍然使用div嵌套div的方式。
- 而使用HTML5之后，頁頭可以使用專門header元素，頁尾可以使用專門的footer元素，導(dǎo)航可以專用nav元素，主題部分若是文字為主的區(qū)域，可以專用article元素，在中間嵌套圖片、代碼片段等，可以專用figure元素。
- 總而言之，由于元素的抽象更加細(xì)致，使得表意上更加清晰，日后重構(gòu)頁面的時(shí)候，讓閱讀代碼的人也可以更加容易的分析頁面的整體結(jié)構(gòu)。
瀏覽器的影響：
- 注意不是所有的元素都被主流browser所支持，例如details和summary元素，目前為止就只被chrome所支持, chrome提供了details元素的閉合和展開默認(rèn)實(shí)現(xiàn)，當(dāng)閉合的時(shí)候
- 筆者在想這個(gè)元素的設(shè)計(jì)提交是否出自Google的員工，-_-|||
- 在IE瀏覽器系列，大部分HTML5的元素，就只能被IE9所支持，這個(gè)對于中國的用戶來說，估計(jì)比較要命
- 想time這種代表時(shí)間或者日期的新元素，能代替之前百家爭鳴各式各樣自制的日歷控件，由瀏覽器來提供樣式和基本功能，但悲劇的是，目前還沒有一家瀏覽器廠商支持它
其他元素體驗(yàn)：
- embed元素提供了在網(wǎng)頁中內(nèi)嵌其他plugin application的能力，最常見的是flash
- datalist豐富的輸入框的自動(dòng)填充和提示功能，內(nèi)置讓用戶輸入關(guān)鍵字的時(shí)候能夠自動(dòng)匹配option中包含的選項(xiàng)內(nèi)容，目前似乎只有Firefox等少數(shù)browser支持
- input type="range"提供了一個(gè)拉動(dòng)條可以調(diào)整輸入值的范圍，input type="number"提供了專屬數(shù)字的輸入框
- aside提供了對主要內(nèi)容區(qū)域之外的邊欄設(shè)計(jì)，例如在許多網(wǎng)站上能看到的右側(cè)長條廣告區(qū)域
- 不得不提的是canvas提供了在一定范圍的區(qū)域內(nèi)進(jìn)行圖形繪制，結(jié)合Javascript調(diào)用圖形繪制的API，可以實(shí)現(xiàn)頁面的各種特效，一個(gè)很強(qiáng)大的例子：http://www.effectgames.com/demos/canvascycle/
總結(jié)：
- HTML5新增加的元素對于Web頁面的開發(fā)者來說可能是一次挑戰(zhàn)，因?yàn)橐淖兊牧?xí)慣很多，要熟悉的內(nèi)容也很細(xì)
- 以前從table/tr/td來做網(wǎng)頁，到Web2.0時(shí)代大量使用div+css2.x一樣，任何新的設(shè)計(jì)和理念的出現(xiàn)都一定是有它的道理，對于當(dāng)今agile盛行快速變化的世界，頁面的重構(gòu)在使用老的元素下，龐大的頁面嵌套這滿屏幕的div和table，工作量非常之龐大，所以才會(huì)有更清晰表意的各種HTML5新元素誕生
- 在Javascript解釋速度、browser本地化計(jì)算能力、硬件速度飛躍提升的背景下，例如canvas提供的圖形繪制API，讓頁面特效可以無限強(qiáng)大，網(wǎng)頁游戲也甚至可以趕上以往客戶端游戲的效果
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>
網(wǎng)頁布局的影響：
- 在布局的表意上，更加清晰明了，在舊的方式下，我們通常使用float:left下的div元素來劃分頁面的各個(gè)部分，包括了頁頭、頁尾、導(dǎo)航、主題等等。例如在頁頭中包含導(dǎo)航區(qū)域，也仍然使用div嵌套div的方式。
- 而使用HTML5之后，頁頭可以使用專門header元素，頁尾可以使用專門的footer元素，導(dǎo)航可以專用nav元素，主題部分若是文字為主的區(qū)域，可以專用article元素，在中間嵌套圖片、代碼片段等，可以專用figure元素。
- 總而言之，由于元素的抽象更加細(xì)致，使得表意上更加清晰，日后重構(gòu)頁面的時(shí)候，讓閱讀代碼的人也可以更加容易的分析頁面的整體結(jié)構(gòu)。
瀏覽器的影響：
- 注意不是所有的元素都被主流browser所支持，例如details和summary元素，目前為止就只被chrome所支持, chrome提供了details元素的閉合和展開默認(rèn)實(shí)現(xiàn)，當(dāng)閉合的時(shí)候
- 筆者在想這個(gè)元素的設(shè)計(jì)提交是否出自Google的員工，-_-|||
- 在IE瀏覽器系列，大部分HTML5的元素，就只能被IE9所支持，這個(gè)對于中國的用戶來說，估計(jì)比較要命
- 想time這種代表時(shí)間或者日期的新元素，能代替之前百家爭鳴各式各樣自制的日歷控件，由瀏覽器來提供樣式和基本功能，但悲劇的是，目前還沒有一家瀏覽器廠商支持它
其他元素體驗(yàn)：
- embed元素提供了在網(wǎng)頁中內(nèi)嵌其他plugin application的能力，最常見的是flash
- datalist豐富的輸入框的自動(dòng)填充和提示功能，內(nèi)置讓用戶輸入關(guān)鍵字的時(shí)候能夠自動(dòng)匹配option中包含的選項(xiàng)內(nèi)容，目前似乎只有Firefox等少數(shù)browser支持
- input type="range"提供了一個(gè)拉動(dòng)條可以調(diào)整輸入值的范圍，input type="number"提供了專屬數(shù)字的輸入框
- aside提供了對主要內(nèi)容區(qū)域之外的邊欄設(shè)計(jì)，例如在許多網(wǎng)站上能看到的右側(cè)長條廣告區(qū)域
- 不得不提的是canvas提供了在一定范圍的區(qū)域內(nèi)進(jìn)行圖形繪制，結(jié)合Javascript調(diào)用圖形繪制的API，可以實(shí)現(xiàn)頁面的各種特效，一個(gè)很強(qiáng)大的例子：http://www.effectgames.com/demos/canvascycle/
總結(jié)：
- HTML5新增加的元素對于Web頁面的開發(fā)者來說可能是一次挑戰(zhàn)，因?yàn)橐淖兊牧?xí)慣很多，要熟悉的內(nèi)容也很細(xì)
- 以前從table/tr/td來做網(wǎng)頁，到Web2.0時(shí)代大量使用div+css2.x一樣，任何新的設(shè)計(jì)和理念的出現(xiàn)都一定是有它的道理，對于當(dāng)今agile盛行快速變化的世界，頁面的重構(gòu)在使用老的元素下，龐大的頁面嵌套這滿屏幕的div和table，工作量非常之龐大，所以才會(huì)有更清晰表意的各種HTML5新元素誕生
- 在Javascript解釋速度、browser本地化計(jì)算能力、硬件速度飛躍提升的背景下，例如canvas提供的圖形繪制API，讓頁面特效可以無限強(qiáng)大，網(wǎng)頁游戲也甚至可以趕上以往客戶端游戲的效果
Reference:
一篇介紹HTML5的好文章：http://www.ibm.com/developerworks/cn/xml/x-html5/