微格式

最近在准备面试时，遇到了一个☝️如标题所示的问题。第一次接触到微格式的概念，在掘金看到了两篇不错的文章，做笔记精简记录下，供自己理解记忆。

什么是微格式

知道什么是微格式吗？在前端构建中应该考虑微格式吗？

什么是微格式？

微格式是一种用于在HTML文档中嵌入语义化信息的简单而轻量级的标记语言。它们通过使用已有的HTML标签和类名来表示结构化数据，以便机器能够更容易地理解和处理这些数据。

微格式的目标是为了让信息更易于被自动化工具（如搜索引擎、数据聚合器、日历应用程序等）提取和解析。通过添加特定的类名和属性值，可以标记出文本中的特定数据，比如人名、地址、日期、评论等。

微格式并不需要创建全新的标签或属性，而是建立在HTML标准之上，利用现有的标签和属性来实现语义化的标记。这意味着微格式可以与现有的HTML文档兼容，并且不会破坏文档的结构或外观。

在前端构建中微格式的意义

微格式按照某种已有的被广泛应用的标准，通过对内容块的语义标记，可以让外部应用程序、聚合程序和搜索引擎能够做以下事情：

1. 在爬取 Web 内容时，能够更为准确地识别内容块的语义；
2. 对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。

总结： 微格式可以对网站进行 SEO 优化，如果需要可以考虑。

微格式运用示例

1. hCard：用于表示个人、组织或公司的联系信息，如姓名、地址、电话号码等。
2. hCalendar：用于表示事件的日期、时间、地点等信息。
3. hReview：用于表示产品或服务的评论和评级。
4. rel-tag：用于标记文章或页面中的关键词或标签。

以hCard微格式为例

没有加入 h-card 微格式时， HTML 结构如下：

<div>
  <div>Joe Doe</div>
  <div>The Example Company</div>
  <div>604-555-1234</div>
  <a href="http://example.com/">http://example.com/</a>
</div>

加入微格式后，成为：

<div class="vcard">
  <div class="fn">Joe Doe</div>
  <div class="org">The Example Company</div>
  <div class="tel">604-555-1234</div>
  <a class="url" href="http://example.com/">http://example.com/</a>
</div>