《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.6 微数据

2.6 微数据

通过创建被称为微数据的简单语法,HTML5解决了语义问题。根本上,微数据是一系列提供富有意义的机读数据的名称值对。和前面一样,与其设法去解释它,还不如使用这个更简单易行的方法—向读者展示它是如何运作的:

此标记创建了一个单项。itemscope属性被用于标记此特定项的界限或范围的包含元素。里面含有被称为property的名称值对:itemprop属性的值是名称—在此示例中,是“city”—而元素的内容是值—在此示例中,是“London”。最后的结果是一个具有单个属性的项:

但是,这并不局限于每一项的单个属性;我们想要有多少属性就能有多少属性:

在这个示例中,该项的属性列表将会是这个样子:

正如我们所看到的那样,此标记有点类似于RDFa;也就是因为它像RDFa格式,才可以分别给人和机器不同的值。再看看下面使用datetime属性的例子:

和使用RDFa一样,通过itemtype属性链接到内容,我们可以用预定义架构来描述内容:

我们还可以使用诸如前面提及的都柏林核心这样的架构,甚至还可以像上面演示的那样,自己发明一个构架。

2.6.1 微数据API

微数据有一个伴随物,叫做DOM API,对提取页面中的数据很有作用,并且,它在现代浏览器中已经被相当广泛地实现。API的关键是getitems方法,使用getitems方法会返回一张节点列表(NodeList),列表中包含页面上所有的项:

从这些项中,我们可以选择一个单项,例如,想知道它包含多少个属性,可以使用properties对象:

或者,我们能发现其中一个属性的值:

读者可以去查看范例文件microdata-api.html,其中有很多相关的示例。控制台里已经存录了结果,所以,只需打开你最喜欢的浏览器就能看到。所以,我鼓励读者自己打开浏览器去看看。对于任何手边没有浏览器的读者,图2-2显示了在Firebug中存储的结果。

2.6.2 微数据、微格式和RDFa

如果你已经决定给网页添加上机器可读的语义数据,并且认为这是一个正确的选择;那么,应该使用哪种格式呢?答案当然是视情况而定。先对内容进行评估,再阅读每种数据类型的优点和缺点,最后,选择那种对你来说最好的格式。在未来,我们通常看到的是简单微格式与微数据的混合体,当然,这只是我的个人看法。由于微数据语法灵活,所以出现一种很有趣的现象:它可以同时适应微格式和RDFa。下面的示例,显示了如何使用微数据来标记hCard:

同样,我们还可以轻松地使用RDFa数据架构:

在本人看来,微数据的灵活性将会让它的使用频率越来越高。即便如此,这并不表示对于一切来说,微数据都是完美的。一些微格式,例如Rel-Tag,它本身就非常简洁、易于使用,根本没必要试图用微数据去替换它们。

2.6.3 Schema.org

一般来看,使用微数据有两个原因。其中一个原因是为了征服微格式和RDFa;另一个原因是它能给我们带来很大的优势,让我们的内容能被搜索引擎和门户网站所注意并推广。2011年,四大网络巨头—谷歌、微软、雅虎和Yandex发起了一个新的网站:Schema.org,该网站介绍了一组使用微数据标记常见模式的共享词汇。

这些模式包括评论、事件、地点、项和对象,这类经常在网络中被大家讨论的东西。举例说明,假设你正在网站上写一篇书评(我们可以随机选择一本书,并给予它不偏不倚的评论):

这一评论实际上包含两个项:这本书的详细内容和对该书的评论。我们可以使用Schema.org中的两个词汇为这两个项提供语义上的标记。这两个词汇是Book和Review。访问相关的节,就知道应该使用哪种微数据模式。然后,上面的标记就可以更新为:

尽管现在标记变得更加复杂,但它的意义也更丰富了。你使用的每个词汇用itemtype属性中有关架构的链接来定义,而这些项被标记为预设置的itemprop值。

Schema.org特定架构继承属性的方式很有趣,它能从更广泛的架构中继承属性。例如,“书”有来自自己架构的属性,还有来自更广泛的CreativeWork词汇的属性,以及来自最高阶层Thing(真是个很棒的名称!)的属性。Thing,它具有最通用的属性。

如果我们使用Schema.org模式来对内容进行标记,所有到达该页面的爬网程序就会知道作者和书名,还能知道我们对这本书做了点评,甚至还能知道我们给了它一个五颗星的评级。如果有人搜索这本书,我们的评论就会出现在搜索结果中,与其他人的评论一道,为读者提供了对该书相当全面的概述。

2.6.4 富摘要

这是一种在搜索结果中给予额外信息的方法,它被许多搜索引擎所使用,谷歌把它命名为rich snippets(富摘要)。当用户搜索查询时,富摘要能为用户提供更多上下文,使用户无需切换到网页,就能够更好地评估结果的相关性。图2-3是一个富摘要的示例:

富摘要能与微格式和RDFa一起使用,但其首选的语法是微数据。在Google的网站管理员页面上,有大量的资料和文档可供开发人员使用,其中有一个很有用的工具,它能帮助我们测试微数据的格式是否正确。在图2-4中,我们可以看到使用该工具从在上一节创建的书评中提取出的数据

时间: 2025-01-21 16:24:31

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.6 微数据的相关文章

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 导读

