创建并预览静态网页

目标：把一个完整 HTML 文件放进工作区，通过微型服务器验证文件、网络与 JavaScript。无需 Node、Termux 或 Linux。

打开

在 GitHub 查看

准备文件

下载静态网页 ZIP，解压后将 index.html 放入一个空工作区。也可复制下面的完整文件：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lyra Code Preview</title>
  <style>
    :root { font: 18px/1.6 system-ui, sans-serif; color: #17213d; background: #f4f6fc; }
    body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
    main { max-width: 32rem; margin: 1.5rem; padding: 2rem; background: white; border-radius: 1rem; }
    button { font: inherit; padding: .6rem 1rem; background: #3659d9; color: white; border: 0; border-radius: .5rem; cursor: pointer; }
    button:focus-visible { outline: 3px solid #b15316; outline-offset: 4px; }
    output { font-weight: bold; }
  </style>
</head>
<body>
  <main>
    <h1>Hello, Lyra Code!</h1>
    <p>网页已从工作区加载。This page runs without a build step.</p>
    <button id="counter" type="button">点击计数 / Count</button>
    <p aria-live="polite">Count: <output id="value">0</output></p>
  </main>
  <script>
    let count = 0;
    document.querySelector('#counter').addEventListener('click', () => {
      document.querySelector('#value').textContent = String(++count);
    });
    console.info('Lyra preview ready');
  </script>
</body>
</html>

启动与验收

1. 选择包含 index.html 的工作区，在微型服务器设置中核对根目录。
2. 使用本机 HTTP 地址启动，打开状态中报告的 URL。
3. 页面应显示 Hello, Lyra Code! 和初始 Count: 0。
4. 点击按钮三次，应显示 Count: 3；刷新后恢复为 0。
5. 查看日志，确认页面请求成功，且没有相关 JavaScript 错误。

这组步骤分别验证了文件来源、脚本运行和刷新行为。计数保存在内存中，未使用数据库或本地存储。

让 AI 做一次小改动

在当前工作区的 index.html 中增加一个“重置”按钮，将计数设为 0。保留原按钮，使用原生 JavaScript，不安装依赖。修改后读回相关代码，展示 Diff，并列出我需要在浏览器执行的验证步骤。

验收应包含“计数三次 → 重置为 0 → 再点击变成 1 → 刷新恢复 0”。如果页面未更新，先核对工作区、服务目录和刷新；连接失败按本地服务排查。