Java基础、中级、高级、架构面试资料

详解 HTML5 微数据的嵌套项、多属性、itemref、meta、itemid

HTML5 herman 3187浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog2,发送下载链接帮助你免费下载!
本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领
腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云

继续前面两篇 HTML5 微数据 的介绍和语法学习。附上前面两篇文章的地址:HTML5 微数据 RDFa/微格式HTML5 扩展之微数据语法教程

本篇文章将深入的学习 微数据 的嵌套项、多属性、itemref页面内引用、meta添加内容、项类型、itemid全局标识。

微数据的嵌套项

前面的例子都是使用的单语法格式。下面我们将学习一个微数据的嵌套用法。我们可以给包含itemprop的元素添加itemscope插入嵌套项。

<p itemscope>
	<span itemprop="name">业余草</span>的站长是
	<span itemprop="members" itemscope>
		<span itemprop="name">涛哥</span>。
	</span>
</p>

定义了一个项,有两个关键字属性:name和members。该name是五月天,members则是嵌套项,包含了一个值为阿信的属性name。注意到members并无文本值。
像上面p标签这种父辈元素没有任何一个微数据项的微数据项称为“顶级微数据项”。微数据API返回的是顶级数据项及其对应的属性,以及其中嵌套的子数据项。

微数据的多属性

继续配合一个例子来讲解。

<span itemprop="members" itemscope>业余草主要提供的技术文章有
  <span itemprop="name">JAVA</span>,
  <span itemprop="name">数据库</span>,
  <span itemprop="name">HTML5</span>和
  <span itemprop="name">C++</span>.
</span>

项目可以包含不同值的多个属性。例如上例name属性定义了3个值:任家萱、田馥甄和陈嘉桦。
同一个元素同样也可以有多个属性关键名称(用空格分隔),例如下面这个例子:

<p itemscope>
	<span itemprop="name call">业余草涛哥</span>是个帅哥。
</p>

微数据的 itemref页面内引用

先看下面的例子:

<p itemscope itemref="band-members">我每天都要阅读
	<span itemprop="name">
		业余草
	</span>
的技术博客文章!</p>
……
<span id="band-members" itemprop="members" itemscope>业余草主要提供的技术文章有
  <span itemprop="name">JAVA</span>,
  <span itemprop="name">数据库</span>,
  <span itemprop="name">HTML5</span>和
  <span itemprop="name">C++</span>.
</span>

上面的定义通过引用ID band-members包含了members项的三个成员名称属性,每个都是不一样的值。

微数据使用meta添加内容

如果你想添加的文本并不是页面内容的一部分,你可以在<meta>元素上使用content属性:<meta itemprop="" content="">看下面的小例子:

<p itemscope>
	<span itemprop="name" itemscope>
		涛哥<meta itemprop="likes" content="业余草作者">
	</span>热爱开源技术学习文章撰写。
</p>

不会,有些遗憾的是,某些浏览器会自动把<meta>元素移动到head标签中。比较靠谱的做法是使用itemref做页面内引用,这样即使浏览器移除了,一些工具啥的还是能够识别出微数据。具体做法如下:

<p itemscope>
	<span itemprop="name" itemscope itemref="meta-likes">
		钟欣桐<meta id="meta-likes" itemprop="likes" content="twins成员">
	</span>摄影爱好者陈老师的粉丝。
</p>

微数据项类型(itemtype)及全局唯一名字

通过itemtype,我们可以给微数据项指定一种类型,这个属性需要使用在含itemscope的元素上。itemtype的值是个URL地址,代表了微数据使用的词汇。请注意,这个地址只能是文本字符串,用来唯一标示词汇表,同时,该地址不一定非要指向真是的网页地址(当然,指向最好了)。这样我们就可以使用词汇表中的name名称作为itemprop名称做些定义了。看下面的例子:

<p itemscope itemtype="http://xttblog.com/">后天我要去看
	<span itemprop="name">S˙H˙E</span>的演唱会,好兴奋哈!
</p>

http://xttblog.com/词汇表中有个名为"name"的关键名称,如下截图: 

微数据 项类型(itemtype)

微数据的itemid全局标识

有时,某些项需要唯一的标识进行标识。例如书的ISBN数值,我们可以借助itemid属性,如下例子:

<p itemscope itemtype="http://book.codedq.net"
  itemid="urn:isbn:0321687299">
  <!-- 书信息… -->
</p>

到这里微数据的相关知识学习完了,下章我们将做一下总结和在扩展。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号:xttblog2。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

本文原文出处:业余草: » 详解 HTML5 微数据的嵌套项、多属性、itemref、meta、itemid