使用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 基本執行在瀏覽器中本機完成。

相關工具