HTML5 扩展之微数据语法教程

HTML5 herman 1070浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

继续前面的微数据实例我们接着往下学习!附上前面微数据的文章《HTML5 微数据 RDFa/微格式》。

在学习了微数据的概念和格式之后,我们已经对微数据有了初步的了解。下面我再贴几个截图,进一步加深大家对微数据的理解。

HTML5 微数据 丰富网页内容

HTML5 微数据 优化网页后 搜索引擎展现效果

HTML5 微数据 优化网页后 搜索引擎展现效果

看完效果后,我们来继续微数据的语法!

微数据的语法

微数据的最外层 div ,需要用 itemscop 标识,并用 itemtype 指定微数据类型, itemtype 的值是一个 url ,用于引入一个微数据词汇表(即各种微数据的类型定义),可以使用 http://schema.org 或是 http://data-vocabulary.org ,具体的微数据类型可以参考上面两套微数据词汇表。

在用 itemscop 标识了的元素内使用 itemscope 属性添加微数据,itemscope 的值为 HTML 标签包含的内容(如例子中的 reviewer 和 description ),又或是标签的属性值(如例子中的 dtreviewed,取 datatime 的值为属性值)。

在微数据中,下面的元素以它们的URLs为值:

<a href="">
<area href="">
<audio src="">
<embed src="">
<iframe src="">
<img src="">
<link href="">
<object data="">
<source src="">
<video src="">

相反,以下HTML5元素URL包含属性不作为属性值使用

<base href="">
<script src="">
<input src="">

再来看一个itemscope和itemprop的小例子

<p itemscope>下周我要去<span itemprop="name">业余草</span>家吃饭</p>

<p>元素上的itemscope使其成为了一个微数据项,其子元素上itemprop属性的值name为词汇表中的一个关键属性。一个微数据项至少有一个验证的itemprop.

itemprop后面的名称可以是单词,也可以是URL,使用URL让这个名称全局唯一。如果使用单词的话,最好使用词汇表,这个单词在该词汇表中有定义,同样可以让名称唯一。

itemprop 值用法

对于一些元素,itemprop值来自元素的属性,像是datetime属性或是content属性。还是吃饭的例子:

<p itemscope><time itemprop="date" datetime="2017-03-24">下周</time>我要去 <a itemprop="url" href="http://www.xttblog.com">业余草</a>家吃饭</p>

定义了两个itemprop下的属性值url和date,所包含的值就是一个url地址(不是元素内的文本值韩红刚)和一个特定格式的时间。

关于 微数据 本章只是讲解了简单的用法,关于 微数据 的嵌套项、多属性、itemref页面内引用、meta添加内容、项类型、itemid全局标识我们下章继续!

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5 扩展之微数据语法教程