HTML 線上執行
寫 HTML/CSS/JS,即時看效果。程式碼只在你的瀏覽器裡執行,不會上傳。
程式碼
預覽 提示:點擊「執行」或開啟「自動執行」查看效果。
什麼是線上 HTML 執行器
把 HTML、CSS 和 JavaScript 程式碼貼進左側編輯器,右側會渲染出真實網頁效果。適合快速驗證程式碼片段、除錯樣式、向他人示範頁面效果。
怎麼用
三步:① 在左側貼上或輸入程式碼;② 點擊「執行」(或開啟自動執行);③ 在右側查看效果,滿意後可複製或下載為 .html 檔。
支援的語法特性
支援 HTML5 語意標籤、CSS3(Flexbox/Grid/動畫/媒體查詢)以及現代 JavaScript(ES6+)。
和本機編輯器有什麼區別
本機編輯器需要安裝、需要存檔才能預覽。本工具打開網頁即用,改完立刻看到效果,適合「快速試一下」的場景。
常見問題
線上執行 HTML 安全嗎?程式碼會上傳嗎?
安全。程式碼只在你的瀏覽器內執行,不會傳送到伺服器。預覽使用加了 sandbox 屬性的 iframe 沙箱,使用者程式碼無法存取本站的 cookie 或本機儲存。
支援 JavaScript 嗎?
支援。可執行現代 JavaScript(ES6+),包含 DOM 操作、事件監聽與計時器。
可以使用外部 CDN 函式庫嗎?
可以,透過 <script src="..."> 引入。但沙箱會限制部分能力(如存取父頁面、讀取本站 cookie),這是為了保護你的隱私。
為什麼我的程式碼在本機能跑,這裡不行?
常見原因:① 使用沙箱禁止的能力;② 依賴本機檔案,需改成可公開存取的 URL;③ 建議開啟開發者工具查看錯誤。
可以儲存程式碼嗎?
可以複製到剪貼簿,或點擊「下載 HTML」存成 .html 檔。本工具不做雲端儲存。
支援手機瀏覽器嗎?
支援。手機上編輯器與預覽上下排列,預覽區可全螢幕檢視。
和 CodePen 有什麼區別?
CodePen 提供社群與專案託管;本工具專注「打開即用、純本機、不上傳」。
預覽和真實瀏覽器有差異嗎?
渲染引擎相同,效果基本一致。差異主要在沙箱限制、外部資源載入與預覽區尺寸。