微格式

微格式 是用于在 HTML 中嵌入语义和结构化数据的标准，并提供可供社交 Web 应用、搜索引擎、聚合器和其他工具使用的 API。这些最小的 HTML 模式用于标记从基本信息到特定字段信息的实体，例如人员、组织、事件和位置。

¥Microformats are standards used to embed semantics and structured data in HTML, and provide an API to be used by social web applications, search engines, aggregators, and other tools. These minimal patterns of HTML are used for marking up entities that range from fundamental to domain-specific information, such as people, organizations, events, and locations.

  • 要创建微格式对象，请在 class 属性中使用 h-* 类名称。
  • 要向对象添加属性，请在该对象的后代之一上使用 p-、u-、dt-、e- 类名。

微格式使用支持词汇表来描述对象，并使用名称-值对来为其属性分配值。这些属性包含在可以添加到任何 HTML 元素的类属性中，而数据值则重复使用 HTML 元素内容和语义属性。

¥Microformats use supporting vocabularies to describe objects and name-value pairs to assign values to their properties. The properties are carried in class attributes that can be added to any HTML element, while the data values re-use HTML element content and semantic attributes.

Microformats2（有时称为 mf2）是微格式的更新，它提供了比以前使用 RDFa 和微数据的方法更简单的方法来注释 HTML 结构化语法和词汇。以前的这些方法需要学习新的属性。

¥Microformats2 (sometimes referred to as mf2) is an update to microformats that provides a simpler way of annotating HTML structured syntax and vocabularies than previous approaches of using RDFa and microdata. These previous approaches require learning new attributes.

微格式有 。

¥There are open source parsing libraries for most languages for microformats2.

微格式如何工作

¥How Microformats Work

网页作者可以将微格式添加到他们的 HTML 中。例如，如果他们想表明自己的身份，可以使用 h-card，例如：

¥An author of a webpage can add microformats to their HTML. For example if they wanted to identify themselves they could use an h-card such as:

HTML 示例

¥HTML Example

html
<a class="h-card" href="https://alice.example.com">Alice Blogger</a>

当解析器遇到此数据时，它会知道该页面包含一个 "card"，它描述了一个名为 Alice Blogger 且 URL 为 https://alice.example.com/ 的个人或组织。解析器通过可用于不同应用的 API 提供这些数据。例如，应用可以扫描 h-card 页面，将其用作已注册服务的人员的个人资料信息。

¥When a parser encounters this data, it will know that this page contains a "card" which describes a person or organization named Alice Blogger with a URL of https://alice.example.com/. The parser makes this data available via APIs that can be used for different applications. For example, an application could scan a page for a h-card to use as profile information for someone who has signed up to a service.

如本示例所示，某些标记模式仅需要一个微格式根类名称，解析器使用该名称来查找一些通用属性，例如 name、url、photo。

¥As in this example, some markup patterns require only a single microformat root class name, which parsers use to find a few generic properties such as name, url, photo.

微格式用例

¥Microformats Use Cases

微格式有许多用例。首先，网络提及标准 使用微格式提供一种将消息和评论从一个站点发送到另一个站点的方式。Webmention 规范定义了站点可以发布和使用的特定属性，以创建丰富的、可互操作的消息和评论发布方式。微格式还可以与网络提及一起使用，以便能够将社交反应（例如点赞、转发和书签）从一个站点发送到另一个站点。

¥Microformats have numerous use cases. First, the Webmention standard uses microformats to provide a way in which messages and comments can be sent from one site to another. The Webmention specification defines specific attributes that sites may publish and consume to create a rich, interoperable way of publishing messages and comments. Microformats can also be used with Webmentions to enable sending social reactions such as likes, reposts, and bookmarks from one site to another.

微格式还可以轻松地跨站点联合。聚合器可以解析具有已发布微格式的页面，以查找帖子标题、帖子正文和帖子作者等信息。然后，该聚合器可以使用收集到的语义信息在其站点上呈现结果。例如，新闻聚合器和社区发布板可以促进提交并使用微格式从页面中提取相关内容。此外，网站可以使用微格式向第三方（例如社交网络）发送精心设计的请求以发布内容。

¥Microformats also enable easy syndication across sites. An aggregator could parse a page with published microformats to look for information such as a post title, a post body, and the author of a post. This aggregator could then use the semantic information gathered to render a result on their site. For instance, news aggregators and community posting boards could facilitate submissions and use microformats to exact relevant content from a page. Further, a website could use microformats to send crafted requests to third-parties to publish content, such as social networks.

