在線編輯 HTML 頁面代表使用以瀏覽器為基礎的工具來撰寫或修改 HTML 與 CSS 原始碼，並檢視渲染結果，而無需安裝桌面編輯器或在本機執行網頁伺服器。線上 HTML 編輯器透過兩個純文字窗格來處理這項工作流程——一個用於 HTML，一個用於 CSS——再搭配第三個窗格，在同一個瀏覽器分頁內渲染刻意受限的本機預覽。不會有任何內容上傳到伺服器、儲存到帳號，或透過 API 傳送;兩個編輯器與預覽文件都停留在目前分頁中，這讓敏感的程式碼片段在你實驗時保持私密。預覽只會在你按下「Update preview」時重新建立，因此輸入時絕不會不小心在編輯中途重繪渲染頁面。其預期用途是學習標記、檢查小型版面片段，以及在移入真實專案前測試靜態元件構想，而不是用來撰寫完整的正式網站。
「在線編輯 HTML 頁面」實際涵蓋的範圍
若要為 HTML 頁面挑選合適的工具，將現今人們編輯 HTML 的三種常見方式區分開會有幫助。像 VS Code 或 Sublime Text 這類桌面編輯器提供完整控制權與完整的檔案系統存取權，但需要安裝與專案資料夾。瀏覽器開發者工具(在 Windows 與 Linux 上按 F12、或在 macOS 上按 Cmd+Option+I 開啟的 Elements 面板)可讓你即時變更任何線上頁面，用於重新整理後就消失的暫時性實驗。線上編輯器則完全在瀏覽器分頁內執行，並在原始碼旁渲染預覽，當你只想貼上、調整並視覺確認一段範圍明確的 HTML 與 CSS 片段、又不想管理檔案時，這是最短路徑。
最後一類正是本文鎖定的對象。線上 HTML 編輯最適合用於不需要伺服器端邏輯、檔案上傳或指令碼的靜態標記實驗——例如頁首版面、卡片元件、表格模型、迷你登陸頁模型，或打算隨後複製到真實專案中的片段。沙箱化預覽的刻意限制讓工作流程既安全、可重複又快速，而這些限制也正是讓線上編輯器適合用於快速實驗、而非完整專案工作的原因。
線上 HTML 編輯器如何融入工作流程
線上 HTML 編輯器將工作劃分為三個區域:左側的 HTML 編輯器、右側的 CSS 編輯器，以及一個渲染合併結果的預覽窗格。你可以在任何現代瀏覽器分頁中開啟 線上 HTML 編輯器，立即開始編輯。由於兩個編輯器都停留在你的瀏覽器中，預覽文件也使用 srcdoc 在本機重新建立，沒有任何資料離開分頁——整個流程中沒有上傳、沒有帳號，也沒有遠端渲染服務介入。
當你在反覆調整時，這種並排結構相當重要。HTML 變更與 CSS 變更落在不同的緩衝區，因此右窗格的版面修正不會不小心損毀左窗格的標記，而你也能在編輯時同時參考兩者。最關鍵的一點是這個刻意受限的預覽:它的設計目的是用於教學標記與檢查版面片段，而不是執行完整應用程式。指令碼、表單、導覽、下載與外部資源都會被刻意封鎖，讓實驗無法呼叫遠端伺服器、彈出視窗或逃出沙箱。若想更深入了解並排的概念，並排編輯器指南會更詳細地展示該工作流程。
如何逐步在線編輯 HTML 頁面
- 在瀏覽器分頁中開啟線上 HTML 編輯器。頁面載入時會有兩個空白編輯器與一個空白預覽。
- 在左側編輯器中輸入或貼上一段範圍明確的 HTML 片段。HTML 輸入上限為 50,000 字元，因此貼上前請先修剪過大的檔案。請保持標記自給自足——不可使用指向遠端樣式表的 <link> 標籤、不可使用 <script> 區塊，也不可使用 <img src="https://..."> 來參照遠端主機。
- 在右側編輯器中新增或編輯 CSS。請只使用適合內嵌的宣告或 <style> 風格的規則;預覽會封鎖外部樣式表與遠端字型。CSS 輸入上限為 30,000 字元。
- 點擊 Update preview。工具會建立一份全新的 srcdoc 文件，並以空白的沙箱權杖清單與預設拒絕的內容安全政策放入 iframe 中。預覽會精確反映你剛剛提交的 HTML 與 CSS。
- 在預覽窗格中檢視渲染後的頁面。調整任一編輯器，再次點擊 Update preview，並重複這個過程，直到版面符合預期。當片段看起來正確時，將 HTML 與 CSS 從編輯器中複製出來，貼到你的專案中。
預覽允許與封鎖的內容
多數線上編輯器會將安全模型藏在友善的預覽背後，但這些限制正是重點所在。線上 HTML 編輯器的預覽在 iframe 中執行，該 iframe 帶有空白沙箱權杖清單與預設拒絕的內容安全政策，因此瀏覽器預設會拒絕大多數請求，且 iframe 沒有執行程式碼的權限。下表摘要說明在預覽內可依賴與不可依賴的項目。沙箱化預覽指南會更詳細地說明同樣的規則。
| 預覽功能 | 線上 HTML 編輯器中的狀態 | 原因 |
|---|---|---|
| 內嵌 <style> 區塊與 style="" 屬性 | 允許 | CSP 允許內嵌樣式來源 |
| Data URL 與 Blob URL 圖片 | 允許 | 自給自足，無需遠端擷取 |
| 遠端 CSS、字型、指令碼、圖片、影片、iframe | 封鎖 | CSP 預設拒絕所有資源 |
| JavaScript 執行 | 封鎖 | iframe 沙箱省略 allow-scripts;CSP 拒絕指令碼 |
| 表單提交 | 封鎖 | iframe 沙箱省略 allow-forms;CSP 封鎖 form-action |
| Base URL 覆寫(<base href="...">) | 封鎖 | CSP 拒絕 base-uri |
| 彈出視窗、下載、頂層導覽 | 封鎖 | 空白沙箱權杖清單 |
| 來自父頁面的同源存取 | 封鎖 | 獨特的 srcdoc 來源加上空白沙箱權杖清單 |
這些規則背後的機制由 MDN 為 HTMLIFrameElement srcdoc 屬性與 iframe sandbox 屬性提供文件說明。由於瀏覽器的內容安全政策是合併而非取代，因此嵌入在你標記中的第二個 CSP 無法放寬已套用於預覽的政策。
貼上之前應預先規劃的限制
兩項硬性上限決定了哪些內容能放進編輯器。HTML 輸入上限為 50,000 字元，CSS 輸入上限為 30,000 字元。一般的單頁行銷文件通常能輕鬆容納;多頁網站或較長的部落格文章則需要先修剪或拆成較小的片段，才能進行測試。預覽也使用目前瀏覽器的引擎來渲染，因此 CSS 支援與預設表單控制項會依該瀏覽器而定——若你的真實使用者使用不同的瀏覽器，也請在該瀏覽器上進行驗證。
小型的中性內邊距與系統字型會作為基準套用，讓預覽從可預測的起點開始。你自己的 CSS 會覆寫這些預設值，因此預覽中任何「難看」的間距幾乎都能回溯到你的樣式表缺少重置。因為編輯器不會擷取外部資源，依賴 Google Font、CDN 託管的圖示或遠端主視覺圖片的片段，在預覽中將會以破損或缺漏的方式渲染。請將字型堆疊內嵌、把小型圖片編碼為 data URL，或接受這個差異，在真實專案中再次檢查後再下判斷。
預覽是以標記形式而非跳脫文字來渲染——這正是 HTML 編輯器的用途——但標記仍受到沙箱與 CSP 的限制。像 </style> 這類 CSS 結束樣式序列會在插入前先被中和，以防止樣式表的值逃逸成新的 HTML 元素;而標記內的第二個 CSP 也無法放寬現有政策，因為瀏覽器政策是合併而非取代。
何時該超越線上編輯器
線上 HTML 編輯器是教學與片段檢查工具，不是打算發布到他處內容的清理器。在沒有沙箱與 CSP 的情況下，把同樣的 HTML 複製到真實網站，可能會產生完全不同的安全面——目的地伺服器可能設定不同的標頭、周圍的頁面可能允許指令碼，而你片段所參照的任何外部資源都會突然開始擷取。
當片段在預覽中看起來正確時，請將其移入你的真實專案，並針對目的地技術棧重新執行相同的檢查:無障礙(語意地標、替代文字、對比、聚焦順序)、跨視窗的響應式行為、SEO 中介資料，以及符合網站威脅模型正式環境的內容安全政策。線上 HTML 編輯器無法取代用於即時偵錯的瀏覽器檢查器、用於專案工作的完整 IDE、用於資產的建置系統，或跨瀏覽器測試套件——它位於這些工具之前，在瀏覽器分頁中，作為起草與驗證小型 HTML 與 CSS 實驗的最快方式。