操作教程 · 6 分钟 · 更新于 2026-09-07

AI 生成的 HTML 代码怎么运行?从三个文件到可点击的页面

用每日计划示例练习导入 HTML、CSS、JavaScript,修改标题并检查交互;解释单文件、框架项目和预览限制。

AI 给出一段代码,并不等于已经有了可以打开的应用。先看清它提供的是完整 HTML 页面、三个静态文件,还是需要构建的 React 项目。本教程处理前两种情况,目标是在浏览器里看到一个可以勾选任务、添加任务的“每日计划”页面。

先确认你拿到了哪种代码

完整 HTML 一般包含 <html><head><body>。如果还提供 CSS 与 JavaScript,把它们分别保存为 styles.cssapp.js。不要把 Markdown 的三个反引号也复制进文件。若内容主要是 JSX、import React、package.json 或 npm 命令,这不是可直接运行的静态项目,应先按项目说明构建,或请 AI 输出不依赖框架的 HTML/CSS/JS 版本。

跟着每日计划示例操作

  1. 下载下方示例 ZIP,并先解压。你会看到 index.html、styles.css、app.js 和 README.txt。
  2. 打开 App 工作台,点击“导入 HTML / CSS / JS”。只选择前面三个代码文件,不要选择 ZIP 或 README。
  3. 页面会载入代码并更新预览。也可以通过下方“一键打开示例”进入工作台,再点击“导入教程示例”。这会替换当前编辑器内容,请先导出需要保留的项目。
  4. 在 HTML 标签中找到 <h1>我的每日计划</h1>,把文字改成“我的学习计划”。
  5. 点击“运行项目”,确认预览标题改变。接着勾选一件任务,计数应从 0 / 3 变成 1 / 3。
  6. 在预览的输入框添加“复习一个知识点”,点击添加。列表应出现新任务,总数变为 4。

如何判断真的运行成功

看到页面只能说明 HTML 被显示。颜色与间距正确,说明 CSS 生效;勾选后计数变化、点击添加后出现新任务,才说明 JavaScript 交互运行了。依次检查这三层,可以快速定位问题。这个示例没有服务器、登录或数据库,刷新后任务重置属于预期行为。

常见错误与排查

完成后的练习

再修改副标题,并尝试添加一个包含中文标点的任务。不要改动页面 ID。确认两次修改后都能完成计数,再进入手机预览教程。你会得到一个真正测试过的页面,而不是一张静态效果图。

本篇示例文件

三个教程共用同一个每日计划项目。可自由修改;没有外部依赖,也不会自动保存任务。

index.html · styles.css · app.js

继续练习

作者:HaoWord Studio。按当前工作台功能编写;示例对外部服务、数据库和正式 App 打包没有依赖。