HTML 檢視器

編寫或貼上 HTML，即時查看瀏覽器渲染效果。

版面:腳本處於沙盒中，無法執行。

HTML 程式碼

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

預覽

關於本工具

HTML 檢視器讓您編寫或貼上 HTML 程式碼，立即看到瀏覽器中的渲染效果。預覽顯示在停用腳本的沙盒 iframe 中，可安全預覽來自不受信任來源的 HTML。

支援完整 HTML 文件（含 head、內聯 CSS 和 style 區塊）及 HTML 片段。所有處理在瀏覽器中本地進行。

使用方法

在左側程式碼編輯器中輸入或貼上 HTML。
點擊渲染按鈕更新預覽。
切換到上下分欄版面以獲得更大的預覽區域。
在編輯器中使用 Tab 鍵縮排行。

使用情境

前端開發者快速測試 HTML 片段、郵件開發者預覽 HTML 郵件範本、學習 HTML 的學生實驗標籤並即時查看效果、程式碼審查者直觀驗證渲染輸出。

常見問題

為什麼腳本被停用？ — 預覽 iframe 使用 sandbox="allow-same-origin" 屬性阻止 JavaScript 執行，讓您可以安全預覽未知來源的 HTML。
可以預覽 CSS 嗎？ — 可以。在 HTML 中包含 style 標籤或使用內聯樣式。來自其他域的外部樣式表可能被 CSP 封鎖。
支援完整 HTML 文件嗎？ — 支援。您可以貼上包含 DOCTYPE、head 和 body 標籤的完整 HTML 文件。