html5摘要,HTML5扩展之微数据

微数据这个词在如今应该已是烂熟于耳了,但是到底什么事微数据?

虽然从事多年html+css方面开发,但限于一直从事传统行业,对html5的发展也仅仅停留在阅读书籍的层面上,更深的一层的挖掘还是较少涉足,今天我们就通过鑫旭大神的文章来慢慢认识一下:

一、微数据是?

机器语言。所谓的机器就是我们经常用的电脑、手机、即一切可浏览我们编写页面的工具;

要让机器明白我们说了什么,我们需要使用规定的标签、属性名以及特定用法等。举个简单例子,我们使用标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO)。

微数据就是为了方便机器识别而产生的东西。其有特定的规范,有特定的格式。可以丰富搜索引擎的网页摘要。

先来看看比较官方的解释:HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论、人物信息或事件。每种信息都描述特定类型的项,例如人物、事件或评论。例如,事件可以包含 venue、starting time、name 和 category 属性。

微数据使用 HTML 标记(常为或 )中的简单属性为项和属性指定简要的描述性名称。

先看个关于微数据的例子,我们要在页面上显示对一个人的描述,HTML代码可能如下:

我的名字是王富强,但大家叫我小强。我的个人首页是:www.example.com我住在上海市富贵新村。我是工程师,目前在财富科技公司上班。

而如果使用针对人物的微数据标记,则HTML会如下:

我的名字是王富强,但大家叫我小强。我的个人首页是:www.example.com我住在上海市富贵新村。我是工程师,目前在财富科技公司上班。

您会发现,HTML代码量多了不少,还出现了很多自定义的属性,如itemscope, itemtype, itemprop等。这些属性就是方面机器识别的特定的标记。其含义等依次如下:itemscope定义一组名值对,称为项。

itemprop=”属性名”添加一个数据项属性。这个属性名可以是个单词或是个URL,与元素包含的文本值相关:

对于大部分元素,属性名值就是元素标签里面的文本值(不是所有标签)。对于有URL属性的元素,该值就是URL(如, , 等)。对于元素,该值就是datetime=""属性。对于, 该值就是content=""属性。

itemref=””允许微数据项通过指向特定ID(含有需要属性的元素)包含非后代属性。

itemtype=””微数据定义的类型。其值为URL,扮演词汇表名称的作用。

itemid=””允许词汇表给微数据项定义一个全局标识符,例如书的ISBN数值,在同样元素上使用itemid作为数据项的itemscope和itemtype属性。

二、微数据语法

itemscope和itemprop先来个小例子:

下周我要去韩红刚家拔萝卜

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

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

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

下周我要去 韩红刚家拔萝卜

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

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

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

上面两个例子,我们可以来个简单的整合,如下:

下周我要去 韩红刚家拔萝卜

将itemprop="name"嵌入在链接之中了。

嵌套项我们可以给包含itemprop的元素添加itemscope插入嵌套项。

五月天主唱是阿信。

定义了一个项,有两个关键字属性:name和members。该name是五月天,members则是嵌套项,包含了一个值为阿信的属性name。注意到members并无文本值。

像上面p标签这种父辈元素没有任何一个微数据项的微数据项称为“顶级微数据项”。微数据API返回的是顶级数据项及其对应的属性,以及其中嵌套的子数据项。

多属性先看例子:

前S˙H˙E 的成员是任家萱,田馥甄和陈嘉桦.

项目可以包含不同值的多个属性。例如上例name属性定义了3个值:任家萱、田馥甄和陈嘉桦。

同一个元素同样也可以有多个属性关键名称(用空格分隔),例如下面这个例子:

志玲姐 是个美女。

“志玲姐”即是名字,又是称谓。

通过itemref页面内引用还是先看个例子吧:

后天我要去看S˙H˙E的演唱会,好兴奋哈!

……S˙H˙E 的成员是任家萱,田馥甄和陈嘉桦.

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

使用meta添加内容如果你想添加的文本并不是页面内容的一部分,你可以在元素上使用content属性:

举个小例子:

钟欣桐摄影爱好者陈老师的粉丝。

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

钟欣桐摄影爱好者陈老师的粉丝。

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

例如,下面这个例子。

后天我要去看S˙H˙E的演唱会,好兴奋哈!

http://schema.org/MusicGroup词汇表中有个名为"name"的关键名称,如下截图:用itemid全局标识有时,某些项需要唯一的标识进行标识。例如书的ISBN数值,我们可以借助itemid属性,如下例子:

三、微数据的力量

我们可能都知道,给元素添加额外的语义东西,可以使用自定义data属性(data-*). 但是,自定义data属性只是纯粹的属性,而微数据有特定的规范,有特定属性名称的词汇表,且更多是服务于现实世界,在这方面是很强大的。

