跳到主要內容
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 的輸出在哪裡？

預覽產生的主控台訊息會列在預覽下方。

程式碼會上傳嗎？

不會。預覽在你的瀏覽器中產生，不會傳送任何內容到伺服器。

格式參考資料

工具頁面更新日期：