所有主要搜索引擎都支持阅读和解释微格式。搜索引擎从直接访问这些结构化数据中受益匪浅，因为它使它们能够理解网页上的信息。有了这些信息，搜索引擎就可以为用户提供更相关的结果。一些搜索引擎可能会根据以微格式提供的数据在搜索结果页面上呈现特殊的片段，例如星级评定。

¥All major search engines support reading and interpreting microformats. Search engines benefit greatly from direct access to this structured data because it allows them to understand the information on web pages. With this information, search engines can provide more relevant results to users. Some search engines may render special snippets such as star ratings on a search result page based on the data provided in microformats.

除了机器可读之外，微格式还被设计为易于人类阅读。这种方法使人们可以轻松理解和维护微格式数据。

¥In addition to being machine-readable, microformats are designed to be easily read by humans. This approach makes it easy for people to understand and maintain microformats data.

微格式前缀

¥Microformats Prefixes

所有微格式都由根和属性集合组成。属性都是可选的并且可能是多值的 - 需要奇异值的应用可以使用属性的第一个实例。分层数据用嵌套微格式表示，通常作为属性值本身。

¥All microformats consist of a root, and a collection of properties. Properties are all optional and potentially multivalued - applications needing a singular value may use the first instance of a property. Hierarchical data is represented with nested microformats, typically as property values themselves.

所有微格式类名都使用前缀。前缀的语法独立于词汇，它们是单独开发的。

¥All microformats class names use prefixes. Prefixes are syntax independent of vocabularies, which are developed separately.

  • "H-*" 表示根类名称，例如 "h-card"、"h-entry"、"h-feed" 等等。这些顶层根类通常指示类型和相应的预期属性词汇表。例如：
  • "p-*" 用于纯（文本）属性，例如 "p-name"、"p-summary"
    • 通用纯文本解析，一般是元素文本。在某些 HTML 元素上，首先使用特殊属性，例如 img/alt，缩写/标题。
  • "你-*" 用于 URL 属性，例如 "u-url"、"u-photo"、"u-logo"
    • 特殊解析：元素属性 a/href、img/src、object/data 等元素内容的属性。
  • "dt-*" 用于日期时间属性，例如 "dt-start"、"dt-end"、"dt-bday"
    • 特殊解析：time 元素 datetime 属性、value-class-pattern 和单独的日期时间值解析以提高可读性。
  • "电子-*" 用于元素树属性，其中整个包含的元素层次结构是值，例如 "e-content"。"电子-" 前缀也可以被记忆为 "元素树"、"嵌入标记" 或 "封装标记"。

一些微格式示例

¥Some microformats examples

h-card

h-card 微格式代表个人或组织。

¥The h-card microformat represents a person or organization.

每个属性的值是使用任何元素可以携带的类属性在 HTML 中定义的

¥The value of each property is defined in HTML using the class property any element can carry

h 卡示例

¥Example h-card

html
<p class="h-card">
  <img class="u-photo" src="https://example.org/photo.png" alt="" />
  <a class="p-name u-url" href="https://example.org">Joe Bloggs</a>
  <a class="u-email" href="mailto:jbloggs@example.com">jbloggs@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>
属性 描述
p-name 个人或组织的完整/格式化名称。
u-email 电子邮件地址
u-photo 个人或组织的照片
u-url 代表个人或组织的主页或其他 URL
u-uid 通用唯一标识符，最好是规范的 URL
p-street-address 街道号码+名称
p-locality city/town/village
p-country-name 国家的名字

嵌套 h 卡示例

¥Nested h-card example

html
<div class="h-card">
  <a class="p-name u-url" href="https://blog.lizardwrangler.com/">
    Mitchell Baker
  </a>
  (<a class="p-org h-card" href="https://mozilla.org/">Mozilla Foundation</a>)
</div>

解析后的 JSON：

¥Parsed JSON:

json
{
  "items": [
    {
      "type": ["h-card"],
      "properties": {
        "name": ["Mitchell Baker"],
        "url": ["https://blog.lizardwrangler.com/"],
        "org": [
          {
            "value": "Mozilla Foundation",
            "type": ["h-card"],
            "properties": {
              "name": ["Mozilla Foundation"],
              "url": ["https://mozilla.org/"]
            }
          }
        ]
      }
    }
  ]
}

在此示例中，为个人及其代表的组织指定了 h 卡。此人与链接组织的从属关系是使用 p-org 属性指定的。

