FormatArc HTML 转 Markdown 的转换结果，可用于准备 LLM 上下文FormatArc HTML 转 Markdown 的转换结果，可用于准备 LLM 上下文
作者: FormatArc 编辑部发布日期: 2026-09-02更新日期: 2026-09-02

LLM 输入用 Markdown 还是 HTML：ai markdown vs html 实测对比

把网页直接复制粘贴进 ChatGPT、Claude、Gemini，几乎每次都要付出两笔代价：token 浪费，以及回答质量下降。你复制下来的 HTML 里塞满了 div 包裹层、class 属性、内联脚本和追踪像素，这些对模型理解正文毫无帮助。转成 Markdown 之后，这些冗余被剥掉，模型只拿到结构和正文本身。

这篇文章从 LLM 输入格式的视角对比 Markdown 和 HTML，用本仓库基于 OpenAI tiktoken 的实测数据和公开基准说明具体差异，同时整理仍然该保留 HTML 的例外场景，以及一份不经过外部服务器、直接在浏览器里把 HTML 转成 Markdown 的实操流程。

结论先行：LLM 输入优先 Markdown

给 LLM 输入文档时，优先选 Markdown。与同等内容的 HTML 相比，token 数大致降到三分之一到十分之一，公开验证数据显示表格、列表、代码块的信息抽取准确率也更高。

把要转换的 HTML 粘贴到 FormatArc 的 HTML 转 Markdown 工具，再把转换结果复制进提示词即可。转换在浏览器内用 JavaScript 完成，你粘贴的 HTML 不会发送到 FormatArc 服务器或任何第三方服务。

LLM 怎么读取格式

LLM 不像浏览器那样“看”渲染后的页面，它把原始文本源当作 token 流来处理。尖括号、类名、内联样式，所有字符都在占用本应留给正文内容的上下文窗口（context window）。

由此产生两个问题：

  • 传入包裹元素很多的 HTML，会挤占指令、示例（few-shot）和模型回答的空间。
  • class="text-base text-gray-700"、data-* 属性、统计标签这类标记噪音，会让模型漏掉本该摘要或抽取的正文。

Markdown 用一两个符号，而不是成对的开闭标签，来表达同样的结构（标题、列表、链接、代码）。结果不仅长度大幅缩短，而且更接近 LLM 在训练语料里最常见的模式。GitHub 的 README、技术文档站、Stack Overflow 的帖子、开发者论坛的帖子，公开技术文档里有相当一部分是 Markdown 写的。

Markdown 之所以在结构上更轻，根源在标签模型本身。网页或 CMS 里实际复制到的 HTML（序列化后的 DOM）中，大多数容器元素都以开闭标签对的形式出现（<p>...</p>、<li>...</li>、<td>...</td>、<div>...</div>）。也就是说，每个元素的标记成本要付两次：开一次，关一次（HTML 规范允许省略部分闭合标签，但渲染后的 DOM 序列化和模板引擎最终都会输出它们，所以你复制到的就是成对标签）。嵌套结构会让这个成本成倍增加：表格单元格里的列表项，进入时压入开标签，离开时压出闭标签，每个标签还能挂 class、id、style、data-* 属性，只会增加模型用不上的字符数。

相反，Markdown 用只放一次的单一标记表达同样的结构。标题是 #，列表项是 -，表格列分隔是 |，段落分隔就是一个空行。没有要重复的闭合 token，也没有要填充的属性槽，所以每个元素的开销是一个小而恒定的常数。下面实测数据体现的差异，正来自这种开闭标签重复的缺失。

这些结构本身有公开的规范定义。核心语法（标题、列表、链接、代码块、段落）由 CommonMark 规范 标准化，表格、任务列表、删除线、自动链接扩展由 GitHub Flavored Markdown 规范 定义。两者都是版本管理稳定的标准文档，也是 LLM 训练用的公开语料里 Markdown 保持一致性的原因之一。

各模型确切的训练数据配比没有公开，所以这里不下定论。可验证的事实是：Markdown 在公开技术文档里被大量使用，且主要 AI 模型厂商在官方提示词指南中明确推荐 Markdown 结构。Anthropic 的 Claude 提示词设计指南、Google 的 Gemini 提示词指南，都建议用标题和项目符号来清晰划分章节。

