博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5微数据学习笔记
阅读量:4691 次
发布时间:2019-06-09

本文共 1662 字,大约阅读时间需要 5 分钟。

一、微数据的定义

  开门见山,数据使用来自自定义词汇表的、带作用域的名/值对来给DOM做标记。

  自定义词汇表:我们可以将“HTML5中所有元素的集合”看做一个词汇表,这个词汇表包括了可以代表章节或者文章的元素,但是不包括可以代表一个人或者活动的元素,如果要想表示一个“人”,那么就需要定义自己的词汇表,使用微数据就可以定义这样的词汇表。

  作用域:微数据的作用域可以参照DOM中的元素之间的自然父子关系,微数据重用了DOM本身的层级结构,提供了一种方式来表达“所有该元素的属性都来自这个词汇表”。

  名/值对:每一个微数据词汇表都定义了一组命名属性,一个微数据的属性名总是声明在一个HTML元素中。相对应的属性值则从DOM中获取。对于大多数HTML元素而言,属性值就是元素的文本内容。但也有少数例外,如下表:

元素
<meta> content属性

<audio>

<embed>

<iframe>

<img>

<source>

<video>

src属性

<a>

<area>

<link>

href属性
<object> data属性
<time> datetime属性
所有其他元素 文本内容

 二、为什么要使用微数据?

  “添加微数据”到网页就是给已有的那些HTML元素增添一些属性,那就不得不问“为什么我们要使用微数据”,难道只是为了增加语义而增加语义吗?

  事实上,有两类主要的应用程序会消费HTML及其扩展,以及HTML5微数据:

  • Web浏览器
  • 搜索引擎

  对于浏览器,HTML5定义了一组DOM API,用于从网页上提取微数据项目、属性以及属性值。实际上支持微数据的浏览器基本上等于没有,坑爹呐!也许在未来某一天主流浏览器都会实现这些客户端API吧……

  而另一个主要的HTML消费者就是搜索引擎。一个搜索引擎会用关于一个人的微数据属性来干嘛呢?想象一下,搜索引擎可以继承并显示一些结构化的信息,而不仅仅是显示页面标题和一些摘要文字。这些结构化信息包括:姓名、职称、工作单位、地址,甚至一个资料照片缩略图。

  Google支持微数据,其Rich Snippets计划就包含了对微数据的支持。当Google的Web抓取工具分析到你的网页,并找到符合词汇表的微数据属性,就会开始解析属性数据,同页面其余数据一并存储。实际上利用这种抓取效果,你就可以得到搜索公司的优待,为你提供定制的搜索结果页。

三、微数据的格式

  itemscope:声明你所要添加的属性的作用域,加在最外层的元素。

  itemtype:声明所使用的词汇表,加在最外层的元素中。

  itemprop:声明属性名,具体的内容要参加所引用的词汇表。

  实例:

1 
2

Google, Inc.

3

4 1600 Amphitheatre Parkway

5 Mountain View, CA 94043
6 USA 7

8

650-253-0000

9

Google.com

10

  添加微数据修改后:

1 
2

Google, Inc.

3

5 1600 Amphitheatre Parkway

6 Mountain View 7 CA 8 94043
9 USA10

11

650-253-0000

12

13

 ※ 以上部分内容来自《HTML5揭秘》Mark Pilgrim著. 电子工业出版社

转载于:https://www.cnblogs.com/s1nker/p/4533169.html

你可能感兴趣的文章
java面向对象(第一章课后作业)02
查看>>
JSON转Model内部实现解析
查看>>
将四个按钮放入一个父控件的好处:方便移动,只需要改变父控件的y值,就可移动四个按钮...
查看>>
Lintcode 553. 炸弹袭击 题解
查看>>
JavaEE的13种核心技术
查看>>
子级Repeater获取 父级Repeater 中的值
查看>>
[tem]高精度1
查看>>
NOIP模拟赛20161016R2
查看>>
BZOJ 3744: Gty的妹子序列 [分块]
查看>>
LeetCode 102. Binary Tree Level Order Traversal
查看>>
LeetCode 206. Reverse Linked List
查看>>
typedef 数组使用详解
查看>>
full gc
查看>>
Cocos2d-x动画播放(序列帧)
查看>>
ABAP术语-V1 Module
查看>>
javaweb学习总结(二十三)——jsp自定义标签开发入门
查看>>
事件冒泡、事件捕获、事件委托
查看>>
【Android】proguard混淆代码
查看>>
KEYCODE_DPAD_CENTER 和 KEYCODE_ENTER
查看>>
python学习笔记(一)
查看>>