h-card HTML 微格式的社交媒体资料答案

【问题标题】：Social media profiles in h-card HTML microformatsh-card HTML 微格式的社交媒体资料
【发布时间】：2014-09-15 03:56:35
【问题描述】：

我想在我的新网站上使用 h-card 微格式。

如何以正确的方式将 twitter、facebook 等社交媒体资料添加到我的 h-card 中？

对于电话号码，可以添加类型属性。像“细胞”、“家”或任何你想要的东西。

我也可以使用社交媒体资料进行此操作吗？喜欢：

<span class="u-url">
  <span class="type">Twitter</span>:
  <span class="value">http://twitter.com/blabla</span>
</span>

根据文档的this 页面，这应该是可能的。但是我发现的所有关于 h-card 或 hcard 的教程都只是添加了所有没有类型属性的社交媒体配置文件。所以我不确定什么是正确的方法。

【问题讨论】：

标签： html vcf-vcard microformats hcard

【解决方案1】：

在微格式 wiki 的 microformats2 站点上有一条注释：

注意：在 'tel' 中使用 'value' 应由价值类模式的支持。现在，“类型” 'tel' 的子属性被删除/忽略。如果有可论证的记录需要额外的电话类型（例如传真），我们可以介绍根据需要提供新的平面属性（例如 p-gel-fax）。

这意味着 mf2 规范尚不支持 value-class-pattern，但您可以尝试使用 vendor prefixes 并使用 u-x-twitter u-url 而不是 u-url。

例如：

<div class="h-card"><a href="http://twitter.com/blabla" class="u-x-twitter u-url">Twitter</a></div>

会被解释为：

{
    "items": [
        {
            "type": [
                "h-card"
            ],
            "properties": {
                "x-twitter": [
                    "http:\/\/twitter.com\/blabla"
                ],
                "url": [
                    "http:\/\/twitter.com\/blabla"
                ],
                "name": [
                    "Twitter"
                ]
            }
        }
    ],
    "rels": {}
}

顺便说一句：您可以在此处尝试/验证您的代码：http://pin13.net

【讨论】：