返回作品列表
HTML 预览编辑器
在浏览器里打开本地 HTML，直接修改文字和格式，再下载修改后的文件。单文件工具，MIT 开源。
功能特点
- 打开本地 HTML，在页面预览中直接修改文字
- 选中文字后调整加粗、字体、颜色和高亮
- 查看编辑后的源码，下载完整 HTML 文档
- 不需要安装开发环境，公开源码采用 MIT 协议
技术栈
HTML
CSS
JavaScript
我经常需要检查 AI 做出来的 HTML。标题和段落只差几个字时，直接在预览里改，会比来回描述修改位置更顺手。
这个编辑器只需要一个文件。到上方源码仓库下载 index.html，用桌面浏览器打开，选择自己的 HTML 即可编辑。
我想让使用者自己改完页面
AI 生成的页面，常常还有几个字需要改。我想让使用者打开已有的 HTML，就能改文字、调一点格式，最后拿到可以继续使用的文件。
这里的练习用了一份虚构课堂任务单。改完以后，我下载了新的 HTML，再打开它检查文字和样式有没有丢。
怎么用
打开编辑器 → 点击“打开文件” → 在预览里修改文字 → 点击“保存修改” → 重新打开下载文件检查。
“保存修改”实际会下载一个 HTML 文件，不会直接写回原文件。建议保留原稿，核对下载目录里的文件名后再交付。
我用课堂任务单检查了一遍
2026 年 9 月 21 日，我在桌面 Chromium 中打开这份任务单，改了标题，查看源码，然后下载并重新打开。测试页的文字和原有样式保留了下来，上方封面就是这次操作的截图。
这次核验覆盖静态任务单，不代表所有复杂网页或浏览器都已通过测试。
使用边界
- 适合文字和局部格式微调；登录、数据库和业务逻辑需要回原项目修改。
- 文件在浏览器里处理，没有上传文件到服务器的处理步骤；编辑器的字体和原文件里的远程资源仍可能联网。
- 只打开可信 HTML。工具会保留页面脚本与结构，不是隔离不可信网页的安全沙箱。
- 外部资源、框架渲染和交互组件可能影响保存结果，交付前应重新打开并检查。
完整操作说明见 这篇实践文章。
这段流程可以拿来做培训练习
培训时，我们可以拿一份现有材料，先试着让 AI 做成网页。结果出来了，老师检查知识点，自己改掉不合适的文字，最后重新打开文件看一遍。如果需要定制，我会先和你说清要编辑哪类页面、能改哪些地方，再用你认可的脱敏样例检查结果。