Word 转 HTML:打开全是代码怎么办

Word/WPS「另存为网页」导出的文件,打开链接要么只剩一屏源码、要么排版错乱。用 AI 工具把它还原成真正的 HTML,再上传就正常了。

2026 年 9 月 26 日 · 约 6 分钟阅读

上传 HTML 文件后,打开链接看到的是一屏 HTML 代码(<!DOCTYPE html>、<div> 这类文字),而不是渲染好的网页——这多半不是托管平台的问题,而是文件本身来自 Word / WPS「另存为网页」。

Word 处理 HTML 有两条常见路径,两条都会出问题:

你在 Word 里的操作 Word 实际做了什么 打开链接后
把 HTML 源码粘进 Word,再「另存为网页」 把源码当成普通文字,转义成 <!DOCTYPE html> 塞进文档正文 只看到源码文本,页面完全不渲染
用 Word 写文档,再「另存为网页」 保留 Word 排版,生成大量 mso-* 代码 能显示,但样式错乱、图片缺失

两种情况的根因是同一个:Word 是文档编辑器,不是代码编辑器。它把 HTML 当作要排版的文档内容,而不是要交给浏览器的页面结构。

好消息是:你不需要懂编程。把文件交给 AI 工具,让它重新给你一份真正的 HTML 就行。下面是完整步骤,照着做即可。


第一步:把文件发给 AI 工具

  1. 打开一个能上传文件的 AI 工具(手机 App 或电脑网页都行,都是免费的):
    • 豆包(doubao.com)
    • DeepSeek(chat.deepseek.com)
    • 智谱清言(chatglm.cn)
    • Kimi(kimi.com)
    • 千问(tongyi.com)
    • WorkBuddy
    • 国际用户:ChatGPT、Claude
  2. 注册 / 登录(手机号或邮箱,约 1 分钟)。
  3. 在对话框里找到 「+」/ 回形针 /「上传文件」图标,选中从 Word 导出的那个 .html 文件。100KB 左右的文件这些工具都能处理,放心上传。

小提示:不要去粘贴几百 KB 的乱码文件内容,直接上传文件最省事,AI 才能完整读到里面的内容。

第二步:把提示词复制给 AI

按你的情况选一条,整段复制粘贴到对话框里发送即可(提示词里已经说清了要做什么,不用你再解释):

情况 1:打开链接只有代码(源码被 Word 转成了文字)

这个文件是 Word/WPS「另存为网页」导出的:我原本要发布的 HTML 源码被 Word 当成普通文字,转义后放进了文档正文(表现为 <!DOCTYPE html>、<div> 这类文字)。 请你:

  1. 从文档正文里找出那段被转义的 HTML 源码,反转义(把 &lt; 变回 <、&gt; 变回 >、&amp; 变回 &);
  2. 还原成一份完整、可直接在浏览器渲染的 HTML 文件(从 <!DOCTYPE html> 到 </html>);
  3. 丢掉 Word 自己的排版、样式和注释(StartFragment、mso-* 等);
  4. 原页面里的 <style>、<script> 内容完整保留,不要改写。

最后只输出这一个完整的 .html 文件。

情况 2:你用的是 Word 文档,想变成能分享的网页

这是一份 Word 文档导出的网页文件,请把它转换成一份干净、现代的 HTML 页面:

  1. 去掉所有 Word 排版代码(mso-*、<o:p>、条件注释等);
  2. 保留标题层级、段落、列表、表格、图片位置等文档结构;
  3. 给出一份响应式样式(手机上也能正常阅读),字体使用系统字体栈;
  4. 图片如果缺失,用文字标出原本的位置。

最后只输出这一个完整的 .html 文件。

如果 AI 回复「我看不到文件」,补一句:「文件我已经上传了,请直接按上面的要求处理,只输出完整的 .html 文件。」

