用 HTML 预览编辑器修改 AI 网页，文字和格式可以直接改

AI 已经把页面做出来了，打开一看，标题要换、说明要补、某句话想加粗。为了这几处修改，再把整份 HTML 发回去重做，有时反而增加检查工作。

我做的 HTML 预览编辑器就处理这一小段：打开文件，在页面上直接改，保存后再打开检查。

它是一个单文件工具，已经以 MIT 协议开源。你可以从 GitHub 仓库 下载 index.html，用桌面浏览器打开，不需要安装开发环境。

你可以先拿一个副本试

你可以先下载这份 HTML 编辑练习任务单。在链接上选择“另存为”即可保存；页面里的下载按钮也可以直接下载文件。它用的是虚构的机械识图练习，没有学生资料，图形和样式放在同一个文件里。

用浏览器打开练习文件以后，先看一眼原来的标题和图形，再把它交给编辑器。这一轮只改标题和一段说明，文件里的题目内容用于演示编辑操作。

如果你手里的是一份课堂任务单、活动说明或 AI 生成的静态展示页，可以按下面的顺序操作：

1. 先复制原 HTML，保留原稿。
2. 打开编辑器，点击右上角“打开文件”，选择要修改的 HTML。
3. 在预览里点击文字，修改标题或段落。
4. 需要改格式时，选中文字，再使用浮动工具栏里的加粗、字体、文字颜色等功能。
5. 点击“保存修改”，下载新的 HTML。
6. 单独打开下载文件，检查文字、样式和原有按钮。

这里的“保存修改”会触发浏览器下载，不会直接覆盖原来的文件。下载目录里可能出现带编号的同名文件，最后要确认交出去的是哪一份。

这次我改了文字，再重新打开检查

为这次网站更新，我用一份虚构的机械识图任务单做了操作核验：打开文件，把标题改成“机械识图：三视图练习”，查看源码，再下载并重新打开。

修改后的标题保留下来了，测试页原有的样式也还在。本文封面就是这次编辑过程的真实截图，页面里的课堂材料仅用于功能演示。

2026 年 10 月 12 日，我又用本文提供的练习文件走了一遍：改标题和说明，下载后重新打开，检查内嵌图形和背景颜色。这些内容保留了下来。另一个相对路径图片样例，连同图片放在原目录时能显示，单独导出 HTML 到另一目录后就缺图了。

编辑器加载完整的 HTML 文档，保存时也导出文档结构。这能保留测试页里的样式，但不等于任意网页都能原样编辑。外部图片、字体、脚本和复杂交互仍然有各自的依赖。

我会用它改文字，功能改动回原项目处理

我会用它处理标题、段落、按钮文案，以及局部文字格式。

如果要新增登录、连接数据库、修改业务逻辑，或者调整由框架生成的复杂界面，就应该回到原项目处理。页面上的文字即使暂时改对，也可能被脚本下一次渲染覆盖。

它也不能替你判断内容是否正确。机械尺寸、课程要求、日期和人名，仍要回到原始材料核对。能直接点着改，解决的是操作门槛。

我也会查看文件引用了哪些资源

编辑动作在本机浏览器中完成，工具没有把文件上传到服务器处理的步骤。但“本地编辑”不能理解成“绝不联网”：编辑器引用了外部字体，打开的 HTML 也可能带有远程图片、字体或脚本。

只加载自己制作或可信来源的文件。涉及学生姓名、成绩或内部资料时，先检查文件里的远程资源和脚本；这款编辑器不承担隔离不可信网页的职责。

保存后不对，我会沿着文件去找

下载目录里可能多了一份同名文件。浏览器加上编号时，我会看刚才下载的文件，而不是继续刷新旧稿。这次提供的练习文件可以拿来试一遍：把标题末尾加上“已检查”，下载后单独打开，确认这几个字还在。

如果文字改了，图片却没了，我会先看图片的地址。像 images/示意图.svg 这样的相对路径，要和对应文件夹一起使用。只把 HTML 拿到另一个目录，浏览器就找不到那张图了。编辑器也不会替你收集外部图片。练习文件把图形直接放进 HTML，是为了让第一次练习少碰到这一层依赖。

字体变化则要看页面是否引用了在线字体。原页面能联网时正常，换到断网电脑上就可能换成系统字体。你准备给教室使用的文件，要在实际电脑和网络条件下打开检查；本练习使用系统字体，没有在线字体链接。

还有一些页面，文字由脚本重新生成。你在预览里改掉它，下一次按钮操作又可能覆盖回来。遇到这种情况，我会回到原项目改负责生成这段内容的地方。

我会把生成和微调分开

对我这样的机械老师，AI 生成页面之后的检查和微调，是实际交付的一部分。

大结构和功能逻辑交给开发工具；已经确定的几处文字，直接在预览中修改，再重新打开验收。每次都能找回原稿，也知道自己改了哪里，这个小工具就够用了。

工具入口与能力说明在 HTML 预览编辑器作品页。如果还没开始生成页面，可以先参考 AI 任务单，把需要的内容、格式和验收方式写清楚，后面的微调会更有依据。

想做机械教学页面，可以接着看 刀具几何课例。如果你希望团队一起学会这段操作，或者现有页面需要改功能，可以把样例和要求发到 培训与定制服务页，我先看材料。