实测对比：ai markdown vs html 的 token 效率

为了公平比较各格式的效率，我新写了一篇解释 JSON 是什么的短技术文档。内容是一个 h2 标题、两三个段落、三项目列表、一个 JSON 代码块、一个三列表格。把同一文档分别写成 HTML、Markdown（CommonMark + GFM）、纯文本（去掉标签、表格用制表符分隔）三种格式。三种格式的原始文件和复现脚本已提交到仓库的 scripts/benchmarks/markdown-vs-html-for-llms/，本节末尾也放了全文。

token 数用 OpenAI 官方 tiktoken 0.13.0 库实测。cl100k_base 是 GPT-3.5 / GPT-4 系列用的分词器，o200k_base 是 GPT-4o 系列用的。

格式字符数（UTF-8）字节数cl100k_base tokeno200k_base token
HTML（含 class 与 aria 属性）2,9112,911832835
Markdown（GFM）1,0711,071243247
纯文本（去标签）986986213217

相比 HTML，Markdown 的 token 数减少 70.8%（cl100k_base）/ 70.4%（o200k_base），纯文本减少 74.4% / 74.0%。字符数上 Markdown 减少 63.2%，纯文本减少 66.1%。每个 token 的字符数，HTML 是 3.50，Markdown 是 4.41，纯文本是 4.63。HTML 里的特殊符号（<、>、=、"）和属性名拉低了分词器效率，数字能直接看出来。Claude 和 Gemini 的分词器实现不同，绝对数值会有出入，但 BPE 类分词器中，HTML 包裹标签导致 token 增加的倾向是一致的。

上面是特定合成样本文档的实测结果。真实网页比它复杂得多，所以外部基准报告了更大的差距：

不管信哪个基准，方向一致：HTML 要付包裹标签的成本，而要在一次提示词里塞多篇文档的场景，这个差距会成倍累积。

使用的样本文档（全文）

HTML 版（2,911 字符 / 832 cl100k token） 
<section class="prose prose-lg max-w-none">
  <h2 class="text-2xl font-semibold mt-8 mb-4" id="what-is-json">What is JSON?</h2>
  <p class="text-base text-gray-700 leading-relaxed mb-4">JSON (JavaScript Object Notation) is a lightweight, text-based data format used to exchange structured data between systems. It originated in JavaScript but is now language-independent and supported by virtually every modern programming language.</p>
  <p class="text-base text-gray-700 leading-relaxed mb-4">A JSON document is built from a small set of building blocks:</p>
  <ul class="list-disc pl-6 mb-4 space-y-1">
    <li class="text-base text-gray-700">Objects: unordered collections of key-value pairs wrapped in <code class="bg-gray-100 px-1 rounded">{}</code></li>
    <li class="text-base text-gray-700">Arrays: ordered lists of values wrapped in <code class="bg-gray-100 px-1 rounded">[]</code></li>
    <li class="text-base text-gray-700">Primitives: strings, numbers, booleans, and <code class="bg-gray-100 px-1 rounded">null</code></li>
  </ul>
  <p class="text-base text-gray-700 leading-relaxed mb-4">Here is a minimal example representing a single user record:</p>
  <pre class="bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto mb-4"><code class="language-json">{
  "id": 42,
  "name": "Ada Lovelace",
  "active": true
}</code></pre>
  <p class="text-base text-gray-700 leading-relaxed mb-4">The core value types and their typical use cases are summarized below.</p>
  <table class="w-full border-collapse mb-4" aria-label="JSON value types">
    <thead>
      <tr class="border-b border-gray-300">
        <th class="text-left p-2 font-semibold">Type</th>
        <th class="text-left p-2 font-semibold">Example</th>
        <th class="text-left p-2 font-semibold">Typical use</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-gray-200">
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">string</code></td>
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">"hello"</code></td>
        <td class="p-2">Names, labels, free text</td>
      </tr>
      <tr class="border-b border-gray-200">
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">number</code></td>
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">3.14</code></td>
        <td class="p-2">IDs, counts, measurements</td>
      </tr>
      <tr class="border-b border-gray-200">
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">boolean</code></td>
        <td class="p-2"><code class="bg-gray-100 px-1 rounded">true</code></td>
        <td class="p-2">Flags, feature toggles</td>
      </tr>
    </tbody>
  </table>
  <p class="text-base text-gray-700 leading-relaxed mb-4">JSON is widely used for REST API payloads, configuration files, and persisting application state because it is easy to read, easy to parse, and supported everywhere.</p>
