html5 – 表格上的微数据

前端之家收集整理的这篇文章主要介绍了html5 – 表格上的微数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是Microdata的新手,并且在表格中遇到了物镜的问题.

例如,假设我有一个人物对象,在表格中我显示了姓名,街道和城市列.

<table>
  <tr itemscope itemtype="http://schema.org/Person">
    <td itemprop="name">Name</td>
    <td itemprop="streetAddress">123 main</td>
    <td itemprop="addressCountry">USA</td>
  </tr>
</table>

请注意,streetAddress和addressCountry应该是地址属性的子项.但是,您无法添加父div来对表中的那些进行分组.

此外,点符号似乎不起作用,例如address.streetAddress.

怎么会支持这个?

解决方法

对此只有相当丑陋的解决方案.

您可以使用国家/地区的itemref属性,但是您必须添加虚拟无类型itemscope,以便不会将addressCountry属性添加到Person项:

<table>
  <tr itemscope itemtype="http://schema.org/Person">
    <td itemprop="name">
      Name
    </td>
    <td itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" itemref="country">
      <span itemprop="streetAddress">123 main</span>
    </td>
    <td itemscope>
      <span itemprop="addressCountry" id="country">USA</span>
    </td>
  </tr>
</table>

您可以使用itemref几乎任何东西,这样您就不必添加虚拟项目范围,但标记变得更复杂,并且您必须“外包”Person项:

<Meta itemscope itemtype="http://schema.org/Person" itemref="person-name person-address" />

<!-- can’t have this as descendant of another Microdata item -->

<table>
  <tr>
    <td itemprop="name" id="person-name">
      Name
    </td>
    <td itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" id="person-address" itemref="address-country">
      <span itemprop="streetAddress">123 main</span>
    </td>
    <td itemprop="addressCountry" id="address-country">
      USA
    </td>
  </tr>
</table>

或者通过将其添加到第一个td中的表中有Person:

<!-- can’t have this as descendant of another Microdata item -->

<table>
  <tr>
    <td itemscope itemtype="http://schema.org/Person" itemref="person-address">
      <span itemprop="name">Name</span>
    </td>
    <td itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" id="person-address" itemref="address-country">
      <span itemprop="streetAddress">123 main</span>
    </td>
    <td itemprop="addressCountry" id="address-country">
      USA
    </td>
  </tr>
</table>
原文链接:https://www.f2er.com/html5/168765.html

猜你在找的HTML5相关文章