HTML5入门 之 新标签的解析 篇

我们知道HTML5是在HTML4的基础上添加了许多的新标签,也删除了HTML4中一些标签,具体的HTML5新标签请看HTML5入门之标签篇《上》 文章,有具体的说明。

也许你会有疑问,HTML4的标签已经非常丰富了,也能满足我们日常的WEB开发,那“为什么要添加这些新标签?”,你也想知道新的标签到底能发挥什么样的作用,我想直接告诉你的是“HTML5使HTML4所作的同样的事情简单化了。”,也就是HTML5提供了更富有语义的,高效的标签。

所以,我们在这里具体的看一下HTML4要实现的功能,在HTML5中会采用什么样的最终标准来得到相同的结果。

以下介绍的是HTML5的新标签:

  • HTML5: <article></article>
  • HTML4: <div class="article"></div>

这个标签的唯一目的是废除需要定义的一个类。

定义和用法

<article> 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。

 


  • HTML5: <aside></aside>
  • HTML4: <div class="aside"></div>

这个标签的唯一目的是废除需要定义的一个类。

定义和用法

<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。

 


  • HTML5: <audio src="xyz.ogg" autoplay controls></audio>
  • HTML4: <object type="application/ogg" data="xyz.ogg"><param name="src" value="xyz.ogg"></object>

<audio>主要是来取代 <object> 标签的复杂表现。

定义和用法

<audio> 标签定义声音,比如音乐或其他音频流。

 


  • HTML5: <canvas id="box" width="250" height="250"></canvas>
  • HTML4 (closest equivalent): <object data="inc/hdr.svg" type="image/svg+xml" width="250" height="250"></object>

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。也就是说“ HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。”

定义和用法

<canvas> 标签定义图形,比如图表和其他图像。

 


  • HTML5: <command onclick=cut()" label="cut">
  • HTML4: none


这些元素都可以根据用户的操作和选择来改变页面显示内容,而无需从服务器上下载新页面。Best practice
is to move the JavaScript to a separate file and reference it unobtrusively so you would never need this HTML5 element.

定义和用法

<command> 标签定义命令按钮,比如单选按钮、复选框或按钮。

 


  • HTML5: <datalist></datalist>
  • HTML4: see combobox.

This new element adds the missing combobox element to forms so that you don’t have to use JavaScript to create it. Possibly the most useful of the new tags that have been added.

定义和用法

<datalist> 标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。

 


  • HTML5: <details></details>
  • HTML4: <dl class="details" style="display:hidden"></dl>

details 元素意思是查看进一步信息,这些信息可能默认不显示出来。可以通过legend元素来触发这段信息。Details元素还可以应用在脚注或尾注上。This tag adds the ability to toggle the visibility of sections of the web page without the need for CSS and JavaScript.

定义和用法

<details> 标签定义元素的细节,用户可进行查看,或通过点击进行隐藏。

 


  • HTML5: <embed data="flash.swf" width="300" height="200" type="application/x-shockwave-flash"></embed>
  • HTML4: <object data="flash.swf" width="300" height="200" type="application/x-shockwave-flash"></object>

Adding the proprietary embed tag into the standards when the standard object tag already serves the same purpose is completely pointless. The only advantage that the embed tag currently has is in simplifying the code needed to support IE6. By the time that the embed tag becomes part of the standard IE6 will be long gone and the embed tag will basically just duplicate the functionality of the object tag.

定义和用法

<embed> 标签定义嵌入的内容,比如插件。

 


  • HTML5: <figure></figure>
  • HTML4: <dl class="figure"></dl>

这个标签的唯一目的是废除需要定义的一个类。

定义和用法

<figure> 标签用于对元素进行组合。

 


  • HTML5: <header></header>
  • HTML4: <div class="header"></div>

这个标签的唯一目的是废除需要定义的一个类。

定义和用法

<header> 标签定义 section 或 document 的页眉。

 


  • HTML5: <hgroup></hgroup>
  • HTML4: <div class="hgroup"></div>

这个标签的唯一目的是废除需要定义的一个类。

定义和用法

它的作用是将标题分组。主要用在副标题、 别名等。


  • HTML5: <iframe src="xiframe.htm"></iframe>
  • HTML4: <object type="text/html" data="xiframe.htm"></object>

Adding the deprecated iframe tag back into the standards when the standard object tag already serves the same purpose is completely pointless. The only advantage that the iframe tag currently has is in simplifying the code needed to support IE6. By the time that the iframe tag becomes part of the standard IE6 will be long gone and the iframe tag will basically just duplicate the functionality of the object tag.

定义和用法

<iframe> 标签创建包含另一个文档的行内框架。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中,仅仅支持 src 属性

 


  • HTML5: <keygen>
  • HTML4: no equivalent
这是全新的功能被添加到浏览器。

定义和用法

<keygen> 标签定义生成密钥。

 


  • HTML5: <mark></mark>
  • HTML4: <span class="mark"></span>

这个标签的唯一目的是废除需要定义的一个类。

定义和用法

<mark>主要用来在视觉上向用户呈现那些需要突出的文字;<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词


  • HTML5: <menu></menu>
  • HTML4: <ul class="menu"></ul>

这个标签的唯一目的是废除需要定义的一个类。

定义和用法

<menu> 标签定义菜单列表。当希望列出表单控件时使用该标签。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中,不赞成使用 menu 元素。

在 HTML 5 中,重新定义了 menu 元素,且使用用于排列表单控件。

 


  • HTML5: <meter></meter>
  • HTML4: no equivalent

这是一个全新的元素。

定义和用法

<meter> 标签定义度量(单位)。仅用于已知最大和最小值的度量。

 


  • HTML5: <nav></nav>
  • HTML4 <ul class="nav"></ul>

这个标签的唯一目的是废除需要定义的一个类。

定义和用法

<nav> 标签定义导航链接的部分。

 


  • HTML5: <output></output>
  • HTML4: <span class="output"></span>

这是一个全新的元素。

定义和用法

<output> 标签定义不同类型的输出,比如脚本的输出。

 


  • HTML5: <progress></progress>
  • HTML4: no equivalent

这是一个全新的元素。

定义和用法

<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。

 


  • HTML5: <section></section>
  • HTML4: <div class="section"></div>

这个标签的唯一目的是废除需要定义的一个类。

定义和用法

<section> 标签定义文档中的节(section)。比如章节、页眉、页脚或文档中的其他部分。

 


  • HTML5: <source>
  • HTML4: <param>

<param>标签可为包含它的 <object> 标签提供参数的。<source>是为<video>和<audio>提供参数的。

The source element serves the same purpose inside audio and video elements as param does inside object elements. Since audio and video elements are just named objects these elements are equivalent.

定义和用法

<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

 


  • HTML5: <time></time>
  • HTML4: <span class="time"></span>

This new element does serve to make the time available in a standard format within an attribute of the tag and so may simplify time related processing in JavaScript attached to the page. Whetyher this is a sufficient gain to make it worth adding a whole new tag is questionable.

定义和用法

<time> 标签定义日期或时间,或者两者。

 


  • HTML5: <video src="xyz.ogv" type=video/ogg"></video>
  • HTML4:<object type="video/ogg" data="xyz.ogv"><param name="src" value="xyz.ogv"></object>

定义和用法

<video> 标签定义视频,比如电影片段或其他视频流。

 

参考文献:

HTML 5 New Tags

HTML 5 参考手册

站点统计