</section>
Markdown 版 / CommonMark + GFM（1,071 字符 / 243 cl100k token） 
## What is JSON?

JSON (JavaScript Object Notation) is a lightweight, text-based data format used to exchange structured data between systems. It originated in JavaScript but is now language-independent and supported by virtually every modern programming language.

A JSON document is built from a small set of building blocks:

- Objects: unordered collections of key-value pairs wrapped in `{}`
- Arrays: ordered lists of values wrapped in `[]`
- Primitives: strings, numbers, booleans, and `null`

Here is a minimal example representing a single user record:

```json
{
  "id": 42,
  "name": "Ada Lovelace",
  "active": true
}
```

The core value types and their typical use cases are summarized below.

| Type | Example | Typical use |
| --- | --- | --- |
| string | `"hello"` | Names, labels, free text |
| number | `3.14` | IDs, counts, measurements |
| boolean | `true` | Flags, feature toggles |

JSON is widely used for REST API payloads, configuration files, and persisting application state because it is easy to read, easy to parse, and supported everywhere.
纯文本版（986 字符 / 213 cl100k token） 
What is JSON?

JSON (JavaScript Object Notation) is a lightweight, text-based data format used to exchange structured data between systems. It originated in JavaScript but is now language-independent and supported by virtually every modern programming language.

A JSON document is built from a small set of building blocks:

Objects: unordered collections of key-value pairs wrapped in {}
Arrays: ordered lists of values wrapped in []
Primitives: strings, numbers, booleans, and null

Here is a minimal example representing a single user record:

{
  "id": 42,
  "name": "Ada Lovelace",
  "active": true
}

The core value types and their typical use cases are summarized below.

Type	Example	Typical use
string	"hello"	Names, labels, free text
number	3.14	IDs, counts, measurements
boolean	true	Flags, feature toggles

JSON is widely used for REST API payloads, configuration files, and persisting application state because it is easy to read, easy to parse, and supported everywhere.

三种格式的原始文件、基于 OpenAI tiktoken 的复现脚本（measure.py）、实测结果 JSON，都提交在仓库的 scripts/benchmarks/markdown-vs-html-for-llms/。执行 python3 -m venv venv && ./venv/bin/pip install tiktoken==0.13.0 && ./venv/bin/python measure.py，能得到与上表完全一致的数字。

不经过外部服务，转换机密 HTML

token 省多少、抽取准不准，别的文章也讲过。但大多数文章跳过的关键点是：转换这一步，原始 HTML 到底经过哪里。

市面上很多在线 HTML 转 Markdown 工具在后端服务器上处理转换。你粘贴 HTML 后，它被 POST 到 API，服务器转换完再把结果返回。公开维基片段这样没问题，但下面的数据就不合适了：

  • 从 Confluence、Notion 或飞书、语雀导出的内部文档
  • 含客户名和订单信息的管理后台 HTML 导出
  • 营销文案审批前、staging 环境的网页响应体
  • 含个人信息的 HTML 邮件正文

FormatArc 的 HTML 转 Markdown 是静态页面。Markdown 转换通过页面内置的 Turndown JavaScript 库在客户端直接执行。你粘贴的 HTML 在浏览器里解析，不产生任何把原始数据发到外部服务器的网络请求。想自己验证的话，打开浏览器开发者工具（DevTools）的网络面板，在 HTML 输入框里放一个独特字符串，点运行，确认没有包含该字符串的外发请求。

“浏览器内转换”指的是不上传被转换文档的正文。页面本身通过 CDN 用 HTTPS 分发，首次访问可能加载常规访问统计脚本，但你输入的文档数据不会外传。

信息抽取准确率：表格、代码、列表

token 省多少是一面，最终成败由提示词产物的信息抽取准确率决定。

