免费工具 Markdown 转 HTML 在线工具，也能 HTML 转 Markdown
粘贴 Markdown，马上得到 HTML 和排版预览；粘贴网页、公众号后台或旧 CMS 里复制出来的 HTML，得到干净的 Markdown。Markdown 按 TapCub 官网博客同一套规则渲染，哪一行不会按你预想的样子显示，会逐行标出来。
- Markdown ⇄ HTML
- 逐行语法检查
- 本地转换
Markdown 与 HTML 互转
选好方向后粘贴内容，结果、语法检查和预览随输入实时更新。点「互换方向」可以把结果再转回去对照。
Markdown，或从网页、CMS、邮件模板复制的 HTML。也可以点「打开文件」读本地 5 MB 以内的文件。
标题数
4
结果里的 h2–h4。
链接数
1
图片数
1
语法检查
这套规则下显示效果和一般预期不同的写法，行号对应输入框。
- 说明在「常见问题」标题下识别到 1 个问答。在 TapCub 博客里，这部分还会生成 FAQPage 结构化数据。
- 正常每一行的写法这套规则都支持。
<h2 id="context">跳出率高一定是坏事吗</h2>
<p><strong>跳出率高</strong>不一定说明页面有问题。用户在帮助文档里一眼找到答案，看完就走也很正常。改页面之前，先对照<em>页面停留时长</em>，再到<a href="https://tapcub.com/analytics">页面报表</a>里看退出情况。</p>
<h3 id="先查这三件事">先查这三件事</h3>
<ol><li>落地页和搜索意图对得上</li><li>首屏内容加载够快</li><li>页面底部有明确的下一步<ul><li>相关文章</li><li>注册按钮</li></ul></li></ol>
<div class="callout callout-info"><p>对比改版前后完整的两周数据，不要拿忙碌的周一和清闲的周日比。</p></div>
<div class="table-wrap"><table><thead><tr><th scope="col">页面类型</th><th scope="col">跳出通常意味着</th></tr></thead><tbody><tr><th scope="row">帮助文档</th><td>找到了答案</td></tr><tr><th scope="row">落地页</th><td>卖点没讲清楚</td></tr></tbody></table></div>
<figure><img src="page-report.png" alt="页面报表里的入口页和退出页" loading="lazy" decoding="async"><figcaption>近 30 天的入口页和退出页</figcaption></figure>
<pre><code class="language-js">tapcub.track('signup_click', { position: 'footer' });</code></pre>
<h2 id="常见问题">常见问题</h2>
<h3 id="跳出率-70-算高吗">跳出率 70% 算高吗？</h3>
<p>要看页面类型。博客文章跳出率偏高，也可能已经完成了它的任务。</p>所有文字都经过转义；标题自动加 id，可以做锚点；站外链接在新标签页打开并带 rel="noopener"。
GitHub 风格（GFM）：竖线表格、``` 代码块、~~删除线~~。
预览
按 TapCub 博客的规则渲染。图片显示成占位框、不会去加载；javascript: 链接已禁用。
跳出率高一定是坏事吗
跳出率高不一定说明页面有问题。用户在帮助文档里一眼找到答案，看完就走也很正常。改页面之前，先对照页面停留时长，再到页面报表里看退出情况。
先查这三件事
- 落地页和搜索意图对得上
- 首屏内容加载够快
- 页面底部有明确的下一步
- 相关文章
- 注册按钮
对比改版前后完整的两周数据，不要拿忙碌的周一和清闲的周日比。
| 页面类型 | 跳出通常意味着 |
|---|---|
| 帮助文档 | 找到了答案 |
| 落地页 | 卖点没讲清楚 |
tapcub.track('signup_click', { position: 'footer' });常见问题
跳出率 70% 算高吗？
要看页面类型。博客文章跳出率偏高，也可能已经完成了它的任务。
版本 v1.0更新于 更新记录
转换结果的每一部分说明什么
工具给出三样东西：转换后的文字、对输入的语法检查、排版预览。建议先看语法检查，预览里的大多数「怎么和想的不一样」都能在那里找到原因。
语法检查
「错误」会在 TapCub 博客里出问题（图片缺替代文字、javascript: 链接）；「注意」能显示，但和多数人的预期不同，比如「# 」标题变成了普通段落；「说明」告诉你转换时改了或去掉了什么。
HTML
默认是一段可以贴进 CMS 或模板的片段，勾选后输出能直接打开的完整网页。文字一律转义，Markdown 里误写的「<」不会变成标签。表格外面包一层可横向滚动的 <div class="table-wrap">，第一列用行标题，和 TapCub 博客一致。
Markdown
从 HTML 转出 GitHub 风格的 Markdown：标题、列表、链接、图片、表格、带语言标记的代码块。会被误认成语法的字符才加反斜杠，不会满屏都是 \。
预览
按 TapCub 文章页的样式排版。图片显示成占位框，写着替代文字和地址——页面不会去请求你粘贴的任何图片网址，顺便也能检查替代文字写得对不对。
Markdown 没有唯一的标准：CommonMark、GitHub 各有扩展，语雀、掘金、各家 CMS 支持的写法也不完全一样。本页写清楚用的是哪一套规则，检查结果才有意义；换一个编辑器，能支持的写法可能更多。
三步完成转换
写博客、写 README、写帮助文档，或者把旧网页搬进用 Markdown 写作的平台都适用。
-
1
选方向
写稿发布选「Markdown → HTML」；要把现有网页搬到 Markdown 编辑器、GitHub 或文档仓库，选「HTML → Markdown」。
-
2
粘贴或打开文件
直接粘贴，或打开电脑里的 .md / .html 文件。文件在浏览器里读取，不会上传。
-
3
按检查结果改
每一条都带行号。改好输入，看预览刷新，再复制或下载结果。
支持哪些 Markdown 语法
Markdown → HTML 用的渲染程序，就是 TapCub 官网博客和帮助中心在用的那一份，逐字一致。它只收写文章用得到的语法，并且有意不支持原始 HTML。HTML → Markdown 输出 GitHub 风格的 Markdown。
- 标题：只用
##到####（文章标题就是 H1）；末尾加{#自定义-id}可以指定锚点 - 列表：
-、*或1.，可以嵌套一层（缩进两个以上空格） - 行内：
**粗体**、*斜体*、`代码`、[文字](网址)；https://tapcub.com 开头的链接在当前页打开，其它网址在新标签页打开 - 块：
> 引用、> [!TIP]/[!NOTE]/[!WARNING]提示框、```语言代码块、| 表格 |、---分隔线，以及单独一行带图注的图片 - TapCub 扩展：
{{网站统计 > 页面}}显示成菜单路径按键，^2^是上标，```js:app.js给代码块加文件名
| Markdown | HTML | 说明 |
|---|---|---|
## 安装 {#setup} | <h2 id="setup">安装</h2> | 不写 {#…} 时 id 取标题文字（中文保留原字） |
**注意**：见[文档](/help) | <strong>注意</strong>：见<a href="/zh/help">文档</a> | 站内链接在当前页打开 |
> [!WARNING] 先备份 | <div class="callout callout-warn">… | TIP / NOTE / INFO 是提示，WARNING / CAUTION 是警告 |
 | <figure><img …><figcaption>三季度</figcaption></figure> | 替代文字必填 |
# 标题 | <p># 标题</p> | 语法检查会提示 |
两个示例的转换结果
默认的 Markdown 示例是一小段讲跳出率的文章；HTML 示例是从网页复制的一份流量周报。
| 示例 | 标题 | 链接 | 图片 | 检查结果 |
|---|---|---|---|---|
| Markdown 文章 | 4 | 1 | 1 | 写法全部支持；识别到 1 个问答 |
| HTML 周报 | 2 | 1 | 1 | 1 张图片缺替代文字；去掉 1 段脚本；h1 转成了 # |
HTML 示例里的 <br> 变成 Markdown 的硬换行（行尾两个空格），右对齐的「访客」列保留成 --:，<em> 变成 *旧文章*。
转换时最常踩的坑
大多数「转出来不对」，问题出在不同平台的 Markdown 方言，而不是转换本身。
正文里又写一个 H1
博客模板已经把文章标题输出成 H1，正文再写「# 」就出现两个 H1。正文标题从 ## 开始。
图片不写替代文字
替代文字是读屏软件朗读、搜索引擎理解图片的依据。写一句图片里是什么，不要写「图1」。
在 Markdown 里夹 HTML
出于安全考虑，很多渲染程序（包括这一个）会把标签转义。在一个编辑器里好用的 <div>，换个平台就成了一串文字。
列表缩进太深或混用
嵌套三层以上、Tab 和空格混用，每个平台渲染出来都不一样。列表控制在两层以内最稳妥。
文章上线之后
转换是发布前的最后一步。发布之后谁在看、从哪来、点了什么，TapCub 能告诉你。
Markdown 怎么转 HTML？
方向选「Markdown → HTML」，把 Markdown 粘进输入框，HTML 马上出现，下面还有排版预览。可以复制，也可以下载成 .html 文件；想要能直接打开的网页，勾选「输出完整 HTML 文档」。
HTML 怎么转 Markdown？
方向选「HTML → Markdown」，粘贴 HTML 片段或整个网页源码都行。标题、段落、列表、链接、图片、表格和代码块会被转换；脚本、样式和嵌入内容会被去掉，并在语法检查里列出来。
用的是哪种 Markdown 语法？
Markdown → HTML 用的就是 TapCub 官网博客和帮助中心在用的渲染程序：只有 ## 到 #### 标题、列表嵌套一层、提示框和带图注的图片，不支持原始 HTML。HTML → Markdown 输出 GitHub 风格（GFM）的 Markdown，主流编辑器和静态站点生成器都能读。
为什么我写的 # 标题变成了普通文字？
博客文章的标题本身就是 H1，所以这套规则的正文标题从 ## 开始，语法检查会指出是哪一行。反过来从 HTML 转 Markdown 时，勾选「所有标题降一级」，h1 就会变成 ##。
转出来的 HTML 能直接放到网站上吗？
所有文字都经过转义，原始 HTML 不会被带过去，输出里只有规则生成的标签。链接按原样保留：javascript: 链接会被检查出来；不是你自己写的内容，发布前还是要看一遍链接。
预览里为什么不显示图片？
预览不会去请求你粘贴的图片网址，保证内容不离开浏览器。每张图片显示成一个占位框，写着替代文字和地址，正好可以检查替代文字有没有写。
表格能转吗？
能，两个方向都可以。如果数据来自 Excel、WPS 或飞书表格，用表格转换工具更方便：直接粘贴表格，还能转成 JSON 和 CSV。
内容会上传吗？
不会。转换全部在浏览器里完成，粘贴的文字和打开的文件不会保存、不会写进网址，也不会发送给 TapCub。