Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > 详解 HTML5 微数据的嵌套项、多属性、itemref、meta、itemid

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

    HTML5 herman 3996浏览 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

    相关文章推荐