HTML5标签速写

HTML5标准虽然尚未正式出炉，但其脚步声却是越来越近。在漫长的等待中，我们不妨先来看看HTML5目前都有些什么了，来一次HTML5速写。

如要查询各大浏览器的HTML5支持情况，请猛击这里。

本文基于HTML5 Semantics而写，但并不是一篇标准的翻译。如果您对文中的技术细节、正式观点存在疑惑，请以原文为准

有些标签拜拜了

用了专门控制网页表现力的标签都被移除了，比如 center、font、big，因为它们的作用目前已经完全被CSS所替代。不过这并不意味着你必须要重写以前，而是说这些标签都“过时”了，不应当在新的网页中使用了。

查看更多被删除的标签

有些标签意义变了

查看变更含义的标签

还有很多新标签

新标签通常就意味着新功能，因此这可能是我们最期待也是最关注的部分了。我们熟悉的有video、audio，另外还有一个在游戏中被用的大红大紫的canvas——这个标签在未来将提供WebGL支持，这是游戏中非常重要的一点，而且由于WebGL的易用性，很多既有的项目和产品还将被轻松地移植至浏览器之上。

这三个标签的实际效果与老img标签类似，它们都是将外界的信息捕捉至网页当中。但不同的是，三者既允许使用闭合标签，也能够使用非闭合标签，这将极大地方便开发者为不支持新特性的浏览器提供一个回避措施：一张图片来替代canvas，或者一个flash来替代video。

source标签及track标签将作为空标签应用至video、audio内部。

其中source标签用来提供媒体文件的位置及类型，浏览器自上而下依次读取，解析它所遇到的第一个能够解析的格式：

在这个例子中，Opera、Firefox以及Chrome将下载ogg格式的bieber文件进行播放，而Safari和IE将直接下载MP3格式的文件播放。其中Chrome虽然能够播放两种格式，但因为source标签的规则，它将只播放第一个能够解析的文件。最后的的fallback部分则是其它不支持source标签的浏览器用来回避标签的代码，支持source标签的浏览器就不会显示这些内容了。

同样的情况也适用于video标签：

如此，老版本浏览器用户将直接观看flash格式的Youtube视频，而新浏览器用户则能够凭借其浏览器来进行更好的本地视频解析。这正是所谓的“人人都适用”的代码。

track标签则是新近才增加到HTML5标准中的，该标签目前还仅仅只有Opera、Chrome和IE（当然，我们说的是最新版）能够支持。这个标签的作用是提示浏览器字幕文件的所在。一旦浏览器支持了该标签，那么它将在视频或者音频文件播放时，同步地按需出现——如此将使得语言障碍者及残疾人受益。

有些标签专为国际化

虽然没有上面几条标签那么具有吸引力，但这对于互联网上的非英语使用者非常有帮助。

阿拉伯语、希伯来语等自右向左的文字将在网页中，由浏览器专门来决定书写形式，更重要的是，读音、数字等等符号也将被同等对待。现代的浏览器在处理多国语言上已经做得非常好了，而在HTML5的帮助下，它们将做得更好。

bdi标签，将允许网页开发者覆盖浏览器现有的多国语言处理、表现方式，这使得浏览器在一些特殊情况（语言实在是太灵活了）下能够针对当前的情况听从开发者的安排。

除此之外，有些语言含有一些完全不是字母的字符，它们传达的仅仅是意义而没有读音。另一方面，文章的作者有时也会需要为读者提供一些不常见的字符，而通常都由小字体来单独注释。HTML5这次将为我们带来专门的三个标签：ruby、rt以及rp。

查看ruby标签的详细描述

有些标签与网页结构有关

绝大多数人都已经知道，HTML5为现代网页专门提供了标签来描述网页的特定部分，如header、footer、nav、section、article、aside等等。这些标签之所以被纳入标准，是因为网页开发者确实就需要这样的标签。这些需求在2005年Google的一项网页分析中，已经验证：在多达10亿的网页中，开发者使用这些词汇来描述网页的特定部分是最多的。无独有偶，2008年，Opera MAMA调查了30亿链接来分析使用最多的class及最多的ID名称，最终同样得到了开发者对这些标签的需求。当然，如果你是一个职业的网页开发者，这一点我想就更不用多说了。

新标准坚持平缓降级。例如，HTML5的最新版本当中引入了一个figure标签：

figure标签用以表示一些浮动元素内容。figure可选地带有caption标签，通常用来关联正文当中的内容。

该标签可用来容纳图片、代码等等。

而这并非新点子。HTML3草案中曾提到过一个fig标签（但最终没能进入标准），用法大致如下：


   Ground dweller: Nicodamus bicolor builds silk snares
   A small hairy spider.
   J. A. L. Cooke/OSF

但这有一个大麻烦。当用户的浏览器并不支持fig标签的时候（实际上根本没有浏览器支持），图片就根本不会被显示，因为fig标签整个都被忽略掉了，搞笑的是，其内部的声明却被显示出来——因其仅仅只是普通的文本。

在HTML5中，我们就可以这么做：





Ground dweller: Nicodamus bicolor builds silk snares.

A small hairy spider.
      J. A. L. Cooke/OSF