通俗讲,微数据就是在保证页面内容显示良好的情况下清晰而准确地勾勒出了数据的骨架与精髓,可以通过工具、API等进行方便强大的数据交互。

我们都知道,现在流行的数据交换格式是什么?没错,就是JSON。从某种意义上来讲,微数据的本质就是JSON,举个例子就会知道了。

如下HTML下的微数据代码:

WDE-ex Vol.11 — Designingfor iPad: Our experience so far

On July 21st 19:00-20:00 atApple Ginza,Oliver Reichenstein, CEO of iA, will share the lessons they've learned while creating threeiPad apps and one iPad website.

日本,英文不懂没关系,机器也不懂,但是它懂微数据,你也一样。上面微数据的数据本质是什么?很乱,不是吗?但是,如果我们只关注微数据的部分:itemscope, itemprop等,你会发现什么?

我们使用Live Microdata对上面的HTML代码跑一下,会得到下面的JSON数据:

{"items": [{"type": ["http://schema.org/Organization"],"properties": {"url": ["http://www.apple.com/jp/retail/ginza/map/"],"name": ["Apple Ginza"]}},{"type": ["http://schema.org/Person"],"properties": {"url": ["http://informationarchitects.jp/"],"name": ["Oliver Reichenstein"]}}]}

我想,您应该大致明白机器为何可以识别微数据了。由于微数据的这种数据本质特性,在web应用中,我们做一些数据交互的时候,事情就会变得奇妙而轻松。例如,你访问一个你中意的女孩子的个人主页的时候,如果使用微数据,就可以自动把她的一些信息啊联系方式啊什么的放到你的通讯录中,是不是很赞!或是在你的日历表中添加一些需要完成的事件等等。很多真实世界的应用与web应用有了更为轻松强大的结合。

四、一些词汇表介绍

这里提及的微数据词汇表有三:schema.org词汇表,Google丰富摘要词汇表(www.data-vocabulary.org),WHATWG/microformats.org词汇表。

我大致看了这几个词汇表,大致提点部分提纲性质内容。

事件(Events)schema.org/Event vocabulary — http://schema.org/Eventhttp://www.google.com/support/webmasters/bin/answer.py?answer=164506 — http://www.data-vocabulary.org/Event/vEvent — http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#vevent人物(Person)schema.org Person — http://schema.org/PersonvCard — http://microformats.org/profile/hcardRich Snippets Person — http://data-vocabulary.org/Person组织或业务(Organisation or business)schema.org Organization — http://schema.org/OrganizationvCard (using fn org) — http://microformats.org/profile/hcardRich Snippets Organization — http://data-vocabulary.org/Organization日历(Calendar)schema.org Event — http://schema.org/EventvEvent — http://microformats.org/profile/hcalendar#veventRich Snippets Event — http://data-vocabulary.org/Event预览(Review)schema.org Review — http://schema.org/Reviewschema.org AggregateRating — http://www.schema.org/AggregateRating (跟丰富摘要itemtype不同)hReview — http://microformats.org/wiki/hreviewRich Snippets Review — http://data-vocabulary.org/ReviewRich Snippets Review-aggregate — http://www.data-vocabulary.org/Review-aggregate许可证(License)Licensing works — http://n.whatwg.org/work产品和服务(Products and services)schema.org Product — http://schema.org/ProductThis can be extended with productontology.org descriptions (example)hProduct — http://microformats.org/wiki/hproductGoodRelations Product — http://purl.org/goodrelations/ (例如via UPS)Rich Snippets Product — http://data-vocabulary.org/ProductAtom提要(Atom feed)hAtom — http://microformats.org/wiki/hatom食谱(Recipes)schema.org Recipe — http://schema.org/RecipehRecipe — http://microformats.org/wiki/hrecipeRich Snippets Recipe — http://data-vocabulary.org/Recipe

Google丰富摘要词汇支持微格式和RDFa这是除了微数据之外其他两个增加内容语义的方法。除了这种差异外,基本上与http://schema.org是想匹配的,除非他们在itemtype中使用http://www.data-vocabulary.org代替http://schema.org。尽管google仍然支持这类词汇,但是最新的http://schema.org提供了更多的词汇,这些词汇还被Bing和Yahoo支持,因此在选择微数据上http://schema.org可以让你笑得更久。不过您可能仍然希望签出“富文档摘要”,因为它们代码更简单,书写的时候要比http://schema.org来得更好。

五、浏览器支持微数据浏览器支持情况(截止2011年8月16日)BrowserSupportChromeSafariFirefox进行中...Opera最快版本12.00-1033Internet Explorer

