Dive Into HTML5:它的含义是什么?(续二)

HTML5 中另外的链接关系

rel="archives"“暗示被引用的文档描述的是一系列记录、文档或者其他感兴趣的历史资料。一个博客的索引页可以使用rel="archives"来连接到过去曾经发布过的文章。”

rel="author"用于链接到本页作者的信息。这种链接可以是 mailto: address,也可以不是;当然也可以简单地连接到一个联系表格或者是“关于作者”的页面。

rel="external"“暗示链接到的文档不是本站点的一部分。”我觉得这应该是 Wordpress 推广开来的,目的是将链接留给其贡献者。

HTML 4 定义了rel="start"rel="prev"rel="next",用于指定一系列页面之间的关系,就像一本书的章节,或者是一个博客里面的文章。不过,仅有rel="next"被正确使用了。人们使用rel="previous"替代了rel="prev",使用rel="begin"rel="first"替代了rel="start",使用rel="end"替代了rel="last",最后还发明了一个rel="up"来指向“父”页面。

HTML5 引入了rel="first"。这个关系目前被广泛应用于指定“本系列的第一个页面”。(rel="start"是一个不合格的代名词,仅仅是提供了一种向后兼容性。)同时也引入了rel="prev"rel="next",就像 HTML 4,并且为了向后兼容而支持rel="previous",就像rel="last"(本系列的最后一个,对应着rel="first")和rel="up"

理解rel="up"最好的方式是看一看你的“面包屑导航”(至少是想象一下)。你的主页应该是面包屑的第一项,当前页则是最后一项,rel="up"指向面包屑的倒数第二项。

rel="icon"是第二个被广泛使用的链接关系,仅次于rel="stylesheet"。它通常结合shortcut使用,例如:

<link rel="shortcut icon" href="/favicon.ico">

所有主流浏览器都支持这种用法:将本页面与一个小图标关联起来。通常,这个小图标会显示在浏览器地址栏的 URL 旁边,或者是在浏览器的 tab 页上,或者两个都有。

HTML5 也新增加了新的功能:我们可以结合 icon 链接关系使用大小属性,来限制引用图标的大小。

rel="license"由 microformats 社区发明。它“用于指定被引用的文档使用了当前文档提供的哪些版权协议”。

rel="nofollow"“指定了原作者或者页面发布者不允许通过该链接,或者被引用的文档的原文需要被引入,因此这两个页面之间的作者存在商业关系等”。这一类型由 Google 发明,由 microformats 社区进行了标准化。WordPress 将rel="nofollow"添加给其贡献者。这种类型的思路是,如果 "nofollow" 链接不允许出现在 PageRank 上,垃圾信息发送者就会放弃向页面发送垃圾信息。这种情况可以由rel="nofollow"尽量避免。