HTML5还提供了figcaption标签。这一标签原本会被写作caption，但由于一些历史因素，caption以后也将仅仅只是table标签中的一部分。

HTML5标准的一个设计原则就是新特性应当尽量平缓降级，而一旦降级无法实现，标准则提供回避。标准倾向于重用既有的标签，而不是立刻创造一个新的——当然，这是相对的，必要的时候还是会引入新的。

有些标签用以交互

结构相关的标签对浏览器的表现来说，不会造成什么大的差异，尽管很多软件已经开始使用它们了。而有些标签对网页表现来说，则已经开始产生影响了。

details标签，一个被动交互标签，能够产生一个隐藏信息的效果，它只有当用户需要的时候才展现出信息。绝大多数浏览器都会将其实现为一个可展开的结构，就像现在很多网页上的show/hide按钮（都是JavaScript实现）。

而其它相关的新标签，许多也都已经被用在网页表单当中了，比如input标签。input标签就属于之前所说的平缓降级的标签，它的众多属性在老版本的浏览器中，都等同于

。除此之外，新标签还有datalist、output、progress以及meter。

这是我们想要的么？

现在我们已经有了很多新标签了，但我们如何确保这些标签就是我们真正需要的？毕竟前面举出的Google调查，也是2005年的调查了——真的好久了。或许有些事实已经在调查之后发生了重大的改变——比如说很多人指出HTML5是面向文档的，而不是面向应用的。那我们是不是需要更多面向应用的标签，比如login或者share？

那我就不知道了，毕竟我不是应用开发人员。但HTML标准总是活的，一旦需求变得强烈，这些东西就会被列入讨论。

我猜许多开发者都可能想要一个新的图片嵌入方式，以应对不同的设备环境。这类似于video，我能想象出一个picture标签，就像这样：

这段假想的代码将在宽屏设备上下载hires.png，而在最小为480像素宽的设备上下载midres.png，其余的设备则下载lores.png。这样的代码可能每个设计师都曾幻想过，因为它将解决设计师和开发者对跨平台图片选取的困惑。带宽、屏宽等等诸多因素都将影响图片的选择。或许我们可以见到这样的标签出现在HTML6当中，而在现在，我们就只能依靠脚本或者浏览器检测之类的其它手段来解决这样的问题。

时间，地点和人物

HTML5引入了一个time标签（尽管曾产生过激烈的辩论），这个标签将把一个人类理解的日子，转换成一个机器可读的数据。无论标签当中的内容如何改变，它都将不会再影响机器对该时间的理解。因此，time使用起来就像这样：

The day the woman I love was born

Priyanka Chopra’s birthday

同一个日期，无论你如何对其定义，对于机器来说，它都将认准YYYY-MM-DD这样的一个日期。而如果你想再增加具体的时间，则可以考虑2011-11-13T20:00Z这样一个表达。这样搜索引擎之类的机器就能够精准地读取到最新的信息。

可能有点令人吃惊，尽管时下地理应用如此兴旺，我们却还没有一个地理标签能够处理这样三个属性：经度、维度和海拔（可选），所以要是能有这么一个标签就太好了：

London SW1A 4WW

然后浏览器就可以根据这个信息来显示一副地图或者GPS导航信息了。

HTML3当中有一个person标签，用来提供给机器识别姓名，但没有一个浏览器真正实现了它。在HTML4中，cite标签能够用于人名的处理，但在HTML5中它已经被移除了。那么在HTML5中，我们已经没有任何能够消歧义人名的东西了。人名确实是一个很难处理的东西，因为姓名没有一个统一的标准，它不像时间这样有一个ISO标准，也不像地理那样可以靠经纬度来指定。

HTML5当中已经引入了一个新标签data，它原本用来替换掉time，但最终两者都得以保存。data标签用来存放一些信息，其中可以存放姓名，但浏览器不会理解其中存放的到底是什么，就像1936-10-19可以是一个日期，也可以是一个邮编。

微型数据

HTML5，和HTML4一样，是可扩展的（但不像XML那么夸张，以至于让委员会无法接受）。你可以用HTML的class机制携带一些小规模的数据，或者使用RDFa标准（但RDFa很难用）。而在HTML5中，微型数据实际是指增加一些商定好的标签。

类似于RDFa，增加的标签只有在你告诉其它人它是什么意义时，才真正有意义，这意味着数据必须要有一个类似于词汇表的东西来作为索引的方式。

更多有关微型数据

标签到底重要吗

标签到底重要吗？这因人而定。有些人习惯于使用JavaScript来生成网页的几乎全部内容，标签对他们来说确实不重要——因为都是机器生成的，完全无需人工干预。这有点像flash。文章的原作者对此并不认同，但我个人认为，如果这样的方式确实广泛的存在了（事实上真是这样），那么它便是合理的。人们需要这样一种方式来使用HTML，那还有什么可说的呢？

而另一方面，标签确实能够加强人和机器对于网页的理解。以往的div虽然也能用，但大部分情况下仅仅只有开发者才清楚其真正意义，而对于搜索引擎来说，它就和其它的div完全没有分别了。

因此辩证地看，标签大部分情况下重要，但也不总是那么重要。更关键的还是在于你——在于你如何去对待它了。