跳到主要内容
Numio

在线 HTML 编辑器（实时预览） — Numio

在线编写 HTML、CSS 和 JavaScript，边写边实时预览，控制台消息显示在下方。免费，直接在浏览器中运行。

在浏览器内运行 · 无需注册

代码 (HTML)

按 Ctrl/⌘ + Enter 运行

预览

控制台

暂无输出。点击“运行”即可在此查看结果。

代码在你的浏览器本地运行，不会上传。

使用方法

  1. 编写 HTML，在 <style> 中写 CSS，在 <script> 中写 JavaScript。
  2. 输入时，预览会自动更新。
  3. 在预览下方查看控制台消息。

示例

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 16px; }
  button { padding: 8px 16px; }
</style>
</head>
<body>
  <h1>你好！</h1>
  <button id="btn">点我</button>
  <p id="out"></p>
  <script>
    let n = 0;
    document.getElementById("btn").onclick = () => {
      n++;
      document.getElementById("out").textContent = "点击次数： " + n;
      console.log("click", n);
    };
  </script>
</body>
</html>

功能与限制

预览在沙箱框架中运行，其中的脚本无法访问本页面或其 Cookie。

想手动刷新？关闭自动更新，然后点击“运行”即可。

FAQ

可以使用 CSS 和 JavaScript 吗？

可以。在同一个文档中用 <style> 标签写 CSS，用 <script> 标签写 JavaScript。

console.log 的输出在哪里？

预览产生的控制台消息会列在预览下方。

代码会上传吗？

不会。预览在你的浏览器中生成，不会向服务器发送任何内容。

格式参考资料

工具页面更新日期：