我的家园

我的家园

HTML5之New Elements

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


只有注册用户登录后才能发表评论。


网站导航: