HTML 转 Markdown 转换器

什么是 HTML 转 Markdown？

HTML in:

  <h2>Pricing</h2>
  <p>Plans start at <strong>$9/mo</strong>. See the <a href="https://example.com/pricing">details</a>.</p>
  <table>
    <thead><tr><th>Plan</th><th>Price</th></tr></thead>
    <tbody><tr><td>Pro</td><td>$9</td></tr></tbody>
  </table>

Markdown out:

  ## Pricing

  Plans start at **$9/mo**. See the [details](https://example.com/pricing).

  | Plan | Price |
  | ---- | ----- |
  | Pro  | $9    |

  <!-- <div>, classes, and inline styles in the source are dropped — Markdown can't represent them. -->

核心功能

示例

<table>
  <thead><tr><th>Region</th><th>Sales</th></tr></thead>
  <tbody>
    <tr><td>EMEA</td><td>1,204</td></tr>
    <tr><td>APAC</td><td>980</td></tr>
  </tbody>
</table>

| Region | Sales |
| ------ | ----- |
| EMEA   | 1,204 |
| APAC   | 980   |

<p>Read the <a href="https://example.com/guide">setup guide</a> and the <a href="https://example.com/api">API reference</a>.</p>

Inline:
Read the [setup guide](https://example.com/guide) and the [API reference](https://example.com/api).

Reference:
Read the [setup guide][1] and the [API reference][2].

[1]: https://example.com/guide
[2]: https://example.com/api

<ul>
  <li>Build
    <ol>
      <li>Compile</li>
      <li>Bundle</li>
    </ol>
  </li>
  <li>Ship</li>
</ul>

- Build
  1. Compile
  2. Bundle
- Ship

<article>
  <h1>Changelog</h1>
  <p>We shipped <strong>dark mode</strong> and fixed <code>parseDate()</code>.</p>
  <blockquote><p>Thanks to everyone who reported it.</p></blockquote>
</article>

# Changelog

We shipped **dark mode** and fixed `parseDate()`.

> Thanks to everyone who reported it.

如何将 HTML 转换为 Markdown

1. 1

   粘贴你的 HTML

   放入一份复制的网页、一份 CMS 或所见即所得编辑器的导出，或一段抓取来的 HTML 片段。DOM 会在你粘贴时于浏览器中被解析并序列化为 Markdown——无需上传，除浏览器内存外没有大小上限。

2. 2

   选择标题和链接风格

   选择 ATX（#）或 Setext（===）标题，以及内联或引用链接。Markdown 会实时重新渲染，让你即时对比各种风格。输出以 GitHub Flavored Markdown 为目标——包含表格、任务列表和删除线。

3. 3

   复制或下载

   点击「复制」获取 Markdown，或点击「下载」保存为 .md 文件。要反向操作，切换到 Markdown → HTML 标签页并粘贴你的 Markdown，即可得到渲染后的 HTML。

常见误区

<div class="callout warning"><span style="color:red">Heads up!</span></div>
<!-- expecting the callout box and red colour to survive -->

Heads up!
<!-- container and styles dropped; only the text remains in Markdown -->

Line one<br>Line two
<!-- if the break form is removed, these merge into one line -->

Line one  
Line two
<!-- two trailing spaces preserve the <br> as a hard break -->

<table><tr><td><table><tr><td>inner</td></tr></table></td></tr></table>
<!-- nested table can't become a flat pipe table -->

<!-- Flatten to a single-level table first: -->
<table><tr><td>inner</td></tr></table>
→ | inner |
  | ----- |

<style>.x{color:blue}</style>
<script>track()</script>
<p>Body</p>
<!-- expecting the style and script to come through -->

Body
<!-- only the content survives; <script>/<style> are dropped -->

常见使用场景

把网页或 CMS 内容迁入 Notion、Obsidian 或静态站点

把页面从 CMS、WordPress 导出或旧 HTML 站点中拉出来，转换成可直接放进 Notion、Obsidian、Hugo 或 Jekyll 的 Markdown。你用冗长的标记换来可移植的文本，它能在 Git 仓库中干净存放，并在审阅时合理地 diff。

从所见即所得编辑器导出

富文本编辑器会产出密集、属性繁多的 HTML。把那份输出粘到这里，恢复其底下干净的 Markdown——标题、列表、链接和强调——这样内容就能迁入文档流程或基于 Markdown 的知识库，而不必锁死在编辑器里。

把 HTML 清洗成 Markdown 以喂给 LLM 和 RAG 流程

原始 HTML 把 token 烧在模型从不需要的标签、脚本和样式上。把抓取来的页面转换为 Markdown 能剥离这些噪声，同时保留 LLM 读得很好的结构，于是你能在上下文窗口里塞进更多真正的内容，并为检索得到更干净的嵌入。

把富文本粘贴转换为 Markdown

从网页、邮件或文档复制带格式的文本，它会作为 HTML 到达剪贴板。把它粘到这里，把那段富文本变成你可以提交、放进 pull request 或写进笔记的 Markdown——格式保留，杂乱清除。

把页面归档为 Markdown

把一个网页有意义的内容存为一个小巧、面向未来的 .md 文件，而不是一份满是脚本和追踪代码的沉重 HTML 快照。Markdown 几十年后在任何文本编辑器中仍保持可读，且只占一小部分空间。

把遗留的 HTML 文档变成 Markdown

用手写 HTML 编写的旧文档维护起来很痛苦。把它转换为 Markdown，带进现代的文档即代码工作流——在那里它可以被 lint、在 pull request 中审阅，并由静态站点生成器渲染。

技术细节

CommonMark 与 GitHub Flavored Markdown 输出

转换器可以目标为纯 CommonMark，或者（默认）GitHub Flavored Markdown 超集。CommonMark 精确定义了标题、强调、列表、链接、图片、代码和引用块。GFM 增加了四种可直接从常见 HTML 映射的构造：<table> → 管道表格、复选框列表项 → 任务列表、<del>/<s> → 删除线、裸 URL → 自动链接。由于大多数网页内容都用到表格之类，GFM 输出是实用的默认；仅当目标渲染器不理解 GFM 扩展时才选 CommonMark，此时表格会回退为原始 HTML。

有损、不可逆的转换——直言不讳

HTML 严格地比 Markdown 更具表现力，所以转换不可能无损，把这点说在前头是值得的。Markdown 没有表示 <div>、<span> 或其他通用容器的语法；没有承载类名、id、内联 style、colspan/rowspan 或任意 data-* 属性的方式；也没有对大多数语义或布局元素的表示。这些要么被脱壳（保留内容、丢弃标签），要么被丢弃（属性），要么——当丢弃会损失含义时——被保留为原始内联 HTML。HTML → Markdown → HTML 的往返不会重现原文。这是有意的取舍：Markdown 的存在是为了干净、可 diff、人类可编辑，而非镜像 HTML。大多数竞品对此含糊带过；把它说清楚，能让你睁着眼睛决定 Markdown 是否是合适的目标。

风格取舍：ATX/Setext、内联/引用、围栏/缩进

三个输出选择各有实在的取舍。ATX 标题（#）覆盖全部六个级别且便于 grep；Setext（加下划线）只存在于 H1/H2，所以工具为前两级输出它，往下回退到 ATX。内联链接把 URL 留在文本旁——最适合稀疏链接；引用链接把 URL 拉到文档脚部——最适合链接密集的散文和按标签复用。对于代码，围栏块（三个反引号）能携带语言信息串并安全嵌套，而缩进（四空格）代码块无法表达语言、且在列表内会出错——所以本转换器始终从 <pre><code> 输出围栏块。

最佳实践

在转换前先格式化 HTML

压缩过或深度缠绕的 HTML——尤其是嵌套布局表格和零散的内联元素——在先被整理成良构后转换得更干净。把杂乱的源跑一遍我们的 HTML 格式化工具 来美化排版并规范化它，然后再转换。干净的输入产出干净的 Markdown，更少回退到原始 HTML。

预期并审阅有损的丢弃

把转换当作设计上有损的。类名、内联样式、<div>/<span> 外壳和奇异属性在输出中都没了，而这通常正是你想要的可移植 Markdown——但请扫一遍结果，看看是否有仅存于某个属性中的语义重要信息（一个 aria-label、一个 colspan 合并的单元格），如果它重要，就手动补回去。

按文档的链接密度选择链接风格

对于偶尔出现一两个链接的散文，用内联链接——URL 留在它的文本旁边，源码读起来自然。当某一节链接密集或复用相同 URL 时，切换到引用链接：把它们拉到文末的编号列表能让段落保持易扫读，并避免重复冗长的 URL。

把页面发给 LLM 前先转成 Markdown

当你把网页内容喂给模型时——用于提示词、嵌入或 RAG 存储——先把 HTML 转成 Markdown。你会剥离浪费 token 并增加噪声的标签、脚本和样式，保留模型真正用到的结构，并在上下文窗口里塞进多得多的真正内容。

转换后核对复杂表格

GFM 管道表格是扁平的——没有嵌套表格、单元格内没有块级内容、没有合并单元格。在转换一个数据密集或布局型表格后，请核对 Markdown：简单网格转换得很完美，但任何带 colspan 或嵌套块的都会退化，可能以原始 HTML 出现。如果你在意一个干净的管道表格，请先简化源表格。

常见问题