rel="noreferrer"“指定当跟随该页面时,没有其他引用信息。”目前还没有浏览器支持这个类型,但是对其支持已经摆上了 WebKit 的日程,很快我们就可以在 Safari、Google Chrome 或者其他基于 WebKit 的浏览器中看到这一点了。(rel="noreferrer" 测试页面

rel="pingback"指定“pingback”的服务器地址。根据 Pingback 的标准解释,“pingback 系统是一种方法,能够让博客自动获知在 web 上有别的站点链接到它。……它允许反向链接——这是一种链接链的备份,而不是一点点的向下钻探。”博客系统,比如 WordPress,就实现了 pingback 机制,使作者能够你现在新建了一篇链接到他们文章的页面。

rel="prefetch"“指定预获取和缓存特定资源的能力,例如一些可能会被用户经常使用的资源”。有时候,搜索引擎如果觉得最上层的搜索结果很有可能被他人使用,那么它就会向搜索结果页面中添加<link rel="prefetch" href="最上层搜索结果的 URL">。例如,使用 Firefox 用 Google 搜索 CNN,看一下页面源代码,就会看到这种预获取的代码。目前,Mozilla Firefox 是唯一一个支持rel="prefetch"的浏览器。

rel="search"“指定被引用的文档提供了搜索文档及其相关资源的特定接口”。特别的,如果你希望rel="search"能够干点实事,你应该将它指向一个 OpenSearch 文档。这个文档描述了浏览器如何构建 URL,用以使用给定的关键字搜索当前站点。OpenSearch(以及指向 OpenSearch 描述文档链接的 rel="search")由 Microsoft Internet Explorer 7 及以上版本和 Mozilla Firefox 2 及以上版本支持。

rel="sidebar"“指定被引用的文档,如果被检索的话,应该显示在上下文的二级浏览页面(如果可能的话),而不是显示在当前区域”。这是什么意思?对于 Opera 和 Mozilla Firefox,这意味着,“当我点击了这个链接,提示用户创建一个书签,当你从书签菜单选择后,将在浏览器的侧边栏打开被链接的文档”。(Opera 将其称为“面板 panel”而不是“sidebar”)。Internet Explorer、Safari 和 Chrome 都会直接忽略rel="sidebar",仅创建一个常规的链接。(rel="sidebar" 测试页面

rel="tag"“指定用于应用到当前文档的标签”。使用 ref 属性标记出“标签(分类关键字)”是由 Technorati 发明的,意在帮助他们对博文进行分类。早期的博客和教程通常使用 “Technorati” 标签。(没错,就是这样:一个商业公司为了方便公司自己的管理发明的技术,现在已经方便了全世界的博客作者!)这一语法后来被 microformats 社区进行了标准化,简单地称为rel="tag"。很多博客系统允许作者使用ref="tag"来关联分类、关键字或者标签。浏览器并不会有什么特别的操作,这一属性仅仅用来帮助搜索引擎能够更好的得知这一页面是关于什么的。

HTML5 中新的语义元素

HTML5 所做的不仅仅是将已有标签变得更简短(虽然它为此已经做了大量工作),同时也增加了很多新的语义元素。

<section>

section 元素用于表示一篇文档或者应用程序的一个块。所谓块,可以理解成是相关内容的一个专题,通常包含一个标题。块可以是章节,可以是标签对话框的一个标签页,也可以是一篇论文的几个章节等。web 站点的主页也可以分成简介、新闻、联系信息等部分。

<nav>

nav 元素用于表示一个页面中链接到其他页面或者本页面其他部分的链接部分,也就是导航链接部分。并不是页面的所有链接都需要放在 nav 元素中——我们建议只有那些主导航块的链接才放在 nav 元素中。另外需要注意的是,脚注部分通常放置站点的通用页面,比如服务条款、主页、版权页等。这种脚注需要使用 footer 元素,而不是 nav。

<article>

article 元素用于表示页面的一个组件。这种组件应该在文档、页面、应用程序或者站点中有一个相对完整的内容,并且可以相对独立的使用。这可以是一个论坛的帖子、杂志或者报纸的文章、一篇博客文章、一个用户提交的评论、可交互组件,或者其他能够独立使用的内容。

<aside>

aside 元素用于表示出现在其他内容旁边的内容,这部分内容通常认为是独立于主内容的。比如印刷品的边侧栏。这种元素可以用于印刷品的引用或者放置广告的边侧栏,也可以将 nav 元素组织在一起,或者任何独立于主内容的其他内容。

<hgroup>

hgroup 用于组织块的标题。这种元素可以将一系列 h1-h6 元素作为一个整体,用于表现多级标题,例如主副标题、别名或者标签行等。

<header>

header 元素用于组织用于简介或导航目的的元素。header 元素可以包含块的标题(一个 h1-h6 元素或一个 hgroup 元素),但这不是必须的。header 也可以用于组织块的目录、搜索提交表单或者相关 logo 等。

<footer>

footer 元素用于表示相近内容的块或者相近其根元素的内容。脚注一般包含页面作者信息、关联的文档、版权数据等。脚注不一定要在一个块的最后,不过通常都是如此。当脚注需要表示一个完整的信息时,它可以包含附录、索引、长的题跋、冗长的许可协议或者其他类似内容。

<time>

time 元素用于表示24小时制的时间,或者一个格里高里历的日期,这个日期也可以指定一个时间或者时区。

<mark>

mark 元素用于表示文档的标记内容,或者高亮显示引用目的等。

或许你已经迫不及待地想学习如何使用这些新的元素,否则的话你就不需要继续读下去了。那么,下面的内容就是关于如何在你的页面中使用这些新元素。

Leave a Reply