在 HTML 中使用微格式

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

要创建一个微格式对象，可在 class 属性中使用 h-* 类名。
要向对象添加属性，可在对象的后代元素上使用 p-*、u-*、dt-*、e-* 类名。

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

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

Microformats2 有适用于大多数语言的开源解析库。

微格式的工作原理

网页作者可以在其 HTML 中添加微格式。例如，如果他们想识别自己，他们可以使用 h-card，如下所示：

HTML 示例

html

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

当解析器遇到此数据时，它将知道此页面包含一个描述名为 Alice Blogger、URL 为 https://alice.example.com/ 的个人或组织的“卡片”。解析器通过可用于不同应用程序的 API 提供此数据。例如，应用程序可以扫描页面中的 h-card，以用作注册服务的用户的个人资料信息。

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

微格式用例

微格式有许多用例。首先，Webmention 标准使用微格式提供了一种在不同站点之间发送消息和评论的方式。Webmention 规范定义了站点可以发布和使用的特定属性，以创建丰富、可互操作的消息和评论发布方式。微格式还可以与 Webmention 结合使用，以实现从一个站点到另一个站点发送社交反应，例如点赞、转发和书签。

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

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

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

微格式前缀

所有微格式都包含一个根和一组属性。属性都是可选的，并且可能是多值的——需要单一值的应用程序可以使用属性的第一个实例。分层数据以嵌套微格式表示，通常作为属性值本身。

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

“h-*”用于根类名，例如“h-card”、“h-entry”、“h-feed”等等。这些顶级根类通常表示类型和相应的预期属性词汇表。例如：
- h-card 描述一个人或组织
- h-entry 描述情节性或带时间戳的在线内容，例如博客文章
- h-feed 描述帖子流或订阅源
- 您可以在 microformats2 wiki 上找到更多词汇表。
“p-*”用于普通（文本）属性，例如“p-name”、“p-summary”
- 通用纯文本解析，通常是元素文本。在某些 HTML 元素上，首先使用特殊属性，例如 img/alt、abbr/title。
“u-*”用于 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-*”用于元素树属性，其中整个包含的元素层次结构是值，例如“e-content”。“e-”前缀也可以助记为“element tree”、“embedded markup”或“encapsulated markup”。

一些微格式示例

h-card

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

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

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`	城市/城镇/村庄
`p-country-name`	国家名称

嵌套 h-card 示例

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

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-card。个人与所链接组织的从属关系使用 p-org 属性指定。

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

h-entry

h-entry 微格式表示网络上的情节性或带时间戳的内容。h-entry 经常用于打算联合的内容，例如博客文章和短笔记。

作为博客文章的 h-entry 示例

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>

属性

属性	描述
`p-name`	条目名称/标题
`p-author`	条目作者，可选地嵌入 h-card
`dt-published`	条目发布时间
`p-summary`	简短条目摘要
`e-content`	条目的完整内容

已解析的回复 h-entry 示例

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://mdn.org.cn/en-US/docs/Web/HTML/Guides/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://mdn.org.cn/en-US/docs/Web/HTML/Guides/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 帖子的流或订阅源，例如主页或存档页面上的完整帖子，或帖子的摘要或其他简短列表。

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>

属性

属性	描述
`p-name`	订阅源名称
`p-author`	订阅源作者，可选地嵌入 h-card

子项

嵌套 h-entry
表示订阅源项目的对象

h-event

h-event 用于网络上的事件。h-event 经常与事件列表和单个事件页面一起使用。

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>

属性

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

已解析的 h-event 示例

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 属性示例

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

rel=author

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

html

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

rel=license

此属性表示链接文档包含当前页面发布的许可。

html

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

rel=nofollow

此属性表示链接文档不应被可能源自当前页面的搜索引擎排名算法赋予任何权重。这有助于防止链接图算法在看到指向文档的链接后将页面权重提高。

html

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

浏览器兼容性

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

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 7 月 9 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题