了解 - 微格式

微格式

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

介绍

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

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

微格式 2（有时被称为 mf2）是对微格式的更新，它提供了一种比以往使用 RDFa 和 microdata 的方法更简单的 HTML 结构化语法和词汇表注释方式。这些以前的方法需要获得新的属性。

工作原理

HTML示例

<a class="h-card" href="https://zs.example.com">张三</a>

当解析器遇到这些数据时，它将知道这个页面包含了一个“卡片”，其描述了一个叫 张三的人或组织，其 URL 为 https://zs.example.com。解析器通过 API 使这些数据可用，这些 API 可以用于不同的应用程序。例如，应用程序可以扫描页面上的 h-card，用作注册服务的某个人的个人资料信息。

正如在这个案例中，某些标记模式只需要一个单一的微格式根类名，解析器使用它来查找一些通用属性，例如 name、url、photo。

使用案例

微格式有许多使用案例。首先，Webmention 标准使用微格式提供了一种可以将消息和评论从一个网站发送到另一个网站的方式。Webmention 规范定义了特定属性，以便于站点发布和消费，以创建丰富、可互操作的消息和评论发布方式。微格式也可以与 Webmentions 一起使用，便于从一个网站向另一个网站发送社交反应，如喜欢、转帖和书签。

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

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

除了可以被机器读取外，微格式还便于人类阅读。这种方法使人们容易理解和维护微格式数据。

微格式前缀

所有微格式由根和属性集合组成。属性全部是可选的，可能是多值的——需要单一值的应用程序可以使用属性的第一个实例。层次数据通过嵌套微格式表示，通常作为属性值本身。

所有微格式类名使用前缀。前缀是与词汇表无关的语法，它们是被独立开发出来的。

“h-*”用于根类名，例如“h-card”、“h-entry”、“h-feed”等。这些顶级根类通常指示一个类型和相应的预期属性词汇表。例如：

• 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-*”用于 datetime 属性，例如：“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 中的类属性定义的，任何元素都可以携带。

<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">张三</a>
  <a class="u-email" href="mailto:jbloggs@example.com">zhangsan@example.com</a>,
  <span class="p-locality">河北省</span>
  <span class="p-country-name">中国</span>
</p>

h-entry

h-entry 微格式表示 web 上的分集或有时间戳的内容。h-entry 通常与打算进行聚合的内容一起使用，例如博客帖子和简短笔记。

<article class="h-entry">
  <h1 class="p-name">文章标题</h1>
  <p>
    <a class="p-author h-card" href="https://example.com">张三</a> 
    <time class="dt-published" datetime="2013-06-13 12:00:00">
      13<sup>号</sup>
    </time>
  </p>

  <p class="p-summary">这是这篇文章的摘要</p>

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

 h-feed

h-feed 是 h-entry 帖子的流或消息来源，如主页或存档页面上的所有帖子，或摘要或其他简短帖子列表。

<div class="h-feed">
  <h1 class="p-name">文章标题</h1>
  <article class="h-entry">
    <h2 class="p-name">二级标题</h2>
    <p>
      <a class="p-author h-card" href="https://example.com">张三r</a> on
      <time class="dt-published" datetime="2013-06-13 12:00:00">
        10<sup>号</sup>
      </time>
    </p>
    <p class="p-summary">
      这篇文章内容
    </p>
    <div class="e-content"><p>等等等等</p></div>
  </article>
</div>

 h-event

h-event 用于 web 上的事件。h-event 通常用于活动列表和单个活动页面。

<div class="h-event">
  <h1 class="p-name">标题</h1>
  <p>
    From
    <time class="dt-start" datetime="2013-06-30 12:00">
      30<sup>号</sup>
    </time>
    to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at
    <span class="p-location">某个地点</span>
  </p>
  <p class="p-summary">
    内容。。。
  </p>
</div>

微格式rel属性

有一些微格式是通过使用特殊的 rel 属性应用于页面的

rel=author
此属性声明链接的文档代表当前页面的作者。
 

<a rel="author" href="https://ccc.blog">ccc</a>

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

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

rel=nofollow
该属性声明链接的文档不应该被搜索引擎排名算法赋予任何权重，这些算法可能来自当前页面。这有助于防止链接图算法在看到指向文档的链接后对页面的权重高于其他情况。

<a rel="nofollow" href="https://ccc.blog">ccc</a>