跳至主要內容
Lizely

線上 HTML 編輯器

同時編輯 HTML 與 CSS，並呈現一個刻意限制的本機預覽，不會執行指令碼。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.請在左側編輯器中輸入或編輯受限制的 HTML 片段。
  2. 2.在右側編輯器中加入可選的 CSS，且不需依賴外部資源。
  3. 3.點選「更新預覽」，並在受限的沙盒中檢視結果。

關於線上 HTML 編輯器

線上 HTML 編輯器提供兩個純文字編輯器用於 HTML 和 CSS，並附帶一個本機預覽功能。不會上傳任何內容、儲存至帳號或傳送至 API。選取更新預覽即可建立一個新的 srcdoc 文件並將其置入獨特來源的 iframe 中。這個工具用來學習標籤語言、檢查版面配置片段以及測試靜態元件想法。

HTML 的輸入限制為 50,000 字元，CSS 則限制為 30,000 字元。預覽包含嚴格的內容安全策略：所有資源預設被拒絕，樣式僅限內聯，圖片僅能使用 data 或 Blob URL，基底 URL 被禁用，且表單提交被阻斷。iframe 的沙盒令牌清單為空，因此指令碼、彈出視窗、導航、下載、表單及同源存取皆不可用。

使用者端的 HTML 會以標記語法呈現，而非轉義文字，這正是編輯器的本意，但內容仍受限於此預覽環境。CSS 的閉合式序列在插入前會被中和，以避免樣式表值意外插入新的 HTML 元素。使用者標記語法內的第二個 CSP 不能鬆弛原有的政策，因為瀏覽器策略會結合而非取代彼此。

編輯器刻意不執行 JavaScript。若需執行獨立的 worker 程式碼，請使用專屬的 JavaScript 沙盒。它也不會取得外部樣式表、字型、圖片、API、影片或 iframe，因此依賴遠端資源的範例將無法匹配實際生產頁面。僅允許小型自包含實驗使用資料圖片預覽。

此預覽並非用來驗證你將發布的內容。若將相同的 HTML 副製到真實網站中，且未使用沙盒與 CSP，將會產生不同的安全環境。請在目標專案中驗證可訪問性、語義、響應行為、SEO 及生產環境的 CSP。此編輯器無法取代瀏覽器檢查工具、完整 IDE、建置系統或跨瀏覽器測試套件。

由於 srcdoc 預覽使用當前瀏覽器，CSS 的支援與預設表單外觀將遵循該瀏覽器設定。預覽僅使用小幅度的中性段落間距與系統字型作為基準。你的 HTML 與 CSS 才是最終內容，且必須點選「更新預覽」才能確保編輯過程中的變更不會意外重新渲染。

方法與來源

限制 HTML 與 CSS 的長度，中和 CSS 中的不區分大小寫的閉合式序列，構建一個完整 srcdoc，並以預設拒絕的內容安全策略為基礎，將其渲染至一個空的沙盒令牌清單的 iframe 中，僅允許內聯樣式與本機 data/Blob 圖片，阻斷基底 URL 與表單操作，僅在明確使用者操作時更新，以確保編輯穩定。

常見問題

我的程式碼會上傳嗎？
沒有。兩個編輯器以及預覽文件都會留在目前的瀏覽器分頁中。
為何指令碼不會執行？
HTML 預覽刻意使用帶有無指令碼許可的 iframe 沙盒，並搭配嚴格的內容安全策略。
我可以載入外部字型或圖片嗎？
不可以。遠端資源被阻斷，僅允許內聯樣式與 data 或 Blob 圖片。
這是否讓 HTML 可以安全發布？
不可以。預覽僅為隔離環境，實際發布的 HTML 仍需在最終的安全部署環境中審查。

相關工具

開發者工具 使用指南

查看全部