- 浏览: 7960402 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (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 840刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 565三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1578http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 834https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1709即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 1021不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 3041参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 93581. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 653http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 854http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 10161 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 604虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 580【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1439https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 830深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 1007(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1157https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3164http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1608canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 586http://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中提取的项目的...
Microdata是HTML5引入的一种元数据嵌入方式,使得网页内容可以被搜索引擎、浏览器插件和其他工具解析,以提取丰富的结构化信息。例如,它可以用来标记产品信息、事件、人员资料等,提高网站的可发现性和互动性。 `...
微生物数据的流动是从WHONET5系统开始,经过一系列转换,最终到达Microdata平台的过程。WHONET5是一种广泛应用于临床微生物学实验室的数据管理系统,它能够收集、存储和分析微生物学测试结果,包括但不限于抗生素...
**微数据(Microdata)与RDF:关联数据的基础** 微数据是一种在HTML文档中嵌入结构化数据的方法,使得搜索引擎、浏览器和其他Web服务能够更好地理解网页内容。它通过使用特定的属性和类来标记HTML元素,使得这些...
在压缩包`schema-microdata-examples-main`中,可能包含了一系列使用Schema.org微数据的实际HTML示例,涵盖了如文章、事件、地点、产品等多个主题。通过查看这些示例,你可以看到如何将微数据应用于不同类型的页面,...
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...
- **2013年**:W3C正式宣布HTML5规范正式定稿。 - **2022年**:HTML5最终版正式发布。 #### 三、HTML5的关键特性 1. **语义化标签**:HTML5引入了一系列新的标签,如`<article>`、`<aside>`、`<section>`等,这些...
- **Microdata**:一种简单的、用于嵌入机器可理解的数据的语法,有助于搜索引擎理解和展示内容。 - **HTML+RDFa**:RDFa(Resource Description Framework in Attributes)是一种标准,用于将语义元数据添加到HTML...
9. Microdata和Schema.org:Microdata是一种标记数据的方式,用于增加网页的语义。与Schema.org结合使用,可以帮助搜索引擎更好地理解网页内容,提升SEO效果。 10. Responsive Design:HTML5支持媒体查询(Media ...
此外,HTML5支持RDFa、微数据(Microdata)、微格式(Microformats)等,这些技术有助于构建更加有价值的数据驱动型Web应用。 ##### 2. 本地存储特性(Class: OFFLINE & STORAGE) HTML5引入了本地存储功能,如`...
12. **Microdata和RDFa**:这两种语义化技术允许在HTML文档中嵌入结构化数据,使搜索引擎和其他应用能更好地理解和利用网页内容。 以上只是HTML5部分核心特性的概述,实际应用中还包括WebRTC(实时通信)、WebGL...
转自CCF,网址:...讨论在微数据(Microdata)发布和联机分析处理(OLAP)两种场景下,数据发布中的隐私保护方法。最后探讨面向隐私保护的数据挖掘和数据发布方法的评价体系。
HTML5的语义化标签和Microdata/RDFa/Schema.org等元数据标准有助于搜索引擎理解网页内容,提高搜索排名。 9. Accessibility(无障碍访问): HTML5引入了更多对无障碍访问的支持,如ARIA属性,确保视觉障碍或其他...
10. Microdata和Microformats:用于添加结构化数据到HTML文档中,方便搜索引擎抓取和解析,增强网页的语义化。 此外,“刘祥博客.url”可能是一个链接,指向刘祥的博客,他可能分享了更多关于HTML5的实战经验和技术...
描述RDF :: Microdata是使用库套件的Ruby数据读取器。特征RDF ::微观数据分析到报表或使用中定义的规则三元 。 微数据解析器。 使用Nokogiri解析HTML 如果可用, gem用于具有更好错误检测功能的纯HTML5解析器。 使用...
- **Microdata**:讲解 Microdata 作为一种语义化数据格式的应用。 - **会话历史与存储 API**:探讨 HTML5 中的本地存储机制(如 localStorage 和 sessionStorage)。 - **离线应用**:介绍 HTML5 如何支持离线...