1. Web
  2. HTML
  3. 指南
  4. 微格式

在 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”等等。這些頂級根類通常表示型別和相應的預期屬性詞彙表。例如：

  • “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.club.tw/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.club.tw/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 貢獻者於 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.