Eureka Wiki (易易维基)

本页面的其他翻译:

您的足迹: h-card

H-card

这是本文档旧的修订版!


h-card

h-card 是用来在WEB上发布人或组织的简单,开放格式。h-card是几个 microformat 标准草案中的一个,适合于在HTML中内嵌数据。

h-card 是对 hCard 格式的microformats2更新。

按照CC0创作共用协议,为在法律上扩展允许范围,编辑放弃了该工作的所有的版权和相关邻权。此外,在2018年5月20日,编辑将该规范置于开放网络基础协议版本1.0之下。

例子

这是一个简单的最小的关于一个人的例子:

<a class="h-card" href="http://eeblog.net">Eureka's Blog</a>

解析为JSON:

{
  "items": [
    {
      "type": [
        "h-card"
      ],
      "properties": {
        "name": [
          "Joe Bloggs"
        ],
        "url": [
          "http://example.com"
        ]
      }
    }
  ]
}

和一个稍微完整点的例子:

<p class="h-card">
  <img class="u-photo" src="http://example.org/photo.png" alt="" />
  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
  <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, 
  <span class="p-street-address">17 Austerstræti</span>
  <span class="p-locality">Reykjavík</span>
  <span class="p-country-name">Iceland</span>
</p>

解析为 JSON:

{
  "items": [
    {
      "type": [
        "h-card"
      ],
      "properties": {
        "photo": [
          "http://example.org/photo.png"
        ],
        "name": [
          "Joe Bloggs"
        ],
        "url": [
          "http://example.org"
        ],
        "email": [
          "mailto:joebloggs@example.com"
        ],
        "street-address": [
          "17 Austerstræti"
        ],
        "locality": [
          "Reykjavík"
        ],
        "country-name": [
          "Iceland"
        ]
      }
    }
  ]
}

嵌套的 h-card 例子

<div class="h-card">
  <a class="p-name u-url"
     href="https://eureka.name">Eureka Chen</a> 
  (<a class="p-org h-card" 
      href="http://mozilla.org/">Mozilla Foundation</a>)
</div>

解析为 JSON:

{
  "items": [{ 
    "type": ["h-card"],
    "properties": {
      "name": ["Eureka Chen"],
      "url": ["https://eureka.name"],
      "org": [{
        "value": "Mozilla Foundation",
        "type": ["h-card"],
        "properties": {
          "name": ["Mozilla Foundation"],
          "url": ["http://mozilla.org/"]
        }
      }]
    }
  }]
}

注: 嵌套 h-card 有隐含的 'name' 和 'url' 属性,就象其它在<a href>上的仅根类名(root-class-name-only)h-card那样。

开始d

h-card 是表示存在一个h-card的 根类名

对于最小的例子,最多需要p-name, u-urlu-photo (就象上面的第一个),只需要root类名参见 隐含属性

对于更复杂的例子,根类名必须放在一个能够包括所有所需属性的元素上,而属性自身使用以下的类名进行标记。

了解更多的属性类名请参见 microformats2-parsing 。.

属性

在类h-card中的h-card属性:

  • p-name - 一个人或组织的全/格式化名字
  • p-honorific-prefix - 例如 Mrs., Mr. or Dr.
  • p-given-name - 给定 (经常为第一) 名,中文的名字
  • p-additional-name - 其它/中间名
  • p-family-name - 家庭名 (经常为最后) 名,中文的姓
  • p-sort-string - 排序字串
  • p-honorific-suffix</code>' - e.g. Ph.D, Esq.
  • p-nickname - 昵称/别名/操控名
  • u-email - 电子邮件地址
  • u-logo - 一个代表一个人或组织的图标。
  • u-photo
  • u-url - 主页
  • u-uid - 通用唯一识别码,典型的权威URL
  • p-category - 类别/标签
  • p-adr - 邮政地址,可选 嵌入一个 h-adr
  • p-post-office-box
  • p-extended-address - 部门/随员/房间名/号如果有
  • p-street-address - 街道号 + 名称
  • p-locality - 城市/城镇/乡村
  • p-region - 州/县郡/省
  • p-postal-code - 邮政编码, 例如 US ZIP
  • p-country-name - 国家名
  • p-label
  • p-geo'u-geo, 可选的嵌入一个 h-geo
  • p-latitude - 十进制纬度
  • p-longitude - 十进制经度
  • p-altitude - 十进制海拨高度
  • p-tel - 电话号码
  • p-note - 附加注释
  • dt-bday - 生日
  • u-key - 密码公钥,例如 SSH 或 GPG
  • p-org - 隶属组织,可选嵌入一个 h-card
  • p-job-title - 工作头衔, 以前在hCard中的title,消除歧义。
  • p-role - 角色描述
  • u-impp 按照 RFC4770, 新的在 vCard4 (RFC 6350)
  • p-sex - 生物学性,新的在vCard4 (RFC 6350)
  • p-gender-identity - 性别身份,新的在 vCard4 (RFC 6350)
  • dt-anniversary

