- 浏览: 7862666 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
这个对SEO等网站的优化是个好事呀,GOOGLE已经支持了
http://www.mxria.com/html5/h20120214873.htm
最近学习了一下WHATWG网站中关于微数据的内容,microdata对于普通用户而言,可能不显得如何重要,但对于搜索引擎,它的应用将带来机器语言分析的极大便利。这将意味着,搜索引擎将能更智能、准确地识别网站内容,在语义层面上给出用户最期望看到的结果。对于网站制作者而言,提高搜索引擎对内容的识别程度,一方面是一种SEO手段,另外也可以改善用户体验。目前Google已经提供了相应的测试工具并在google搜索引擎中支持microdata的应用。下面看一段搜索结果的截图,图中颜色标出的部分是重点。
1.如何理解微数据的用途
我们可以理解所谓微数据,就是网页中特别定义的一个“名称name-属性值value”组合。这种组合我们称之为"项"(items)。在HTML中,有一个itemscope 属性是用来描述items项的。下面就是一段实际例子
<div itemscope>
<p>网站名称 <span itemprop="name">美瑞网</span>.</p>
</div>
<div itemscope>
<p>网站标题名称 <span itemprop="name">HTML5、CSS3等WEB开发技术分享网站</span>.</p>
</div>
假定没有使用微数据,上面的代码是这样的:
<div >
<p>网站名称 <span >美瑞网</span>.</p>
</div>
<div >
<p>网站标题名称 <span >HTML5、CSS3等WEB开发技术分享网站</span>.</p>
</div>
这对于浏览网页的人而言,是否使用microdata没有任何区别,用户看到的结果是一样的。但对于机器识别例如搜索引擎而言,使用了微数据的网页代码则提供了更加丰富的信息。搜索引擎通过相应的schema规范,就能理解Name所代表的确切含义,从而提取被标识的内容。简单的例子,加入将itemprop中的name换为address,那么搜索引擎就可以知道这里的内容描述的是地址,具备特定的含义。经过这么处理后,我们网站中的信息将被更加准确的采集和分类处理,从而为更加深入的数据分析和数据挖掘提供了最基本的指引。
2.微数据项Items的几种表现方式
原则上,HTML中的每个标签都可以定义成为相应的items,只需加上itemscope和itemprop属性即可。在实际应用时,考虑到机器语言和人类语言之间理解方式的差异性,应用时我们有多种选择。
如果是类似img图像标签,a链接标签,src和href的内容是value值的内容,在微数据中会自动获取内容值。
<div itemscope>
<img itemprop="image" src="googlelogo.png" alt="Google Logo">
</div>
如果希望用户看到的内容和搜索引擎关心的内容不一样,则可以采用value值得方式。例如用户看到度娘刘冬最红的消息,而实际希望传递给搜索引擎的信息是最火热事件排名索引id,我们就可以采用如下方式:
<h1 itemscope>
<data itemprop="hot-id" value="898ML001">度娘刘冬最红</data>
</h1>
如果希望在微数据中标记特殊时间,我们可以采用time标签。例如:最近非常喜爱的歌手惠特尼.休斯顿逝世,沉痛哀悼做个网站纪念。在她的生平介绍网站里标记生死日期
<div itemscope>
惠特尼.休斯顿:<time itemprop="birthday" datetime="1964-02-13">1964年二月十三日</time>--<time itemprop="deathday" datetime="2012-02-13">2012年二月十一日</time>.
</div>
如果希望在微数据中标记多个属性值得items,可以使用多个name-value组合,其中name属性一样。例如:喜欢的歌星名字
<div itemscope>
<p>最喜欢的歌星:</p>
<ul>
<li itemprop="flavor">奶茶刘若英</li>
<li itemprop="flavor">天王刘德华</li>
</ul>
</div>
如果希望在微数据中描述层次结构的数据集,itemscope同样支持树状层次节点的数据类型。例如汽车类网站中可以采用下面的方式进行组织。我喜欢乘坐的交通工具是家用轿车雪佛兰,科鲁兹的1.8L
<div itemscope>
<p>Name: <span itemprop="name">雪佛兰</span></p>
<p>Band: <span itemprop="band" itemscope> <span itemprop="name">科鲁兹</span> (<span itemprop="size">1.8L</span> players)</span></p>
</div>
大家看到这里,这样的表现方式是不是感觉似曾相识?是的,跟xml的组织方式完全一致。XML经过了多年的发展,一致未能在网页中得到广泛的应用,但在文档应用格式上,xml是当仁不让的最佳选择。如今,微数据正是将xml曲线引入web规范中的一个变革,目前规范尚不成熟,我们拭目以待,相信不久的将来,这种变化将带给网页信息整理和数据分析领域的巨大创新。
3.DOM中如何应用微数据模型
支持微数据的DOM API中提供了getItems这个方法处理微数据。document.getItems(typeNames) 提供了访问网页中顶层微数据集合的功能,采用document.getItems就可以获得网页中一个items的集合,items项的类型可以使用element.itemType 获得。例如下面的代码展示了我们如何在DOM模型中处理items
var user = document.getItems('http://example.net/user')[0];
alert('Hello ' + user.properties['name'][0].itemValue + '!');
上面的一切看上去都非常完美,在普通的网页中也可以实现类似XML格式化的数据,操作这些数据也非常简单,微数据的发展值得期待!目前google已经支持微数据的应用,但baidu尚未有证据表明支持微数据。本文开头大众点评网的应用实例代码如下,大家可以学习学习。
<div class="shop-name">
<h1 class="shop-title" itemprop="name itemreviewed">贵州菜</h1><span><a class="subbranch J_pop-login" onclick="pageTracker._trackPageview('dp_shop_caozuo_tianjiafendian')" href="/addshop/1_10/id=5139338" title="添加分店">添加分店</a></span>
</div>
<div class="comment-rst">
<span title="该商户暂无星级" class="item-rank-rst irr-star0" itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<meta itemprop="rating" content="0">评分:该商户暂无星级</span>
<a onclick="pageTracker._trackPageview('dp_shop_dianpingshu');" class="count" href="#user-review-info">
<span itemprop="count">2</span>封点评</a>
下面的内容是来自google网站站长工具帮助的内容,以便大家更深刻的理解微数据格式。
更多参考信息:http://support.google.com/webmasters/bin/answer.py?hl=zh-Hans&answer=176035
http://www.mxria.com/html5/h20120214873.htm
最近学习了一下WHATWG网站中关于微数据的内容,microdata对于普通用户而言,可能不显得如何重要,但对于搜索引擎,它的应用将带来机器语言分析的极大便利。这将意味着,搜索引擎将能更智能、准确地识别网站内容,在语义层面上给出用户最期望看到的结果。对于网站制作者而言,提高搜索引擎对内容的识别程度,一方面是一种SEO手段,另外也可以改善用户体验。目前Google已经提供了相应的测试工具并在google搜索引擎中支持microdata的应用。下面看一段搜索结果的截图,图中颜色标出的部分是重点。
1.如何理解微数据的用途
我们可以理解所谓微数据,就是网页中特别定义的一个“名称name-属性值value”组合。这种组合我们称之为"项"(items)。在HTML中,有一个itemscope 属性是用来描述items项的。下面就是一段实际例子
<div itemscope>
<p>网站名称 <span itemprop="name">美瑞网</span>.</p>
</div>
<div itemscope>
<p>网站标题名称 <span itemprop="name">HTML5、CSS3等WEB开发技术分享网站</span>.</p>
</div>
假定没有使用微数据,上面的代码是这样的:
<div >
<p>网站名称 <span >美瑞网</span>.</p>
</div>
<div >
<p>网站标题名称 <span >HTML5、CSS3等WEB开发技术分享网站</span>.</p>
</div>
这对于浏览网页的人而言,是否使用microdata没有任何区别,用户看到的结果是一样的。但对于机器识别例如搜索引擎而言,使用了微数据的网页代码则提供了更加丰富的信息。搜索引擎通过相应的schema规范,就能理解Name所代表的确切含义,从而提取被标识的内容。简单的例子,加入将itemprop中的name换为address,那么搜索引擎就可以知道这里的内容描述的是地址,具备特定的含义。经过这么处理后,我们网站中的信息将被更加准确的采集和分类处理,从而为更加深入的数据分析和数据挖掘提供了最基本的指引。
2.微数据项Items的几种表现方式
原则上,HTML中的每个标签都可以定义成为相应的items,只需加上itemscope和itemprop属性即可。在实际应用时,考虑到机器语言和人类语言之间理解方式的差异性,应用时我们有多种选择。
如果是类似img图像标签,a链接标签,src和href的内容是value值的内容,在微数据中会自动获取内容值。
<div itemscope>
<img itemprop="image" src="googlelogo.png" alt="Google Logo">
</div>
如果希望用户看到的内容和搜索引擎关心的内容不一样,则可以采用value值得方式。例如用户看到度娘刘冬最红的消息,而实际希望传递给搜索引擎的信息是最火热事件排名索引id,我们就可以采用如下方式:
<h1 itemscope>
<data itemprop="hot-id" value="898ML001">度娘刘冬最红</data>
</h1>
如果希望在微数据中标记特殊时间,我们可以采用time标签。例如:最近非常喜爱的歌手惠特尼.休斯顿逝世,沉痛哀悼做个网站纪念。在她的生平介绍网站里标记生死日期
<div itemscope>
惠特尼.休斯顿:<time itemprop="birthday" datetime="1964-02-13">1964年二月十三日</time>--<time itemprop="deathday" datetime="2012-02-13">2012年二月十一日</time>.
</div>
如果希望在微数据中标记多个属性值得items,可以使用多个name-value组合,其中name属性一样。例如:喜欢的歌星名字
<div itemscope>
<p>最喜欢的歌星:</p>
<ul>
<li itemprop="flavor">奶茶刘若英</li>
<li itemprop="flavor">天王刘德华</li>
</ul>
</div>
如果希望在微数据中描述层次结构的数据集,itemscope同样支持树状层次节点的数据类型。例如汽车类网站中可以采用下面的方式进行组织。我喜欢乘坐的交通工具是家用轿车雪佛兰,科鲁兹的1.8L
<div itemscope>
<p>Name: <span itemprop="name">雪佛兰</span></p>
<p>Band: <span itemprop="band" itemscope> <span itemprop="name">科鲁兹</span> (<span itemprop="size">1.8L</span> players)</span></p>
</div>
大家看到这里,这样的表现方式是不是感觉似曾相识?是的,跟xml的组织方式完全一致。XML经过了多年的发展,一致未能在网页中得到广泛的应用,但在文档应用格式上,xml是当仁不让的最佳选择。如今,微数据正是将xml曲线引入web规范中的一个变革,目前规范尚不成熟,我们拭目以待,相信不久的将来,这种变化将带给网页信息整理和数据分析领域的巨大创新。
3.DOM中如何应用微数据模型
支持微数据的DOM API中提供了getItems这个方法处理微数据。document.getItems(typeNames) 提供了访问网页中顶层微数据集合的功能,采用document.getItems就可以获得网页中一个items的集合,items项的类型可以使用element.itemType 获得。例如下面的代码展示了我们如何在DOM模型中处理items
var user = document.getItems('http://example.net/user')[0];
alert('Hello ' + user.properties['name'][0].itemValue + '!');
上面的一切看上去都非常完美,在普通的网页中也可以实现类似XML格式化的数据,操作这些数据也非常简单,微数据的发展值得期待!目前google已经支持微数据的应用,但baidu尚未有证据表明支持微数据。本文开头大众点评网的应用实例代码如下,大家可以学习学习。
<div class="shop-name">
<h1 class="shop-title" itemprop="name itemreviewed">贵州菜</h1><span><a class="subbranch J_pop-login" onclick="pageTracker._trackPageview('dp_shop_caozuo_tianjiafendian')" href="/addshop/1_10/id=5139338" title="添加分店">添加分店</a></span>
</div>
<div class="comment-rst">
<span title="该商户暂无星级" class="item-rank-rst irr-star0" itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<meta itemprop="rating" content="0">评分:该商户暂无星级</span>
<a onclick="pageTracker._trackPageview('dp_shop_dianpingshu');" class="count" href="#user-review-info">
<span itemprop="count">2</span>封点评</a>
下面的内容是来自google网站站长工具帮助的内容,以便大家更深刻的理解微数据格式。
更多参考信息:http://support.google.com/webmasters/bin/answer.py?hl=zh-Hans&answer=176035
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 765刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 485三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1488http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 777https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1660即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 968不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 2982参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 92721. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 609http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 815http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9591 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 556虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 529【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1391https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 782深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 914(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1116https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3126http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1530canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 535http://www.ruanyifeng.com/blog/ ...
相关推荐
在浏览器中提取HTML5微数据的模块 兼容性 微数据使用 ,这是选择器引擎的包装。 如果不将选择器引擎插入其中,则默认为querySelector / querySelectorAll。 有关更多信息,请参见 。 安装 $ npm install --save ...
有关HTML5微数据的更多信息,请参阅有关Mark Pilgrim的。 命令行 当您通过pip安装microdata.py时,它也会在命令行上可用: % microdata.py http://www.wdl.org/en/item/1/ 这将打印出从提供的URL中提取的项目的...
- Microformats and Microdata - Working with HTML5 Drag-and-Drop Functionality - HTML5 Links III)HTML5 for Mobile and Web Applications - Web Application APIs and Datasets - WebSockets, Web Workers, ...
HTML5微数据测试工具要查看此工具的实际效果,请访问 。 编写该工具是为了帮助调试和浏览HTML5微数据。 要使用此工具,只需在包含库后包含脚本即可。 当您查看页面时,将在左下方显示一个列表,列出该页面上检测到的...
微数据 微数据解析器。 基于PhilipJägenstedt的microdatajs中的测试的测试。安装 npm install @smhg/microdata用法 import { parse } from 'microdata' ;let microdata = parse ( '<html><!-- ... -->&...
Canvas对象你的画布HTML5网页设计初窥系列课程(6):扩展图形标记HTML5网页设计初窥系列课程(7):HTML5中的地理应用HTML5网页设计初窥系列课程(8):独立数据存储HTML5网页设计初窥系列课程(9):新的网络连接技术HTML5...
转自CCF,网址:...讨论在微数据(Microdata)发布和联机分析处理(OLAP)两种场景下,数据发布中的隐私保护方法。最后探讨面向隐私保护的数据挖掘和数据发布方法的评价体系。
描述RDF :: Microdata是使用库套件的Ruby数据读取器。特征RDF ::微观数据分析到报表或使用中定义的规则三元 。 微数据解析器。 使用Nokogiri解析HTML 如果可用, gem用于具有更好错误检测功能的纯HTML5解析器。 使用...
Schema.org微数据示例 使用Schema.org微数据HTML结构化数据标记的一些示例,请参阅 。
Get the truth on HTML5's markup here. You'll also find out about HTML5's new microdata standard that's being used on major websites, such as eBay and IMDB, right now, and get the low-down on the ...
前端开源库-rdf-parser-microdataRDF解析器Microdata,遵循RDF接口规范的Microdata解析器
微数据到RDF 将微数据内容提取/转换为RDF的规范。
微数据 安装 npm install elixirhub/microdata 如何使用 var microdata = require ( 'microdata' ) ; var url = 'http://elixir-europe.org/events/' ; // without URL var result = microdata . parse ( html ) ; ...
A handy guide to understanding Microdata, the new JavaScript APIs, and the new form elements in HTML5 and CSS3 along with transition, transformation, and animation using lucid code samples Overview ...
它受MicrodataJS的启发,而MicrodataJS受本地Microdata DOM API的启发。 使用示例: require 'vendor/autoload.php'; use linclark\MicrodataPHP\MicrodataPhp; $url = 'http://example.com'; $md = new ...
HTML5微数据提取器这是将公开为运行中的Web服务所需的最低要求本地运营pipenv install pipenv run gunicorn microdata_extractor.wsgi:application部署方式码头工人docker build -t microdata-extractor ....
一本很好的HTML5开发的教程 Browser support: What you can (and can’t) do with HTML5 today HTML5 document structure and semantics Intelligent forms, including new input types, elements, and client-side ...
测试微数据在MicroData上测试Delphi Developer ->创建数据库以及客户和联系人表->创建脚本以为客户端插入1条记录,为“联系人”插入3条记录> ->创建触发器以增加“客户”和“联系人”表的“ ID” ->创建触发器以从...
关于RDC的详细信息Microdata应用程序主题:主题:主题:主题: 2019年12月/가계동향조사/자료를사용하여 步骤1:在屏幕上显示확정조로부터의부터의보 步骤2:부정적오염자에게로확로확보 步骤3:가가하여기본소...
此扩展名将解析当前加载的页面,并在该页面包含HTML微数据(绿色)时在浏览器地址栏中显示一个图标。 通过单击该图标,将显示一个弹出窗口,显示微数据的表格视图,类似于Google的Rich Snippets工具。 用户还可以...