HTML 转 Markdown 转换器：即时转换 HTML 内容

为什么要将 HTML 转换为 Markdown？

HTML 是网络的语言，但它冗长啰嗦，原始形式难以阅读。Markdown 提供了一种更简洁、更贴近人类阅读习惯的替代方案，它在保留标题、链接、列表、强调等核心结构的同时，避免了成对开合标签带来的杂乱。

在将内容从 CMS 平台迁移到静态站点生成器、从网页中提取可读文本，或将文档迁移到便于 Git 管理的 Markdown 仓库时，将 HTML 转换为 Markdown 就显得尤为重要。

HTML 转 Markdown 的工作原理

转换器会解析 HTML 的 DOM 树，将每个元素映射为其对应的 Markdown 写法，同时保留结构和内容。

• 块级元素——<h1> 至 <h6> 变为 # 标题；<p> 标签变为以空行分隔的段落；<ul>/<ol> 变为 Markdown 列表
• 内联元素——<strong>/<b> 变为 **加粗**；<em>/<i> 变为 *斜体*；<a href> 变为 [文本](url)；<code> 变为反引号包裹的代码
• 复杂结构——<table> 元素变为 Markdown 表格；<pre><code> 变为围栏代码块；<img> 变为 

何时使用该转换器

每当你需要把内容从网页迁移到以文本为主的工作流时，HTML 转 Markdown 都很有用。

• CMS 迁移——将 WordPress 或 Drupal 的博客文章导出为 HTML，再转换为 Markdown 供 Hugo、Jekyll 或 Astro 使用
• 文档整理——将杂乱的 HTML 文档转换为简洁的 Markdown，用于 README 文件或 wiki 页面
• 内容归档——以轻量、可进行版本控制的 Markdown 格式保存网页内容

技巧与最佳实践

遵循以下准则，即可从 HTML 输入中获得干净整洁的 Markdown 输出。

• 先整理 HTML——在转换前移除内联样式、空标签和多余的包裹层，以获得更干净的输出
• 检查表格格式——带有合并单元格或嵌套结构的复杂 HTML 表格，可能无法完美转换为 Markdown 表格
• 核查图片引用——确保 <img> 的 src 属性使用绝对 URL，或在转换后更新相对路径

常见问题解答

转换器会处理内联 CSS 样式吗？

由于 Markdown 没有样式机制，内联样式会在转换过程中被剥离。只有结构性元素（标题、列表、链接、强调）会被保留。如果样式信息很重要，可以考虑使用扩展的 Markdown 方言，或直接保留 HTML。

JavaScript 和 script 标签会怎样处理？

script 标签、事件处理器以及其他非内容型 HTML 元素会在转换过程中被移除。转换器专注于提取可读的内容结构，而非可执行代码。

转换器能处理复杂的嵌套 HTML 吗？

可以。转换器会递归遍历整个 DOM 树，处理嵌套列表、列表中的引用块以及其他复杂结构。不过，层级过深或不规范的 HTML 写法，可能会生成需要稍作手动整理的 Markdown。