所有的属性都是可选的。

当前在外面使用的实验性的属性,但还(没有)成为官方h-card规范的一部分。

  • u-sound - 名字(name)属性的恰当发音的声音文件。按照 vCard (RFC 6350).

状态

h-card 是microformats.org的草案规范。在 h-card-feedback 和irc.freenode.net上的#microformats irc 频道上可以公开讨论。

h-card 已经准备好在自然环境下使用和实施,但为了向后兼容,你应该将顶级h-cards 作为经典 hCard标记。

属性细节

(留位,等待扩展)

p-adr

p-adr 是可选的内嵌一个 h-adr 到簇关联结构化地址属性。 例如添加 “p-adr” 到前面的例子:

<div class="h-card">
  <p class="p-name">Joe Bloggs</p>
  <p class="p-adr h-adr">
    <span class="p-street-address">17 Austerstræti</span>
    <span class="p-locality">Reykjavík</span>
    <span class="p-country-name">Iceland</span>
  </p>
</div>

Q: Why would you use “p-adr” to cluster associated structured address properties?

A: Because if you have more than one structured address, clustering which properties go with which address keeps them deterministically together, instead of depending on array indices or other heuristics.

p-tel

Note: use of 'value' within 'p-tel' should be automatically handled by the support of the value-class-pattern. And for now, the former hCard 'type' subproperty of 'tel' is dropped/ignored. If there is demonstrable documented need for additional tel types (e.g. fax), we can introduce new flat properties as needed (e.g. p-tel-fax).

dt-bday