虽然浏览器目前对微数据的支持基本上就是大鸭蛋,但是,由于搜索引擎还有一些三方工具都鸟他,微数据目前还是很有应用价值的。例如Bing, Google, 以及Yahoo使用http://schema.org词汇表定义的微数据显示搜索结果(特定格式的搜索结果,即将展示)。

六、丰富网页摘要应用

先看国内应用微数据的实例。

我们打开谷哥哥,输入“香口鱼”,轻轻地回车,稍等片刻,得到下面截图:

我们对比可以发现,大众点评网搜索显示的样子跟下面的芸芸结果不一样,有评分显示,评论数,日期等。怎么回事?莫非点评给Google塞了很多票子。非也,我们点击链接进入该页面,右键查看源代码,就会发现如下代码:

上面截图各种标注的部分就是本文多次出现了微数据特有的关键属性,名称等。也就是说,点评的搜索结果的显示之所以不同,是因为其应用了HTML5之微数据,使用的词汇表是相对简单的Google丰富网页摘要词汇表中的。

关于具体怎么使用,Google提供了详尽的使用示例(包括代码展示),而且是中文版的。就是上面这段末尾的链接。我想我没有必要重复详述。不过,有些同行可能就是单纯地感兴趣,不想跳来跳去,我还是依葫芦画瓢,做了个很简单的微格式应用例子。

您可以狠狠地点击这里:微数据示例之评论demo

其实demo没有什么好看的,人眼所见,并非机器所见,Google提供了一个丰富摘要测试的工具(仍测试阶段):Rich Snippets Testing Tool。

例如上面测试结果您可以狠狠地点击下面这个链接查看:微数据评论之丰富网页摘要测试

是否有所启发呢?想让您的网页在Google,或是Bing下面的展示丰富而与众不同吗?微数据,就是你的选择!!

本文转自:HTML5扩展之微数据与丰富网页摘要 " 张鑫旭-鑫空间-鑫生活

HTML5_百度百科 - Baidu BaikeHTML5快速入门(一)—— HTML简介 - 简书 - jianshu.comhtml5快速入门(一)—— html简介 - 爱码网HTML5基础,第1部分:初试锋芒_知识库_博客园 - cnblogs.comHTML5的优势 - CSDN基于HTML5技术企业网站设计__精选五篇_好文网响应式Web设计 : HTML5和CSS3实战_百度百科Bēniaǒ - 博客园一步步教你用HTML5 SVG实现动画效果 - SegmentFaultAndroid实现HTML5 video视频摘要算法综述 ==》Video Synopsis元胞自动机简介【算法大杂烩】常见算法的归类和总结——消息摘要算法【自然语言处理】Text Summarization文本摘要与注意力机制Subline text3安装插件——(HTML5、Emmet)文本摘要(text summarization)四: 主题模型(LDA、LSI、NMF,topic-base)崛起中的九大HTML5开发工具【简洁易懂精品贴】html5 网页课程设计(一)STM32F1做RSA,AES数据加解密,MD5信息摘要处理数据摘要算法介绍(SHA、MD5和CRC32)淘宝HTML5版私钥泄漏使用APICloud编写优雅的HTML5代码《二》:ajax、文件上传如何使用HTML5创建在线精美简历如何在XENDESKTOP7中启用RECEIVER FOR HTML5,允许支持HTML5的浏览器访问虚拟桌面RSA数据摘要+数字签名(Java)HTML5移动开发学习笔记】01-CH1-CH3-HTML5新元素《关注HTML5安全》基于 HTML5 的校园网站移动平台 web 页面设计HTML5 video一个基于HTML5的虚拟实验室《JavaFX应用程序添加HTML内容》-支持HTML5特性Html5的局: 手把手写一个100行的VR程序Global Encoding for Abstractive Summarization (ACL 2018) 论文代码复现——生成式文本摘要甘特图详解后盾网html5视频教程全集观看下载消息摘要算法简介HTML5开发者心声:浏览器兼容性成最大问题MMR自动摘要 python实现
欧洲杯是国家之间比赛还是俱乐部之间比赛鼻小柱延长多久变形全球被翻译最多的书籍是什么2015年垃圾处理项目舆情研究报告突然头晕呕吐是什么原因无缘无故恶心想吐怎么回事每日好店坚持做有效引流停不下来淘宝每日好店是淘宝随机抓取的还是在我的世界中用最难的方法建造航空母舰尿道棒的初级玩法数值计算上机操作答案数值计算方法实验报告武侠爱情玄幻小说感情线丰富的玄幻小说你的胸襟宽广到能装下什么?兰桐花开大坝塌了是第几集六字大明咒鬼被召来了女孩说把我当好朋友女生只把你当朋友空军军医大学分数线空军医科大学国服塞拉摩的沦陷将于9月25日开始吉安娜辛苦建立的塞拉摩被炸毁吉安娜黑化