¥In this example, a h-card is specified for both a person and the organization they represent. The person's affiliation with the linked organization is specified using the p-org property.

注意：嵌套的 h 卡具有隐含的 'name' 和 'url' 属性，就像 <a href> 上的任何其他仅根类名称的 h 卡一样。

¥Note: the nested h-card has implied 'name' and 'url' properties, just like any other root-class-name-only h-card on an <a href> would.

h-entry

h-entry 微格式表示网络上的片段或带有日期标记的内容。h-entry 通常与旨在联合的内容一起使用，例如 博客文章和简短注意。

¥The h-entry microformat represents episodic or datestamped content on the web. h-entry is often used with content intended to be syndicated, e.g. blog posts and short notes.

作为博客文章的 h 条目示例：

¥Example h-entry as a blog post:

html
<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>
    Published by
    <a class="p-author h-card" href="https://example.com">W. Developer</a> on
    <time class="dt-published" datetime="2013-06-13 12:00:00">
      13<sup>th</sup> June 2013
    </time>
  </p>

  <p class="p-summary">In which I extoll the virtues of using microformats.</p>

  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>

属性

¥Properties

属性 描述
p-name 条目名称/标题
p-author 谁写了该条目，可选嵌入 h 卡
dt-published 条目发布时
p-summary 简短的条目摘要
e-content 条目的完整内容

解析回复 h-entry 示例

¥Parsed reply h-entry example

html
<div class="h-entry">
  <p>
    <span class="p-author h-card">
      <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
        <img
          class="u-photo"
          alt="Greg McVerry"
          src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" />
      </a>
      <a
        class="p-name u-url"
        href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
        Greg McVerry
      </a>
    </span>
    Replied to
    <a
      class="u-in-reply-to"
      href="https://web.nodejs.cn/en-US/docs/Web/HTML/microformats">
      a post on <strong>developer.mozilla.org</strong>
    </a>
    :
  </p>
  <p class="p-name e-content">
    Hey thanks for making this microformats resource
  </p>
  <p>
    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
      Greg McVerry
    </a>
    published this
    <a
      class="u-url url"
      href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource">
      <time class="dt-published" datetime="2019-05-31T14:19:09+0000">
        31 May 2019
      </time>
    </a>
  </p>
</div>
json
{
  "items": [
    {
      "type": ["h-entry"],
      "properties": {
        "in-reply-to": [
          "https://web.nodejs.cn/en-US/docs/Web/HTML/microformats"
        ],
        "name": ["Hey thanks for making this microformats resource"],
        "url": [
          "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"
        ],
        "published": ["2019-05-31T14:19:09+0000"],
        "content": [
          {
            "html": "Hey thanks for making this microformats resource",
            "value": "Hey thanks for making this microformats resource",
            "lang": "en"
          }
        ],
        "author": [
          {
            "type": ["h-card"],
            "properties": {
              "name": ["Greg McVerry"],
              "photo": [
                "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"
              ],
              "url": [
                "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"
              ]
            },
            "lang": "en",
            "value": "Greg McVerry"
          }
        ]
      },
      "lang": "en"
    }
  ]
}

h-feed

h-feed 是 h-entry 帖子的流或提要，例如主页或存档页面上的完整帖子，或者摘要或其他简短的帖子列表。

¥The h-feed is a stream or feed of h-entry posts, like complete posts on a home page or archive pages, or summaries or other brief lists of posts.

h-feed 示例

¥Example h-feed

html
<div class="h-feed">
  <h1 class="p-name">Microformats Blogs</h1>
  <article class="h-entry">
    <h2 class="p-name">Microformats are amazing</h2>
    <p>
      Published by
      <a class="p-author h-card" href="https://example.com">W. Developer</a> on
      <time class="dt-published" datetime="2013-06-13 12:00:00">
        13<sup>th</sup> June 2013
      </time>
    </p>
    <p class="p-summary">
      In which I extoll the virtues of using microformats.
    </p>
    <div class="e-content"><p>Blah blah blah</p></div>
  </article>
</div>

属性

¥Properties

属性 描述
p-name 提要的名称
p-author feed 的作者，可选择嵌入 h-card

子级们

¥Children

嵌套 h 条目
代表提要项目的对象

h-event

h-event 适用于网络活动。h-event 通常与事件列表和单个事件页面一起使用。

¥The h-event is for events on the web. h-event is often used with both event listings and individual event pages.

