所有工具
HTML Preview
Preview HTML code
Preview HTML code 在您的瀏覽器中本地執行
About the
HTML 預覽會即時渲染 HTML 片段,讓您可以看到它產生的內容,而無需儲存檔案並開啟它。它適用於簡短的片段:電子郵件範本、元件的標記、內容管理系統的片段,或在將其貼到某處之前您想要檢視的任何其他內容。編輯和預覽之間的切換是即時的,這使得它成為調整標記的快速迴圈。
Where people use the
- 在傳送測試之前檢查電子郵件範本片段。
- 預覽從內容管理系統貼上的標記。
- 在將程式碼片段貼到拉取請求之前對其進行完整性檢查。
- 測驗表格或清單是否按您期望的方式呈現。
How to use the
- 1
貼上您的標記
在編輯器中鍵入或貼上 HTML 片段。完整的文件或只是一個片段都可以。
- 2
切換到預覽
按“預覽”進行渲染。標記被繪製到頁面中,就像在瀏覽器中顯示的那樣。
- 3
切換回來並調整
按“編輯”返回標記。更改會被保留,以便您可以迭代。
- 4
高興的時候抄下來
在編輯器中選擇標記並將其複製到您的專案中。
提示和最佳實踐
- 如果您的片段依賴此處不存在的樣式表,請新增內聯樣式。
- 乾淨的渲染並不能證明標記有效;瀏覽器會掩蓋錯誤。
- 請記住預覽片段,而不是具有指令碼行為的整個頁面。
常見問題
它支援 CSS 和 JavaScript 嗎?
樣式標籤和內聯樣式呈現。指令碼呈現為標記,但這是片段的預覽,因此將指令碼行為視為不可靠。
為什麼我的程式碼片段看起來與我的網站不同?
因為周圍的樣式表遺失了。這裡的片段不會繼承任何內容,因此任何依賴網站 CSS 的內容都會看起來沒有樣式。
我可以載入外部影像或字型嗎?
是的,如果它們可以公開訪問,但周圍頁面自己的規則仍然不適用。
標記已上傳嗎?
不會。渲染發生在您的瀏覽器中,因此未發布的模板和內部內容會保留在您的裝置上。
它驗證 HTML 嗎?
不,它會渲染你所提供的內容。瀏覽器會默默地修復一些錯誤,因此乾淨的渲染並不能證明標記是有效的。