第三步:检查 AI 给出的结果

  • 正确的回复是一整段 HTML 代码:以 <!DOCTYPE html> 开头、以 </html> 结尾。

  • 如果它只给了半截、或者夹了一堆解释,回它一句:

    请只输出完整的 .html 代码,从 <!DOCTYPE html> 到 </html>,不要任何解释。

  • 如果它说处理不了这个文件,换一个工具再试(各家对文件内容的解析能力有差异)。

第四步:把结果保存成 .html 文件

这一步最容易卡住,按下面的方式做:

电脑(推荐)

  1. 点 AI 回复里代码块的复制按钮(在代码块右上角,没有就手动全选复制);
  2. 打开记事本(Windows)或文本编辑(Mac,需要先点「格式 → 制作纯文本」);
  3. 把代码粘贴进去,然后「另存为」:
    • 文件名:我的页面.html(后缀必须是 .html)
    • 保存类型:所有文件(不要选 .txt)
    • 编码:UTF-8
  4. ⚠️ 不要用 Word / WPS 打开这个文件再保存——那会把它又变回 Word 网页,白忙一场。

手机

  • 有的 AI 工具支持「导出 / 下载」结果,直接导出成 .html 最省事;
  • 没有的话,用手机上的文本编辑 App 新建文件、粘贴代码、保存为 .html。

第五步:上传前先自己看一眼

  1. 双击(手机上点开)刚保存的 .html 文件,应该看到网页,而不是代码;
  2. 确认图片、样式显示正常;
  3. 没问题就上传到 SharingHTML,打开生成的链接再确认一次。

如果页面的图片或样式还是缺,那是另一个问题:页面引用了没有一起上传的本地图片 / CSS / JS,按《如何把多个文件合并成一个 HTML 文件》的说法,让 AI 把资源一起内联进这一个文件即可。


常见问题

为什么 Word 另存为网页后,打开链接全是 HTML 代码?

因为 Word 不把 HTML 当代码:源码粘进 Word 时,<div> 这样的内容会被当成普通文字,转义成 &lt;div&gt; 后放进文档正文。浏览器打开链接看到的是「一段文字」而不是页面结构,只能把源码原样显示出来。

用 AI 修复 Word 导出的 HTML,提示词怎么写?

核心是四句话:找出正文里被转义的 HTML 源码并反转义;还原成完整的、可渲染的 HTML 文件;丢掉 Word 的排版代码(mso-*、StartFragment 等);原页面的 <style> / <script> 内容原样保留。最后要求「只输出一个完整的 .html 文件」,回复里就不会夹带解释文字。上面「第二步」里两条提示词可以直接复制使用。

AI 给出的结果,怎么变成能上传的 .html 文件?

把 AI 输出的代码整段复制出来,用「记事本」(Windows)或「文本编辑」(Mac,先切到纯文本模式)粘贴,再「另存为」:文件名以 .html 结尾、保存类型选「所有文件」、编码选 UTF-8。也可以直接让 AI「把结果导出一个 .html 文件」再下载。⚠️ 千万不要用 Word / WPS 打开保存,否则它又会变成 Word 网页。

Word 文档(不是 HTML 源码)怎么变成能分享的网页?

用 Word/WPS 的「另存为网页」能快速得到 HTML,但它会夹带大量 Word 排版代码、图片还依赖本地文件夹,效果不稳定。更推荐把文档内容直接交给 AI 工具,让它输出一份干净的响应式 HTML(见上面「情况 2」的提示词),再上传。


结论

打开链接只剩代码、或者页面排版错乱,先确认文件是不是 Word/WPS 导出的。Word 适合写文档,不适合产出要托管的 HTML。

正确做法是让 AI 工具(豆包、DeepSeek、智谱、Kimi、WorkBuddy、千问)把内容还原成一份真正的、自包含的 HTML 文件,本地验证无误后再上传,链接打开就是正常的网页。

把内容转成真正的 HTML 再上传

修复后的文件几秒即可上线分享。