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

简介:

本节书摘来异步社区《移动网页设计与开发 HTML5+CSS3+JavaScript》一书中的第2章,第2.6节,作者:【英】Peter Gasston,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.6 微数据

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

59236a375438b6c1b9208c98a48b2fcb6ff512e8

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

6f7907ebf053ebd1353d5432fa01d7aacf4ddea1

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

c3a59e4636c3ec93fd4c54db8d621dec76734b33

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

fae42b2e5e79c15121e17889ca246256025bb443

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

5d3792e08b161160555f4184205403853fe77e69

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

68c29a714930f45ceae42d0761b776b055d6b24c

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

2.6.1 微数据API

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

668b1861c5c04b42e22b0792cdfde6b429a349a6

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

109f5d64656fa0cb9d27806b3287b3d92e0c869e

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

49845e0a4ff9547670cfe6ecd06c3172e0de702b

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

029bc97ad43ae47f098abfd72e8f5dc5b698598e

2.6.2 微数据、微格式和RDFa

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

f12915e6fa8eb344f9d312a4e7781d9ec4479232

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

f704d550b805cc5313c2eb5df022f3e46ba89494

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

2.6.3 Schema.org

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

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

dabe33a253e84b8a64a6182b06d7cf17ba841ff4

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

e820be8cafb299cda570e73e0e02221d687af2e3

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

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

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

2.6.4 富摘要

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

bff7da969a7f022c559d64673c394c3eb0aec1fb

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

d442f97f63b68c4f54a3000b0071f8ba0347427b
相关文章
|
3月前
|
开发框架 JavaScript 前端开发
精选HTML、JavaScript、ASP代码片段集锦
这些代码片段代表了HTML, JavaScript和ASP的基本应用,可被集成到更复杂的项目中。它们注重实用性,并且易于理解,旨在帮助开发者快速开始项目构建或进行学习。尽管ASP不如其他服务器端技术(如Node.js, PHP, Ruby等)现代,但它在遗留系统中仍非常普遍,了解基础仍具有价值。
142 14
|
5月前
|
人工智能 前端开发 JavaScript
【CodeBuddy】三分钟开发一个实用小功能之:CSS代码瘦身专家
本文展示了AI编程从概念到实践的革命性突破,以一个CSS代码优化工具为例,说明AI如何在3分钟内完成传统开发需2天的任务。文章详细解析了AI在垂直领域工具开发、高频技术场景覆盖及代码维护优化中的应用,并探讨了智能上下文感知、模式识别优化等核心功能。同时,面对语义理解与逻辑验证等挑战,AI结合开发者补充规则,实现人机协同。最终总结指出,AI编程并非取代开发者,而是助力效率提升,推动“需求即代码”的未来方向,开启软件开发新纪元。
111 4
【CodeBuddy】三分钟开发一个实用小功能之:CSS代码瘦身专家
|
5月前
|
人工智能 前端开发 JavaScript
【CodeBuddy】三分钟开发一个实用小功能之:CSS渐变背景生成器
这是一个由AI生成的完整CSS渐变生成器项目,具备可视化交互、实时预览和代码生成功能。通过HTML、CSS和JavaScript实现,支持线性与径向渐变,提供随机生成和复制代码功能。项目展示了AI编程助手在快速原型开发、教学辅助和设计系统集成中的应用价值。其智能上下文感知、全链路代码生成和决策能力,为开发者提供了高效工具支持,助力从样板代码中解放创造力。附带优化方向如增强渐变类型、智能推荐系统及工程化改进,进一步拓展了应用场景。
100 2
【CodeBuddy】三分钟开发一个实用小功能之:CSS渐变背景生成器
|
9月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
405 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
232 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
9月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
242 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
9月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
476 33
|
8月前
|
数据采集 前端开发 API
SurfGen爬虫:解析HTML与提取关键数据
SurfGen爬虫:解析HTML与提取关键数据
|
10月前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
372 2
利用 html_table 函数轻松获取网页中的表格数据
|
10月前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
139 13

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 7
    React 中如何安装与使用 Tailwind CSS
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 9
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation