使用HTML代码实验场

步骤

1. 从起始模板开始或加载示例项目。
2. 编辑 HTML 结构、CSS 样式和 JavaScript 行为。
3. 按「运行」(Ctrl/Cmd + Enter) 刷新 sandbox 预览。
4. 打开 Console 面板查看 log、warn 和 error。
5. 使用响应式控件检查常见宽度下的布局。
6. 格式化、复制或下载为 index.html。

示例

示例 — 运行

HTML

<button id="counter">0</button>

CSS

#counter { font-size: 2rem; padding: 16px; }

JavaScript

let count = 0;
document.getElementById("counter").addEventListener("click", (event) => {
  event.currentTarget.textContent = ++count;
});

每次点击都会增加计数。重新运行会重置数值；本地存储保存代码，不保存计数器状态。

提示

预览所需的 HTML、CSS 和 JavaScript 基本执行在浏览器中本地完成。

相关工具