html
<div class="h-event">
  <h1 class="p-name">Microformats Meetup</h1>
  <p>
    From
    <time class="dt-start" datetime="2013-06-30 12:00">
      30<sup>th</sup> June 2013, 12:00
    </time>
    to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at
    <span class="p-location">Some bar in SF</span>
  </p>
  <p class="p-summary">
    Get together and discuss all things microformats-related.
  </p>
</div>

属性

¥Properties

属性 描述
p-name 活动名称（或标题）
p-summary 活动简短摘要
dt-start 事件开始的日期时间
dt-end 事件结束的日期时间
p-location 事件发生的地方，可选择嵌入 h 卡

解析的 h 事件示例

¥Parsed h-event Example

html
<div class="h-event">
  <h2 class="p-name">IndieWeb Summit</h2>
  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">
    June 29, 2019 at 9:00am (-0700)
  </time>
  <br />through
  <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">
    June 30, 2019 at 6:00pm (-0700)
  </time>
  <br />
  <div class="p-location h-card">
    <div>
      <span class="p-name">Mozilla</span>
    </div>
    <div>
      <span class="p-street-address">1120 NW Couch St</span>,
      <span class="p-locality">Portland</span>,
      <span class="p-region">Oregon</span>,
      <span class="p-country">US</span>
    </div>
    <data class="p-latitude" value="45.52345"></data>
    <data class="p-longitude" value="-122.682677"></data>
  </div>
  <div class="e-content">Come join us</div>
  <div>
    <span class="p-author h-card">
      <a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a>
    </span>
    Published this
    <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on
    <time class="dt published" datetime="2019-05-25T18:00:00-07:00">
      May 5th, 2019
    </time>
  </div>
</div>
json
{
  "items": [
    {
      "type": ["h-event"],
      "properties": {
        "name": ["IndieWeb Summit"],
        "url": ["https://aaronparecki.com/2019/06/29/1/"],
        "author": [
          {
            "type": ["h-card"],
            "properties": {
              "name": ["Aaron Parecki"],
              "url": ["https://aaronparecki.com"]
            },
            "lang": "en",
            "value": "Aaron Parecki"
          }
        ],
        "start": ["2019-06-29T09:00:00-07:00"],
        "end": ["2019-06-30T18:00:00-07:00"],
        "published": ["2019-05-25T18:00:00-07:00"],
        "content": [
          {
            "html": "Come join us",
            "value": "Come join us",
            "lang": "en"
          }
        ],
        "location": [
          {
            "type": ["h-card"],
            "properties": {
              "name": ["Mozilla"],
              "p-street-address": ["1120 NW Couch St"],
              "locality": ["Portland"],
              "region": ["Oregon"],
              "country": ["US"],
              "latitude": ["45.52345"],
              "longitude": ["-122.682677"]
            },
            "lang": "en",
            "value": "Mozilla"
          }
        ]
      },
      "lang": "en"
    }
  ]
}

微格式 rel 属性示例

¥Microformats rel property examples

有一些微格式通过使用特殊的 rel= 属性应用于页面。这些微格式描述当前文档和链接文档之间的关系。有关这些的完整列表，请参阅微格式 wiki 上的 相对属性。

¥There are some microformats that are applied to a page by using a special rel= property. These microformats describe a relation between a current document and a linked document. For a full list of these, see the rel property on the microformats wiki.

相对=作者

¥rel=author

该属性表明链接的文档代表当前页面的作者。

¥This attribute states that the linked document represents the author of the current page.

html
<a rel="author" href="https://jamesg.blog">James Gallagher</a>

rel=许可证

¥rel=license

此属性表明链接的文档包含发布当前页面所依据的许可证。

¥This attribute states that the linked document contains the license under which the current page is published.

html
<a rel="license" href="https://mit-license.org/">MIT License</a>

rel=nofollow

该属性规定，可能从当前页面派生的搜索引擎排名算法不应赋予链接文档任何权重。这有助于防止链接图算法在看到文档链接后对页面的权重高于原本的权重。

¥This attribute states that the linked document should not be given any weight by search engine ranking algorithms that may derive from the current page. This is useful to prevent link graph algorithms from weighing a page higher than it otherwise would after seeing a link to a document.

html
<a rel="nofollow" href="https://jamesg.blog">James Gallagher</a>

浏览器兼容性

¥Browser compatibility

所有浏览器都支持 class 属性及其 DOM API。

¥Supported in all browsers' support for the class attribute and its DOM API.

也可以看看

¥See also