Posted on 2012-07-04 00:27
zljpp 阅读(860)
评论(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/