下面是一篇结构清晰、偏实战 + 原理讲解的技术文章，系统讲清
👉 HTML5 中的 Microdata（微数据）与 History API（历史记录管理）
适合博客发布、前端学习或面试复习使用。

HTML5 中的 Microdata 与历史记录管理详解

HTML5 不仅带来了新的标签和语义元素，还引入了多项提升语义化与用户体验的关键特性。
其中，Microdata（微数据） 和 History API（历史记录管理） 是两个容易被忽略、但非常实用的模块。

• Microdata：让页面内容对搜索引擎更“有意义”
• History API：让前端应用像原生 App 一样管理页面历史

本文将分别从 概念 → 用法 → 示例 → 应用场景 进行系统讲解。

一、HTML5 Microdata（微数据）详解

1️⃣ 什么是 Microdata？

Microdata 是 HTML5 提供的一种语义化标注机制，
用于在 HTML 标签中嵌入机器可读的结构化数据。

📌 简单理解：

Microdata 是给搜索引擎、爬虫“看的标签含义说明书”。

2️⃣ Microdata 的作用

• 提升 SEO（搜索引擎理解页面内容）
• 支持富媒体搜索结果（Rich Snippets）
• 结构化描述：人物、商品、文章、评论等

3️⃣ Microdata 的核心属性

4️⃣ Microdata 示例（文章结构）

<article itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">HTML5 Microdata 入门</h1>
  <p>
    作者：
    <span itemprop="author">阿杰</span>
  </p>
  <time itemprop="datePublished" datetime="2025-01-01">
    2025-01-01
  </time>
</article>

搜索引擎可识别：

• 文章标题
• 作者
• 发布时间

5️⃣ 商品 Microdata 示例

<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">机械键盘</span>
  <span itemprop="brand">KeyBrand</span>
  <span itemprop="price">499</span>
</div>

📌 常用于：

• 电商网站
• 商品列表页
• 搜索结果增强展示

6️⃣ Microdata vs JSON-LD（补充说明）

👉 新项目更推荐 JSON-LD，但 Microdata 仍是 HTML5 标准的一部分，必须理解

二、HTML5 历史记录管理（History API）详解

1️⃣ 什么是 History API？

HTML5 提供的 History API，允许 JavaScript：

• 修改浏览器地址栏 URL
• 不刷新页面
• 管理前进 / 后退行为

📌 SPA（单页应用）的核心基础之一

2️⃣ History API 的核心方法

3️⃣ pushState 示例（核心）

history.pushState(
  { page: 1 },
  "",
  "/page1"
);

效果：

• URL 变成 /page1
• 页面不刷新
• 浏览器历史记录增加一条

4️⃣ replaceState 示例

history.replaceState(
  { page: 2 },
  "",
  "/page2"
);

📌 不会新增历史记录，常用于：

• 登录重定向
• 参数修正

5️⃣ 监听浏览器前进 / 后退

window.addEventListener("popstate", (event) => {
  console.log("当前状态：", event.state);
});

📌 必须配合 pushState 使用。

6️⃣ 简单 SPA 路由示例

<button onclick="goPage('home')">首页</button>
<button onclick="goPage('about')">关于</button>

<div id="app"></div>

<script>
function goPage(page) {
  history.pushState({ page }, "", "/" + page);
  render(page);
}

function render(page) {
  document.getElementById("app").innerText =
    page === "home" ? "首页内容" : "关于我们";
}

window.onpopstate = (e) => {
  render(e.state.page);
};
</script>

三、History API 的应用场景

• 单页应用（Vue / React / Angular）
• Tab 切换
• 弹窗 / 模态框 URL 同步
• 搜索条件状态保存

四、常见问题与注意事项

❓ pushState 会触发 popstate 吗？

❌ 不会
✔ 只有浏览器前进 / 后退才触发

❓ 刷新页面会保留 state 吗？

❌ 不会
✔ state 只存在于当前会话

❓ SEO 会受影响吗？

• 纯 History API 页面需配合：
  • 服务端渲染（SSR）
  • 或预渲染（Prerender）

五、Microdata 与 History API 的关系

📌 一个偏“被机器理解”，一个偏“让用户体验更好”

六、总结

✔ Microdata 是 HTML5 的语义化数据标注方式
✔ 可提升 SEO 与搜索展示效果
✔ History API 是现代前端路由的底层基础
✔ SPA 项目离不开 pushState / popstate
✔ 两者都属于 HTML5 中“容易忽略但很重要”的特性