公开基准中，Markdown 在以下任务上优于 HTML：

  • 表格抽取：ReleasePad 分析 引用的 GPT 系列模型评估中，Markdown 表格抽取准确率 60.7%，同等内容的 HTML 表格 53.6%，相差约 7.1 个百分点。
  • 代码块处理：Markdown 的围栏代码块加上语言提示（```python），语言信号被干净保留。HTML 里语言信息藏在类属性中（<pre><code class="language-python">），模型得从标记里自己解析出来。
  • 嵌套列表：Markdown 的缩进用很少的 token 就给出强层级信号。HTML 的 <ul><li><ul><li> 嵌套结构消耗大量 token，而且模型有时会判断错子项属于哪个父项。

这不意味着 Markdown 万能（下一节整理 HTML 占优的场景）。但对于“帮我总结这篇文档”“抽取这些字段”“改写这一段”这类日常提示词任务，准确率和 token 效率两个方向，Markdown 都更占优。

该保留 HTML 的例外

Markdown 不是永远最优。有三种情况，直接传 HTML 原文更合适。

语义信息在属性里时

aria-label、role、itemprop、microdata、Open Graph 标签等，在 Markdown 里没有对应语法。当你让模型做无障碍审计、商品元数据抽取、schema.org 标记校验时，HTML 属性本身就是分析对象。用 Markdown 转换器把属性去掉，任务前提就垮了。

需要分析视觉布局或图形时

SVG 图、内嵌图表、<iframe> 组件、交互组件的自定义数据属性，只保留在 HTML 里，Markdown 中会消失。2026 年 5 月 Anthropic 的 Thariq Shihipar 发布的 Using Claude Code: The Unreasonable Effectiveness of HTML 提出，对生成面向人类的富输出而言，HTML 的表现力（带样式的布局、交互元素、内嵌 SVG）值得付出更高的 token 成本。这个逻辑对称地适用于输入：如果模型要分析视觉排布或图形元素，就该传 HTML。

输出结果要直接在浏览器渲染时

如果要把模型生成结果直接渲染到 Web 应用界面，跳过中间的 Markdown、统一走 HTML 管线，工具链会更简单。

实用工作流：从网页到 LLM 用的 Markdown

给一份不付标记成本、把网页或 HTML 邮件内容安全传给 LLM 的实操流程。

第 1 步：获取 HTML

在 Chrome 或 Firefox 里对目标页面右键，选“查看网页源代码”，或者在开发者工具（Elements 面板）里复制 <article> 或 <main> 元素的 outerHTML。HTML 邮件则从邮件客户端的“查看源”菜单获取。

如果只需要正文，就复制正文区域的标签树，而不是整个页面。导航、侧边栏、页脚在这一步剔除，比后续任何自动化都更能省 token。

第 2 步：在浏览器里转换

把 HTML 粘贴到 HTML 转 Markdown 并运行转换，右侧面板会生成 Markdown。

FormatArc HTML 转 Markdown 的转换结果，可用于准备 LLM 上下文FormatArc HTML 转 Markdown 的转换结果，可用于准备 LLM 上下文

表格、图片路径、单元格合并等细节转换规则，这里不展开。反方向——把 LLM 用 Markdown 回答的结果转回 HTML——FormatArc 也有对应工具，同样在本地浏览器里处理。

第 3 步：粘贴前清理无关内容

浏览转换后的 Markdown，手动删掉与正文无关的元素：

  • 开头变成项目符号的导航链接
  • 仍以段落形式残留的 Cookie 同意横幅
  • 页脚的版权声明或免责声明

花一两分钟做这个简单清理，能显著扩大提示词的有效上下文空间。

第 4 步：用清理后的 Markdown 写提示词

给文档摘要和信息抽取任务一个可复用的提示词模板：

以下是一个文档页面的 Markdown。

任务：<用一句话写清楚>
约束：<指定输出格式、篇幅等>

---

<粘贴清理后的 Markdown 内容>

Markdown 标题（#、##）在模型回答时充当“在 XX 章节中……”这样可具体引用的锚点，能提升回答的精确度。

转换 LLM 输入时的 5 个常见坑

转换过程容易出错的 5 个点：

  1. 代码块语言提示丢失：<pre><code class="language-python"> 应转成带语言提示的围栏代码块（```python）。有些转换器会丢掉提示，模型就得猜语言。
  2. colspan / rowspan 表格塌陷：GFM 管道表格只支持矩形网格，合并单元格会被压平。如果是结构化数据表，可以先导出为 CSV 再转 Markdown，得到干净的表格。表格的写法、对齐与转义，见 Markdown 表格语法 和 GFM 表格速查。
  3. 行内 HTML 残留：CommonMark 和 GFM 都允许行内 HTML。转换结果里如果还留着 <span class="text-red">重要</span> 这类标签，等于又付了一遍包裹标签的 token 成本。尽量用只生成纯 Markdown 的转换器。
  4. 相对路径的图片与链接：<img src="/images/foo.png"> 会变成 ![](/images/foo.png)，但 LLM 访问不了该本地路径。要么改成绝对 URL，要么在提示词里注明图片不可用。
  5. CommonMark 与 GFM 规范差异：表格、任务列表、删除线、自动链接是 GFM 扩展语法。如果下游工具只支持严格的 CommonMark，表格可能渲染不出来。两种规范的边界见 CommonMark 与 GFM 的区别。

