# Markdown 与 HTML 互转教程：双向转换、实时预览与一键导出
> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/markdown-converter-guide
写技术文档时经常要在 Markdown 和 HTML 之间来回转换：博客用 Markdown 写，邮件和网页却要 HTML。工具派的「Markdown 与 HTML 互转」工具支持双向实时转换，GFM 表格、代码块、任务列表全支持，转换在浏览器本地完成，内容不上传服务器，安全又快捷。
## 工具简介
「Markdown 与 HTML 互转」是一个零依赖的在线双向转换器：左边输入、右边实时出结果，无需点击任何转换按钮。它提供两种工作模式——Markdown 转 HTML 适合把文档发布到网页、邮件或公众号；HTML 转 Markdown 适合把网页内容归档为易维护的源文件。输出区可以在「HTML 源码」和「渲染预览」之间切换，所见即所得。
工具主要特性：
- 双向转换：Markdown 转 HTML、HTML 转 Markdown，一键切换模式
- GFM 扩展：支持表格、任务列表、删除线等 GitHub 风格语法
- 实时预览：输入即转换，预览视图直接展示渲染效果
- 一键导出：复制 HTML、下载 .html/.md 文件，或导出带样式的完整网页
- 本地处理：全部转换在浏览器内完成，文档内容不会上传到服务器
## 第一步：输入 Markdown 内容
打开工具页后，默认处于「Markdown 转 HTML」模式。在左侧输入区粘贴或编写你的 Markdown 文本，也可以点击工具栏的「加载示例」快速填入一段包含标题、列表、表格、代码块和引用的演示内容，先熟悉转换效果。
如果手头是现成的文档文件，点击「上传文件」可以直接读取 .md、.markdown、.html、.htm、.txt 格式的本地文件，省去复制粘贴。输入区右上角会实时显示字符数和行数，方便掌握文档规模。
## 第二步：查看实时转换结果
输入的同时，右侧输出区会即时生成对应的 HTML。默认展示「HTML 源码」视图，点击「渲染预览」可以切换到所见即所得模式，直接查看标题层级、表格边框、代码高亮等最终效果，确认排版符合预期。
实测加载示例后，246 字符的 Markdown 即时渲染为 505 字符的规范 HTML：标题转为 h1/h2 标签、列表转为 ul/li、表格完整保留 thead/tbody 结构、代码块转为 pre/code 并保留语言标识。
## 参数说明
| 参数 | 类型 | 说明 | 使用建议 |
| --- | --- | --- | --- |
| 模式切换 | 切换按钮 | Markdown 转 HTML 与 HTML 转 Markdown 二选一 | 按转换方向选择，切换后输入输出区标签随之变化 |
| GFM | 复选框 | 是否启用 GitHub 风格扩展语法（表格、任务列表、删除线） | 默认开启，兼容标准 Markdown |
| 换行转 br | 复选框 | 将正文中单个换行转换为 br 换行标签 | 需要严格保留原文换行时开启 |
| 输出视图 | 切换按钮 | HTML 源码视图与渲染预览视图 | 复制代码用源码视图，检查效果用预览视图 |
| 上传文件 | 文件选择器 | 读取本地 .md/.html/.txt 文件内容 | 长文档推荐直接上传 |
两个复选框是联动参数：修改任意一个，右侧输出会立即按新选项重新转换，无需重新输入内容。
## 第三步：HTML 反向转 Markdown 与导出
点击模式切换中的「HTML 转 Markdown」，输入区变为 HTML 源码输入。粘贴网页源码或富文本导出的 HTML，右侧会自动还原为 Markdown：h1-h6 转为井号标题、strong 转为星号加粗、列表和链接结构完整保留。实测一段 201 字符的发布公告 HTML，转换后得到 129 字符的整洁 Markdown。
转换完成后有几种导出方式：
- 复制 HTML / 复制 Markdown：一键复制到剪贴板，直接粘贴到目标编辑器
- 下载 .html / 下载 .md：保存纯转换结果文件，实测下载的 output.html 结构完整
- 导出完整网页：生成带内联样式的独立 HTML 文件，双击即可在浏览器打开，适合直接分享或存档
## 常见问题
**转换时文档内容会上传到服务器吗？**
不会。整个转换过程在浏览器本地用 JavaScript 完成，输入的文档不会离开你的电脑，适合处理内部文档等敏感内容。
**支持哪些 Markdown 语法？**
支持标题、段落、加粗、斜体、有序/无序列表、嵌套列表、表格、代码块、行内代码、引用、链接、图片等常用语法；开启 GFM 后额外支持任务列表和删除线。
**HTML 转 Markdown 能识别哪些标签？**
常见的 h1-h6、p、strong、b、em、i、ul、ol、li、a、img、table、pre、code、blockquote 等标签都能正确还原为对应的 Markdown 语法。
**「导出完整网页」和「下载 .html」有什么区别？**
下载 .html 只保存转换出的 body 片段；导出完整网页会包一层带 CSS 样式的 html 外壳，直接打开就有美观的排版，适合发给没有编辑器的同事阅读。
## 总结与相关工具
「Markdown 与 HTML 互转」覆盖了技术写作中最常见的格式转换场景：双向实时转换、GFM 全语法支持、渲染预览和三种导出方式，加上纯本地处理的安全性，是写文档、发邮件、归档网页内容的高效助手。
相关工具推荐：
- [CSS 格式化/压缩](/tools/css_formatter)：美化或压缩网页样式代码
- [HTML 格式化/压缩](/tools/html_formatter)：整理转换出的 HTML 源码结构
- [JavaScript 格式化/压缩](/tools/js_formatter)：处理网页中的脚本代码
- [编码解码工具箱](/tools/encoding_toolbox)：处理 HTML 实体、URL 编码等转义问题
立即体验：[Markdown ⇄ HTML 互转](/tools/markdown_converter)