HTML 編輯器 - Jason Tools

編輯工作台

貼上 HTML 或開啟本機檔案。原始碼是唯一權威，這一頁不會替你重寫它 —— 排版與清理都要你自己按，而且都可以復原。全程在瀏覽器內處理，內容不會送出去。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="utf-8">
  <title>系統維護公告</title>
  <style>
    body { font-family: system-ui, "Noto Sans TC", sans-serif; margin: 24px; color: #23272e; }
    h1 { font-size: 22px; border-bottom: 2px solid #0891b2; padding-bottom: 8px; }
    table { border-collapse: collapse; margin: 16px 0; }
    th, td { border: 1px solid #d9dde3; padding: 8px 12px; text-align: left; }
    th { background: #f1f5f9; }
  </style>
</head>
<body>
  <!-- 這行註解在預覽副本裡會被移除 -->
  <h1>系統維護公告</h1>
  <p>資訊室將於下列時段進行例行維護，期間相關服務會暫停。</p>

  <table>
    <tr><th>項目</th><th>開始</th><th>結束</th></tr>
    <tr><td>檔案伺服器更新</td><td>22:00</td><td>23:30</td></tr>
    <tr><td>連線驗證</td><td>23:30</td><td>00:00</td></tr>
  </table>

  <p style="color:#b45309">維護期間如需協助，請改撥分機 1234（測試主機 192.0.2.10）。</p>
  <p>詳細說明：<a href="https://example.com/notice">內部公告頁</a></p>

  <!-- 下面這幾樣在預覽副本裡會被停用，原始碼不會被改動 -->
  <img src="https://example.com/banner.png" alt="活動橫幅">
  <script>console.log('這段不會在預覽裡執行');</script>
</body>
</html>

自動更新預覽靜態預覽不執行 JavaScript

畫面預覽

預覽畫在一個沒有腳本權限、也沒有同源權限的沙箱裡，裡面的連結按了不會離開本頁，外部圖片與樣式一律不載入。它跟真正的瀏覽器或 Outlook 看到的不會完全一樣。

預覽寬度 px

寬度指的是實際傳給預覽框的 CSS 視窗寬度，不是把畫面縮小假裝重排。畫面放不下時，只有預覽區會橫向捲動。

檢查結果

分成三類：結構提醒是你大概不是故意的地方、預覽停用是安全副本拿掉了什麼、解析失敗是標記本身壞了。三件事的處理方式不一樣，所以不合成一個綠勾。

此檢查不等於完整 HTML 標準驗證。瀏覽器會自行修復錯誤的 HTML，能顯示也不代表原始碼的語意正確。

使用說明 6

預覽為什麼跟原網站不一樣，以及這支工具刻意不做的事

別人給的 HTML 一律當成不受信任的內容：先用白名單清理，再畫進一個沒有腳本權限的沙箱，沙箱裡的文件自己還帶一份 CSP。三層都在，才擋得住客戶寄來的那份公告。

原始 HTML 與靜態副本有什麼不同 document.html 是你的原始碼，一個字都沒改，打開時可能執行腳本或連到外部網站。document-static.html 是清理過的靜態副本，開頭附一份移除清單，不會執行也不會連外 —— 但它不保證原本的功能都還在。

為什麼腳本不會執行首版沒有「執行 JavaScript」這個開關 —— 給了就變成一個不完整的線上沙箱，那需要另做隔離來源與資源限制。預覽的 script 是被拿掉的，但**你的原始碼裡那一段完全沒有被改動**，兩件事分開看。

外部圖片與樣式一律不載入載了等於告訴對方「這份 HTML 有人打開了」，連 IP 與時間一起送出去。要看圖請先把圖片轉成 data: 內嵌在原始碼裡；被擋下來的網址會完整列在外部資源清單裡，自己核對得到。

手機寬度是怎麼模擬的 390/768/1280 是實際傳給預覽框的 CSS 視窗寬度，不是把畫面縮小之後假稱重排。畫面放不下時只有預覽區橫向捲動。它模擬的是寬度，不是 Safari、Outlook 或某一台裝置的行為。

原始碼是唯一權威首版不做所見即所得：那要讓瀏覽器把畫面重新序列化成 HTML，會把你手寫的原始碼改掉。排版與清理都是你自己按下去才會動，而且排版後會核對一次內容有沒有跑掉，對不上就整份放棄。

檢查不等於標準驗證這裡只看得出重複 id、缺 alt、空 href、沒有 title 或 lang 這類問題，以及標記本身壞掉的地方。它不是 W3C 驗證器，也不會給你一個「通過」的印章。