HTML 转 Markdown 实战教程：3 种方式一步到位
为什么需要 HTML 转 Markdown？
随着静态博客（Hugo、Hexo、Jekyll）和基于 Markdown 的内容管理系统（Notion、Obsidian、Ghost）的普及，越来越多的人需要将现有的 HTML 内容转换为 Markdown 格式。以下是几个典型场景：
博客平台迁移：从 WordPress、CSDN、简书等平台搬迁文章到自建博客时，这些平台导出的通常是 HTML 格式，需要转换才能用于 Markdown 驱动的静态站点。
内容清洗：网页抓取的内容夹杂大量 <div>、<span>、广告标签和 inline 样式，转换为 Markdown 后可以得到干净的纯文字内容，方便二次加工。
版本控制需求：HTML 文件在 Git 中 diff 查看非常困难，而 Markdown 是纯文本，每次修改都清晰可见。
跨平台发布：同一篇文章需要发布到不同平台，Markdown 作为中间格式，比 HTML 更容易转换为其他目标格式。
三种输入方式详解
MagicTools 的 HTML 转 Markdown 工具提供三种灵活的输入方式，覆盖了实际工作中绝大多数场景。
方式一：粘贴 HTML 代码
这是最直接的方式。将 HTML 源码粘贴到左侧输入框，工具会自动解析并在右侧显示转换后的 Markdown。
适用场景：
- 从 CMS 后台导出的 HTML 内容
- 网页"查看源代码"复制的片段
- 邮件客户端导出的 HTML
操作步骤：
- 打开 tools.cooconsbit.com/tools/html2md
- 在左侧输入框粘贴 HTML 代码
- 右侧实时显示 Markdown 转换结果
- 点击「复制」或「下载 .md 文件」保存结果
示例：输入以下 HTML：
<h2>欢迎使用 MagicTools</h2>
<p>这是一段<strong>加粗</strong>的文字，还有<a href="https://example.com">一个链接</a>。</p>
<ul>
<li>功能一</li>
<li>功能二</li>
</ul>
转换后得到：
## 欢迎使用 MagicTools
这是一段**加粗**的文字，还有[一个链接](https://example.com)。
- 功能一
- 功能二
方式二：输入 URL 自动抓取
输入任意网页 URL，工具会通过服务端代理自动抓取页面内容并提取正文，转换为 Markdown。这一功能由 /api/fetch-url 接口实现，支持最大 5MB 的页面，超时限制 10 秒。
适用场景：
- 批量收集网络文章并整理为本地笔记
- 将在线教程保存为离线 Markdown 文档
- 从竞品网站采集内容进行分析研究
操作步骤：
- 切换到「URL 抓取」标签页
- 粘贴目标网页的完整 URL（需包含
https://） - 点击「抓取」按钮，等待服务器获取内容
- 查看右侧转换结果，根据需要手动清理多余内容
注意：部分网站有反爬虫机制（需要登录、设置了 Cloudflare 保护），可能无法正常抓取。
方式三：粘贴富文本
直接从 Word、Google Docs、网页等地方复制带格式的内容，粘贴到工具的「富文本」输入区域，工具会识别格式信息并转换。
适用场景：
- 从 Word 文档迁移内容
- 从 Google Docs 导出笔记
- 从浏览器中直接复制网页内容（不需要看 HTML 源码）
这种方式最适合非技术用户，不需要懂任何 HTML 知识，直接"复制粘贴"即可完成转换。
常见转换问题及修复方法
问题一：表格丢失或格式错误
HTML 表格是转换中最容易出问题的结构。如果原始 HTML 使用了复杂的嵌套 <div> 来模拟表格（而不是标准的 <table> 标签），转换后可能只剩下文字，格式全部丢失。
修复方法：手动重建 Markdown 表格，格式如下：
| 列名1 | 列名2 | 列名3 |
|-------|-------|-------|
| 数据1 | 数据2 | 数据3 |
问题二：图片链接失效
从其他网站抓取的内容，图片 URL 通常是该网站的相对路径或带有防盗链的外链。转换后图片在本地预览时可能无法显示。
修复方法：
- 将重要图片下载到本地，上传到 MagicTools 图床获取永久外链
- 替换 Markdown 中的图片 URL 为新链接：
问题三：特殊字符转义
HTML 中的某些实体字符（如 &、<、>、 ）在转换时可能出现异常，要么变成原始实体代码，要么被意外过滤掉。
修复方法：转换完成后，在文本编辑器中用「查找替换」清理：
&→& → 空格<→<>→>
实战场景：从 WordPress 迁移到 Hugo
假设你有一个 WordPress 博客需要迁移到 Hugo 静态站点，以下是完整流程：
第一步：导出 WordPress 内容
在 WordPress 后台进入「工具 → 导出」，选择导出所有内容，下载 XML 文件。使用 wordpress-export-to-markdown 工具或手动提取每篇文章的 HTML 内容。
第二步：批量转换格式
将每篇文章的 HTML 内容粘贴到 MagicTools 的 HTML 转 MD 工具，转换后复制 Markdown 内容。
第三步：补充 Hugo frontmatter
Hugo 文章需要在 Markdown 文件顶部添加 frontmatter：
---
title: "文章标题"
date: 2024-01-15
categories: ["技术"]
tags: ["教程"]
---
第四步：处理图片
将 WordPress 媒体库的图片批量上传到图床（可使用 MagicTools 图床工具），更新文章中的图片链接。
第五步：验证内容
将生成的 .md 文件放入 Hugo 的 content/posts/ 目录，运行 hugo server 本地预览，检查格式是否正确。
整个迁移过程，MagicTools 的转换工具可以节省大量手动格式化的时间。
进阶技巧
转换前先清理 HTML
复杂的 HTML 通常包含大量与内容无关的结构（导航栏、侧边栏、广告、Footer）。在粘贴之前，先用浏览器开发者工具定位到正文区域，只复制 <article> 或 <main> 标签内的内容，可以得到更干净的转换结果。
结合 VS Code 后处理
转换完成后下载 .md 文件，用 VS Code 打开，安装 Markdown All in One 扩展，可以快速整理格式、生成目录、检查链接有效性。
常见问题 FAQ
Q：URL 抓取功能提示失败，怎么办？
A：URL 抓取失败通常有几个原因：①目标网站开启了 CORS 限制或需要登录；②网页超过 5MB 大小限制；③服务器响应超过 10 秒。建议改用「粘贴 HTML 代码」方式：在浏览器中打开目标页面，右键「查看页面源代码」，复制正文部分的 HTML 粘贴进来。
Q：转换结果出现乱码或中文显示异常怎么处理？
A：乱码通常是 HTML 页面编码声明与实际内容编码不匹配导致的。可以尝试在浏览器中用「另存为」将页面保存为 UTF-8 编码的 HTML 文件，然后用文本编辑器打开并复制内容重新转换。如果是 GBK 编码的老页面，建议先用 Notepad++ 或 VS Code 转换为 UTF-8 后再处理。
Q：转换后的 Markdown 可以再转回 HTML 吗？
A：完全可以。Markdown 和 HTML 是互相可转换的格式。可以使用 MagicTools 的 Markdown 编辑器，将转换后的 Markdown 粘贴进去，然后导出为 HTML 文件；或者使用命令行工具 Pandoc 进行批量转换。
Q：工具支持转换 Notion 页面吗？
A：Notion 支持将页面导出为 Markdown 格式，建议直接使用 Notion 的内置导出功能（Export → Markdown & CSV）。如果你只有 Notion 分享链接，可以尝试 URL 抓取功能，但效果因页面结构而异。
Q：转换时代码块的语法高亮信息会保留吗？
A：如果原始 HTML 使用了标准的 <code class="language-xxx"> 格式标注语言，转换后会保留语言标识（如 ```python）。但如果代码高亮是通过 JavaScript 动态渲染的，抓取到的 HTML 中可能不包含语言信息，需要手动补充。
小结
MagicTools 的 HTML 转 Markdown 工具通过三种输入方式覆盖了内容转换的主要场景。对于博主和内容创作者来说，它是平台迁移和内容整理的得力助手；对于开发者来说，它能快速将网页内容转换为可用于版本控制的纯文本格式。掌握处理常见转换问题的技巧后，你可以高效地完成大量内容的格式迁移工作。
立即访问 tools.cooconsbit.com/tools/html2md 开始转换。