HTML預覽/運行器

在線HTML代碼編輯和實時預覽工具，支持在沙盒iframe中運行HTML代碼。

HTML 程式碼

預覽結果

使用說明

HTML預覽工具在瀏覽器中運行一個沙盒iframe，讓你的HTML代碼實時呈現視覺效果。支持包含CSS和內嵌JavaScript的完整HTML片段，從簡單的佈局樣式驗證到帶交互邏輯的頁面原型，都能直接在瀏覽器裡運行查看。

適合的場景：快速驗證一個HTML佈局思路、測試郵件模板的渲染效果、演示一個CSS動畫效果、在沒有本地開發環境時臨時調試一段前端代碼，以及教學演示中實時展示HTML效果。

相比在本地創建一個.html文件再用瀏覽器打開，本工具省去了文件操作的步驟，在同一個頁面內完成編輯和預覽。相比CodePen等在線編輯器，本工具更輕量，無需登錄，打開即用。

預覽中可以加載外部CDN資源嗎？ +

可以。在HTML中通過<link>或<script>標籤引入CDN資源（如Bootstrap、jQuery、Vue等）會正常加載，前提是CDN支持CORS。這樣可以直接測試引入外部庫後的實際渲染效果。

預覽是否隔離於主頁面？沙盒安全嗎？ +

預覽運行在一個沙盒化的iframe中，與主頁面的DOM和JavaScript完全隔離，無法訪問主頁面的Cookie或localStorage。代碼中的JavaScript只在沙盒內執行，不會影響工具本身的運行。

預覽中的代碼可以訪問本地文件嗎？ +

不能。出於瀏覽器安全策略，iframe內的代碼無法訪問用戶的本地文件系統。如果HTML中有引用本地圖片路徑（如src="./image.png"），預覽中會顯示加載失敗，建議改用外部URL或Base64內嵌圖片。

支持預覽包含CSS動畫的效果嗎？ +

完全支持。CSS動畫（@keyframes、transition、transform）在預覽iframe中會正常運行，與在真實瀏覽器中的效果一致。這讓本工具非常適合用來快速驗證和演示CSS動畫效果。

如何分享我的HTML代碼和預覽？ +

可以將代碼通過分享鏈接的方式發給他人，對方打開後會看到同樣的代碼和預覽效果。適合在遠程協作時快速展示一個HTML佈局或交互效果，無需對方配置任何開發環境。