# HTML 檢視器
URL: https://discuvr.org/html-viewer/?hl=zh-hant
Last updated: 2026-11-08
MCP tool: `inspect_html`
貼上 HTML，即可在沙盒中依手機、平板或桌面寬度即時預覽。美化、壓縮、透過控制台執行腳本，並找出真正的標記問題。
一份郵件範本、工單裡的一段程式碼、一份匯出的報表：有時你只是想看看一段 HTML 渲染出來是什麼樣子。貼上之後，它會在你輸入時即時渲染，執行在一個受限的框架裡，寬度由你選擇。在預覽旁邊，你還可以整理程式碼、壓縮程式碼、搭配主控台執行其中的指令碼，並查看標記中真正存在的問題清單。
## 功能作用
- 輸入時即時預覽；超過 200,000 個字元後會暫停，直到你按下「重新整理」。
- 手機、平板、桌面和全寬四種預覽尺寸，另可全螢幕檢視。
- 指令碼預設關閉；開啟後可以看到主控台輸出和錯誤。
- 美化雜亂的標記或將其壓縮，不更動 pre、script 或 style 中的內容。
- 檢查報告：元素數量、標題大綱以及具體問題。
- 開啟本機 .html 檔案，複製或下載結果。
## 運作方式
1. 貼上 HTML、開啟 .html 檔案，或載入範例。
2. 選擇預覽寬度，並決定是否允許執行指令碼。
3. 美化、壓縮或檢查，然後複製或下載結果。
## 為什麼預覽執行在沙盒中
貼上的 HTML 可能包含並非你撰寫的指令碼、表單和連結。預覽執行在帶有 sandbox 屬性的 iframe 中，擁有獨立的不透明來源（opaque origin），因此其中任何內容都無法讀取本站的 Cookie 或你的工作階段，無法以你的名義送出資料，也無法讓目前的頁面跳轉。在你開啟之前，指令碼始終保持關閉。
## 檢查會看哪些內容
它用標準的 HTML 剖析器讀取標記，只回報實際看到的問題：開啟後從未關閉的標籤、沒有對應開始標籤的結束標籤、缺少 alt 文字的圖片、重複的 id、未加 rel="noopener" 就在新分頁開啟的連結、跳級的標題層級、透過 http:// 載入的資源；對於完整頁面，還會檢查是否缺少 doctype、title、lang 或 viewport 標籤。
## 檢查刻意不回報的內容
它回報錯誤，而不是風格。HTML 標準允許省略的結束標籤，例如 、、、 和 ，永遠不會被列為未關閉；
、![]()
和 等空元素本來就不需要結束標籤。空的 alt="" 算作有替代文字，這對裝飾性圖片是正確的。帶 target="_blank" 的連結只要有 rel="noopener" 或 rel="noreferrer" 就能通過。 中一般的 http:// 連結不算不安全；只有會被載入的資源才算，例如圖片、指令碼、樣式表和 iframe。標題層級往回升（從 h4 到 h2）沒有問題；只有向下跳過一級（從 h2 到 h4）才會回報。doctype、title、lang 和 viewport 檢查只在貼上的是完整頁面時執行，也就是包含 doctype 或 html、head、body 標籤，因此電子郵件片段或 CMS 程式碼片段不會因此被扣分。
## 寄出前檢查 HTML 電子郵件
先用手機寬度（375 px）預覽，因為很多人在手機上開信，再看平板（768 px）和桌面（1280 px）。保持指令碼關閉：郵件程式不執行 JavaScript，所以不執行指令碼的預覽更接近讀者看到的樣子。圖片請用以 https:// 開頭的絕對網址，因為預覽和收件人的郵件程式都看不到你電腦上的檔案。壓縮會刪除一般註解，但保留以 。它不會保留 寫法中的結束標記 ，所以使用這種寫法的範本不要壓縮，否則 Outlook 可能隱藏其後的所有內容。預覽是瀏覽器的呈現結果；Windows 版傳統 Outlook 以 Word 引擎繪製郵件，大量寄送前請先寄一封測試信到那裡確認。
## 問題
**我的 HTML 會被上傳或儲存嗎？**
預覽、美化和壓縮都在你的瀏覽器中完成。只有檢查報告會把標記傳送到伺服器，在伺服器上剖析後於同一次回應中傳回：不會寫入磁碟，也不會記錄日誌，使用統計只保存數量。
**為什麼我的指令碼沒有執行？**
貼上的程式碼不可信，所以指令碼預設關閉。勾選「執行指令碼」後，預覽會在啟用 JavaScript 的狀態下重新載入，仍然位於沙盒內，主控台輸出會顯示在預覽下方。
**為什麼相對路徑的圖片或樣式表載入不出來？**
預覽是根據貼上的文字產生的，而不是從你的電腦或伺服器載入，因此像 images/logo.png 這樣的相對路徑會在本站上尋找，結果找不到。請使用絕對 URL，或加入一個指向檔案實際位置的 標籤。
**美化會改變頁面的外觀嗎？**
它只會重新調整標籤之間的縮排，不會更動 pre、textarea、script 和 style 中的內容。行內元素之間的空白偶爾可能略有變化，所以格式化之後請再看一下預覽。
**能處理多大的文件？**
檢查報告最多接受 1,000,000 個字元，最多列出 200 個問題。為了讓輸入保持流暢，即時預覽在超過 200,000 個字元後會暫停；按下「重新整理」或 Ctrl+Enter 即可更新。
**可以預覽 HTML 電子郵件範本嗎？**
可以。貼上郵件的 HTML 或開啟 .html 檔案，把寬度切換到"手機"（375 px）和"桌面"（1280 px）查看兩種版面，再按"檢查"找出沒有 alt 文字的圖片和透過未加密 http:// 載入的資源。預覽使用你瀏覽器的轉譯引擎，而每個郵件用戶端都有自己的引擎，很多還會捨棄部分 CSS，所以它大致呈現瀏覽器中網頁郵件的效果，並不完全等於每個收件匣的顯示。郵件用戶端不會執行 JavaScript，請保持"執行指令碼"關閉。正式寄出前，先寄一封測試郵件到讀者常用的用戶端。
**開啟別人寄給我的 HTML 檔案安全嗎？**
比直接開啟更安全。開啟檔案會把它載入你瀏覽器中的編輯器，除非你點選檢查，否則不會傳送任何內容到伺服器。預覽在隔離的沙箱框架中執行，指令碼和表單送出都是關閉的，所以頁面無法執行程式碼、送出表單或存取本站的 Cookie。帶完整 http(s) 網址的圖片和樣式表仍會載入，因此寄件者可能得知檔案已被開啟。先閱讀原始碼，保持執行指令碼關閉，絕不要在別人寄來的頁面裡輸入密碼。
**為什麼開啟檔案後中文變成了 �?**
開啟檔案一律以 UTF-8 讀取檔案，並忽略其中的 標籤。以 Big5 儲存的網頁（舊版 Windows 編輯器和匯出檔中很常見）會用不是有效 UTF-8 的位元組儲存中文字，所以每個字都顯示為替代字元 �。請在編輯器中開啟檔案，重新另存為 UTF-8（記事本：另存新檔，編碼選 UTF-8；VS Code：點選狀態列中的編碼，再選 Save with Encoding），然後在這裡重新開啟。也可以先用瀏覽器開啟檔案，檢視原始碼後貼到這裡，因為瀏覽器已依網頁本身的 charset 解碼過了。
**為什麼表單或在新分頁開啟的連結在預覽中沒有反應?**
沙箱一律不允許送出表單或彈出視窗，即使開啟了執行指令碼也一樣，所以按下送出不會傳送任何內容，帶有 target="_blank" 的連結和 window.open() 呼叫都會被封鎖。這樣貼上的網頁就無法傳送資料或開啟其他網站。一般連結會在預覽框內開啟，而拒絕被嵌入框架的網站會顯示為空白或遭拒。要檢查表單，請在原始碼中查看它的 action、method 和欄位；檢查也會列出每個缺少 rel="noopener" 的 target="_blank" 連結。實際的送出請在你自己的開發伺服器上測試。
## 更多開發者工具
- [IP 子網路計算機](https://discuvr.org/ip-subnet-calculator/?hl=zh-hant)
- [編碼 / 解碼](https://discuvr.org/encode-decode/?hl=zh-hant)
- [Unix 時間戳記轉換器](https://discuvr.org/timestamp-converter/?hl=zh-hant)
- [系統架構圖產生器](https://discuvr.org/system-diagram/?hl=zh-hant)
## 常一起使用
- [文字比較](https://discuvr.org/text-diff/?hl=zh-hant)
- [網站安全性掃描](https://discuvr.org/security-scan/?hl=zh-hant)
---
Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.