hcard概念在HTML中是如何工作的

Question

所以最近我读了一本叫“自适应网络设计”的书，我偶然发现了一种叫做hcard的东西，我访问了它各自的documentation page。现在的问题是，我不理解这是如何工作的？它用于表示people..and，标记如下所示

<div class="vcard">
    <a class="url fn" href="http://tantek.com/">Tantek Çelik</a>
</div>

现在我知道了这些类的含义，比如url表示给定的链接将用户带到网页，fn表示格式化的名称，等等……

因此，这些类是否指出搜索引擎的内容是一个hCard或它呈现的不同的etc..Can有人告诉我这是如何工作的，这样做的好处是什么，这有重要性从搜索引擎优化的角度来看，这些类是预先定义的吗？

编辑:那么这些类是保留的吗？如果我将它们用于其他元素呢？有没有什么javvascript，我可以调用按钮的onclick来在计算机/用户设备上保存vcard？

Answer 1

vCard是电子名片的标准。hCard接受这些标签，并将它们用作HTML.Every中数据周围的类名。hCard开始于具有class="vcard“的块中。

其中一些类型具有子属性。例如，'tel‘值包含'type’和' value‘。通过这种方式，您可以指定不同的家庭和公司电话号码。“adr”类型有很多子属性(邮箱、扩展地址、街道地址、位置、区域、邮政编码、国家名称、类型、值)。

<div class="vcard">
   <div class="fn">xxxxx</div>
   <div class="adr">
      <span class="locality">yyyy</span>,
      <span class="country-name">zzzzz</span>
   </div>
</div>

在你的页面中，类名不一定意味着任何东西。但是，您可以随时利用它们来设置您的联系信息的样式。您还可以在浏览器的用户样式表中设置它们的样式，这样您就可以在网上冲浪时找到它们。(Original source)

关于搜索引擎优化方面，请查看这篇文章Tips for Local Search Engine Optimization for Your Site

Answer 2

这个概念允许机器获得关于内容的详细信息。这很简单，你知道一个给定的名字是什么。机器不..。:)

所以你需要一种方法来告诉机器你的html包含什么类型的数据。

例如：你可以像下面的例子一样丰富你的数据，并允许，也许是一个地址簿应用程序，来获得关于哪些字段应该被填充的详细信息。

<div class="vcard">
    <a class="url fn" href="http://tantek.com/">
        <span class="family-name">Tantek</span>
        <span class="given-name">Çelik</span>
    </a>
</div>

此代码段允许使用Adressbook App。以便轻松找到给定的名称并将其设置为正确的字段。在这里，顺序并不重要。

测试你的“富片段”：http://www.google.com/webmasters/tools/richsnippets

Answer 3

如果您还没有声明您正在使用hCard语法(通过使用vcard类)，那么您可以随意使用您喜欢的任何类名。即使您开始使用hCard微格式，也不会隐式应用任何样式，因为微格式与显示样式无关。

使用微格式的目的是打开一个公开元数据的接口。通过以标准化的微格式提供数据，任何解析您的网站的人都可以使用该微格式来查找相关信息。

搜索引擎尤其受益于此，因为它允许它们在其结果页面上提供有关特定资源的更多信息。