前言 移动网页设计与开发 HTML5+CSS3+JavaScript 我们正处于一个史无前例的网络创新时代.不久前,一家叫微软的公司主宰着网络世界,例如,2003年全球约95%的电脑使用IE浏览器.这种高度统治的优势是:为开发人员提供了一个稳定的市场:但同时也存在严重的缺陷:微软选择了结束IE浏览器的非核心工作,使得网络创新停滞不前--这就是一个缺乏竞争的封闭环境导致的结果. 现在的情形完全不同了,将近四五个主要浏览器厂商,大约相同数量的主要操作系统商,以及更多的团队一直参与其中.Adobe已经

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 第 1 章 网络平台

第 1 章 网络平台 移动网页设计与开发 HTML5+CSS3+JavaScript 在这一章里,我将谈论一些必要的网络技术,一些非常有用的知识,以及多设备网络工作的要求和规定.本章的目的确保我们的起点相同,这是一种比喻-我知道我们现在确实起点相同,因为你正在阅读这段话-但下一章才真正开始涉及技术内容. 如果读者渴望马上学习这些技术,则可以跳过这一章并直接阅读第2章.但我强烈建议读者不要这样做.因为第1章含有一些有趣且实用的背景信息.此外,技术含量较少的内容使我有机会表现我那令人惊叹的幽默感.

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.9 总结

2.9 总结 这一章介绍了一个优秀网站或应用程序的核心功能-基础结构.以正确而有意义的方式来使用标记,不但能为学习本书中所提到的其他知识奠定基础:而且在确保网站的可维护性和可扩展性上,这一点也至关重要. 对于HTML5结构元素,我一直保持中立态度,但无论我们是否使用它,有一点是绝对肯定的,那就是不管处于何种应用环境,我们都应该考虑在项目中使用WAI-ARIA.因为内容的可访问性是网络的基石,就算我们只使用role,我们和我们的用户也会获胜. 此外,我们学习了如何通过语义和结构化数据为网站添加上下

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.3 语义标记的重要性

2.3 语义标记的重要性 在继续探讨如何以不同的方式为页面添加更深层次的丰富含义之前,让我们先停下来问问"究竟为什么要使用语义?"我的意思是,我们通常都使用div元素来标记一个页面,难道这样做在本质上是错误的吗? (例如,使用以下代码块): Divya Manian在一篇辩论性文章"Our Pointless Pursuit of Semantic Value"中也讨论了这个问题.在文章中,她认为,对于大多数人来说,过于强调语义标记就是浪费时间: 标记结构内容,但是

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.5 CSS3及其他

1.5 CSS3及其他 正如HTML5对应HTML4.01一样,CSS3对应的是CSS2.1.CSS3是对一些现有CSS2.1功能进行标准化的进化迭代:因为在不同浏览器中,这些功能的执行会略有差异.另外,在这个网络发展的新时代,网络浏览器可以被嵌入任何设备,所以CSS3还引入了一套全新的功能,使得CSS能符合新时代的要求. 改造浏览器的第一类CSS3功能在很大程度上是视觉效果上的,并且,这些功能基于开发人员已经使用多年的编辑程序:使用任何来源的字体.圆角,并在文本和框上放置阴影.登录之后是一系列

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.4  真正的HTML5

1.4 真正的HTML5 HTML5是HTML4.01的迭代,它在HTML4.01基础上添加了一些新功能,废弃或者删除了几项旧功能,并且对一些现有的功能进行了修改.编写HTML5的目的一是为了规范许多开发人员已使用多年的常见程序编辑和设计模式,二是为了满足现代网络的需求,这是因为,现代网络与应用程序的相关性和它与文档的相关性是一样大的(也可能更大).事实上,Web Applications 1.0是HTML5的前身. HTML5的新功能包括建立可提供含义和可接入性的文档,我会在第2章中介绍.HT

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.2 网页易读性倡议的无障碍的富因特网应用程序组件(WAI-ARIA)

2.2 网页易读性倡议的无障碍的富因特网应用程序组件(WAI-ARIA) 创建网页易读性倡议的无障碍的富因特网应用程序(Accessible Rich Internet Applications)组件(WAI-ARIA)的目的,就是为了解决可访问性的短缺.随着网络超越简单的文档标记,进入一个应用和交互的时代,可访问性短缺就产生了. 下面,我们来看看WAI-ARIA是如何做到这一点的.首先,创建一些HTML扩展(或者,事实上任何基于DOM语言的扩展都可以,例如SVG和XML的扩展):其次,允许开发

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.4 微格式

2.4 微格式 微格式由一群草根开发人员联合创建.通过使用现有属性的标准化标记模式,他们给内容添加上了更多的属性.微格式最大的魅力不在于它是HTML的扩展,而在于它使用当前的开发方法来工作.它既是一种设计原则,也是一组标准用法模式. 微格式多种多样,有相当复杂的微格式,也有极其简单的微格式.下面这个例子,可能是最简单的微格式: 这种微格式被称为Rel-Tag微格式.关键字是rel属性中的tag,它让其他机器知道URL链接到一个在a元素里的页面,这个页面由一个标签来描述,该标签的名称是URL的最后

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.7 数据属性

2.7 数据属性 HTML5扩展元素含义还可以通过另一种方式:使用数据属性.这些都是用户定义的属性,这些属性的值能提供元素的相关信息,而无需给予机器或人类任何额外的语义.接下来,让我们看看更详细的解释. 假设我们想输出一组数据,其中每一项都有两个值-名称和编号 (例如,独特的数据库ID):我们想将名称显示在文档中,还想让编号可以用于脚本运行中.从目前情况来看,没有相关的属性可以用来存储该信息:我们可能不得不使用这样一个类: 创建数据属性的目的,就是为了将数据相关联.数据属性能像类一样,让你存储这