Using truncated representations of dates for birth date is often good practice as noted in [https://tools.ietf.org/html/rfc6350#section-4.3.1 the vcard spec] eg *

1985-04

for April 1985 *

1985

for the year 1985 *

--04-12

for April 12th with no specified year

Reserved properties

Reserved properties (not used much, if at all, in practice):

* '<code>p-organization-name</code>' * '<code>p-organization-unit</code>' * '<code>p-tz</code>' - timezone offset, e.g.

&lt;data class="p-tz" value="-0800">PST&lt;/data>

* '<code>dt-rev</code>'

Examples in the wild

Real world in the wild examples of sites and services that publish or consume h-card:

* … add uses of h-card you see in the wild here. * [http://www.securityjobslondon.co.uk Security Jobs London] uses h-card with legacy hCard fallback markup (to satisfy [https://search.google.com/structured-data/testing-tool Google's Structured Data Testing Tool]) in the footer of each page * App.net rolled out support for h-card and h-entry on all profile pages and permalink pages as of 2013-08-06 ([https://alpha.app.net/voidfiles example]) * Brett Comnes marks up his posts with h-card ([http://bret.io/2013/06/29/getting-started-with-bower/ example]) * Ben Werdmuller marks up his homepage and posts with h-card [http://werd.io/view/51d5097fbed7ded0633a5956 example]) * [https://joelpurra.com/ Joel Purra] uses a hidden h-card with legacy hCard fallback markup (to satisfy [https://search.google.com/structured-data/testing-tool Google's Structured Data Testing Tool]) on the front page * Sandeep Shetty marks his homepage and posts up with h-card and h-entry ([sandeep.io/101 example]) * [http://eschnou.com/ Laurent Eschenauer] marks his homepage profile up using h-card * [http://tommorris.org/ Tom Morris] marks himself up with h-card as well as venues he’s checked into ([http://tommorris.org/posts/8408 example]) * [http://www.w3.org/conf/ W3Conf 2013] uses h-card for all the event speakers and notable attendees. The h-cards make particularly good use of implied name, url, and photo properties. * [http://wordpress.org/extend/themes/sempress SemPress] is a WordPress theme that supports h-card, h-feed/h-entry and h-as-* * [http://the-pastry-box-project.net/ The Pastry Box Project] use h-card markup on their homepage and individual thoughts pages * Tom Morris uses h-card and XFN to markup [http://tommorris.org/pages/blogroll his blogroll]. * Aaron Parecki uses h-card to markup both authorship and references to people in his notes permalinks, e.g. [http://aaronparecki.com/2012/230/reply/1 2012/230/reply/1]. * [http://tantek.com/ Tantek Çelik] uses h-card on his home page as well as within h-entrys on permalink pages to indicate authorship. * [http://waterpigs.co.uk/ Barnaby Walters] uses h-card on his home page, as well as within h-entries for notes and articles, both to indicate authorship and also when mentioning people within the body of the notes. * [http://tantek.com/presentations/2012/06/microformats microformats.org at 7 years] presentation with and h-card markup for people and organizations. * [http://tantek.com/presentations/2012/06/pdf2012-indieweb.html Rise of the Indie Web hCards] (from Personal Democracy Forum 2012 #pdf12 #pdf2012) has microformats2 h-card markup * WebMaker by Mozilla has microformats2 h-card on event search (e.g. [https://webmaker.org/en-US/events/near/?lat=45.5234515&lng=-122.6762071 search near Portland Oregon]) and event pages (e.g. [https://webmaker.org/en-US/events/192f56eb9/ IndieWebCamp 2012]).[https://twitter.com/microformats/status/212207925643587585] * WebFWD by Mozilla has microformats2 h-card markup on [https://webfwd.org/about/experts/ experts] and [https://webfwd.org/about/team/ team] pages * [http://indiewebcamp.com IndieWebCamp] has microformats2 h-event markup with embedded h-cards for the organizers and the location. * [https://wiki.mozilla.org/Events Mozilla Events] page has microformats2 h-event markup with attendees marked up with h-card. * [https://tristanthomas.me Tristan Thomas] uses h-card on his home page * [http://cold32.com/about-the-author-and-contact.htm Cold32.com] uses h-card (and h-geo) on its about-the-author-and-contact page * [https://workfrom.co/ Workfrom.co] renders h-cards for venues (e.g. [https://workfrom.co/palio-dessert-and-espresso-house]) * [http://www.pcwdld.com/ PCWDLD.com] renders h-cards for download pages(e.g. [http://www.pcwdld.com/solarwinds-network-topology-mapper-review Download page example])

offline

* spreadly marks up share permalink pages with minimal h-cards inside h-entry

Validating

* '[http://indiewebify.me/validate-h-card/ indiewebify.me h-card validator]' parses h-card markup and makes suggestions for things to add, with code samples h-spec-section-validating

Implementations

Software implementations that publish or consume h-card, including themes, plugins, or extensions:

(This section is a stub that needs expansion! In practice, nearly every CMS on every [https://indieweb.org/ indie web] site supports publishing h-card by default.)

When adding an implementation, please provide and link to its home page and open source repo if any. * [https://gnu.io/social/ GNUsocial] [https://git.gnu.io/gnu/gnu-social/ source code] * [https://hubzilla.org/hubzilla/ Hubzilla] [https://github.org/redmatrix/hubzilla source code] * [http://friendica.com/ Friendica] [https://github.org/friendica/friendica source code] * [http://github.com/dissolve/inkblot InkBlot] * … * …

Backward Compatibility

Publisher Compatibility

For backward compatibility, you may wish to use classic hCard classnames in addition to the more future-proof h-card properties, for example:

<source lang=html4strict> <p class=“h-card vcard”>

<span class="p-name fn">Joe Bloggs</span>,
<span class="p-org org">Awesome Nonprofit</span>
...

</p> </source>

The class '<code>vcard</code>' is a backward compatible root class name that indicates the presence of an hCard.

'fn', 'org', and all the other backward compatibility hCard property class names are listed below.

Parser Compatibility

Microformats parsers should detect classic properties only if a classic root class name is found and parse them as microformats2 properties.

If an “h-card” is found, don't look for a “vcard” on the same element.

Compat. root class name:

vcard

<br/> Properties: (parsed as 'p-' plain text unless otherwise specified) *

fn

- parse as '<code>p-name</code>' *

honorific-prefix

*

given-name

*

additional-name

*

family-name

*

honorific-suffix

*

nickname

*

email

- parse as 'u-' *

logo

- parse as 'u-' *

photo

- parse as 'u-' *

url

- parse as 'u-' *

uid

- parse as 'u-' *

category

*

adr

- parse as '<code>p-adr h-adr</code>' including compat root class

adr

*

extended-address

*

street-address

*

locality

*

region

*

postal-code

*

country-name

*

label

*

geo

- parse as '<code>p-geo h-geo</code>' including compat root class

geo

*

latitude

*

longitude

*

tel

*

note

*

bday

- parse as 'dt-' *

key

- parse as 'u-' *

org

*

organization-name

*

organization-unit

*

title

- parse as 'p-job-title' *

role

Reserved: (backward compat properties that parsers may implement, if they do, they must implement in this way: *

tz

*

rev

- parse as 'dt-'

Background

This work is based on the existing hCard and vcard specifications.

Design Principles

(stub, expand)

Additions

We've tried very hard with h-card to stay compatible with the vCard4 vocabulary, and thus additions should be proposed on the vCard4 mailing list.

However, you may still use this wiki to capture additions for h-card here: * h-card-brainstorming

See Also