格式选择速查表

格式LLM 输入推荐用途token 成本优点缺点
Markdown大多数普通提示词的默认（文档、技术博客、README、对话记录）低结构与训练数据一致，保留表格、列表、代码丢失属性语义，不支持内联样式
纯文本纯文本抽取、OCR 后处理最低最轻层级结构丢失，不适合表格或列表
HTML无障碍审计、schema.org / microdata 校验、视觉布局分析高保留标签属性、元数据、内嵌媒体包裹标签成本，噪音分散模型注意力
JSON结构化记录、API 响应、函数调用 payload中schema 明确，便于按 key 模式匹配对普通行文冗余，引号开销
XMLClaude 提示词内的章节分隔（Anthropic 推荐）中提示词各部分边界清晰对行文冗余（正文本身用 Markdown 更优）

常见问题

给 ChatGPT 的上下文，用 Markdown 还是纯文本？

如果文档有任何结构（标题、列表、表格、代码块），推荐 Markdown。完全扁平的纯散文用纯文本 token 更少。但纯文本虽然 token 最少，也丢掉了模型在长上下文里定位所需的结构信号。

Claude 理解 Markdown 比 HTML 更好吗？

Claude 两种都能处理。Anthropic 官方提示词指南建议用 Markdown 标题和项目符号划分正文结构，同时用 XML 标签（<instructions>、<context>）作为提示词各部分之间的边界。正文的 token 效率 Markdown 占优，在正文外围用 XML 作结构化框架更高效。

结构化数据用 JSON 或 XML 不是更好吗？

数据本质上是表格或记录形态（API 响应、配置值）时，JSON 合适。想明确提示词内章节边界时，XML 有利（Anthropic 的文档就是这个风格）。但普通文档、文章这类行文，两种都超不过 Markdown 的 token 效率。

能把网页 URL 直接转成 LLM 用的 Markdown 吗？

在静态浏览器环境里，仅靠客户端直接抓取任意外部 URL 是做不到的（浏览器安全策略 CORS 会拦截）。先在浏览器里保存网页（Ctrl+S / Cmd+S），或从开发者工具复制源码，再粘贴到 FormatArc 的 HTML 转 Markdown 工具。转换本身在浏览器内安全完成。

FormatArc 的转换真的只在浏览器里执行吗？

是的，转换任务 100% 在浏览器内执行。你粘贴的 HTML 由页面内置的 Turndown JavaScript 库在本地解析，不产生包含输入数据的外发网络请求。CDN 和访问统计脚本的加载与访问普通静态站点相同，但你输入的文本数据不会被发送。

总结

  • 给 LLM 的上下文输入，Markdown 比 HTML 更有利。能大幅省 token，让模型聚焦正文而非标记噪音。
  • 本仓库实测同等内容省约 71% token（cl100k_base），外部基准也确认 68%–87% 的省幅。
  • 处理内部文档、客户数据、未公开草稿等机密 HTML 时，转换工具的安全性很重要。FormatArc 的 HTML 转 Markdown 在浏览器内本地运行，原文不会发送到外部服务器。
  • 反方向——把 LLM 的 Markdown 回答转成 HTML——FormatArc 的对应工具同样在本地浏览器处理。