如何在浏览器中运行HTML

运行HTML、CSS和JavaScript,并检查预览和控制台。

HTML CSS JS Compiler · 方法论 · 联系

开始编码

步骤

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

示例

示例 — 运行

HTML

<button id="demo">Hello</button>

CSS

#demo { padding: 12px 24px; color: white; background: #2563eb; border: 0; border-radius: 8px; }

JavaScript

document.getElementById("demo").addEventListener("click", () => console.log("Hello"));

将各段代码粘贴到对应输入栏并运行。点击蓝色按钮会在控制台输出Hello。

提示

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

相关工具