• HTML5微数据学习笔记


    一、微数据的定义

      开门见山,数据使用来自自定义词汇表的、带作用域的名/值对来给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 <article>
     2     <h1>Google, Inc.</h1>
     3     <p>
     4         1600 Amphitheatre Parkway<br/>
     5         Mountain View, CA 94043<br/>
     6         USA
     7     </p>
     8     <p>650-253-0000</p>
     9     <p><a href="http://www.google.com/">Google.com</a></p>
    10 </article>

      添加微数据修改后:

     1 <article itemscope itemtype="http://data-vocabulary.org/Organization">
     2     <h1 itemprop="name">Google, Inc.</h1>
     3     <p  itemprop="address" itemscope
     4           itemtype="http://data-vocabulary.org/Address">
     5         <span  itemprop="street-address">1600 Amphitheatre Parkway<span><br/>
     6         <span itemprop="locality">Mountain View</span>
     7         <span itemprop="region">CA</span>
     8         <span itemprop="post-code">94043</span><br/>
     9         <span itemprop="country-name">USA</span>
    10     </p>
    11     <p itemprop="tel">650-253-0000</p>
    12     <p><a itemprop="url" href="http://www.google.com/">Google.com</a></p>
    13 </article>

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

  • 相关阅读:
    STM32 HAL库 CUBEMX 定时器双通道 高精度捕获PWM波
    STM32的CAN过滤器-bxCAN的过滤器的4种工作模式以及使用方法总结
    FreeRTOS — 消息队列
    STM32CubeMX 定时器配置时钟中的auto-reload preload
    使用TortoiseGit连接GitLab
    STM32CubeMx 定时器实现 微妙级延迟函数
    STM32 Keil新建工程报错“Loading PDSC Debug Description Failed for STMicroelectronics STM32Lxxxxxxx”
    STM32CubmeMx 串口IDLE中断+DMA读取不定长数据
    云龙51单片机视频教程全套包含案例课件及资料
    推荐一本很好的51单片机书籍,适合新手入门学习。
  • 原文地址:https://www.cnblogs.com/s1nker/p/4533169.html
Copyright © 2020-2023  润新知