Toolbox Hub
所有工具

HTML Preview

Preview HTML code

Preview HTML code 在您的瀏覽器中本地執行

About the

HTML 預覽會即時渲染 HTML 片段,讓您可以看到它產生的內容,而無需儲存檔案並開啟它。它適用於簡短的片段:電子郵件範本、元件的標記、內容管理系統的片段,或在將其貼到某處之前您想要檢視的任何其他內容。編輯和預覽之間的切換是即時的,這使得它成為調整標記的快速迴圈。

Where people use the

  • 在傳送測試之前檢查電子郵件範本片段。
  • 預覽從內容管理系統貼上的標記。
  • 在將程式碼片段貼到拉取請求之前對其進行完整性檢查。
  • 測驗表格或清單是否按您期望的方式呈現。

How to use the

  1. 1

    貼上您的標記

    在編輯器中鍵入或貼上 HTML 片段。完整的文件或只是一個片段都可以。

  2. 2

    切換到預覽

    按“預覽”進行渲染。標記被繪製到頁面中,就像在瀏覽器中顯示的那樣。

  3. 3

    切換回來並調整

    按“編輯”返回標記。更改會被保留,以便您可以迭代。

  4. 4

    高興的時候抄下來

    在編輯器中選擇標記並將其複製到您的專案中。

提示和最佳實踐

  • 如果您的片段依賴此處不存在的樣式表,請新增內聯樣式。
  • 乾淨的渲染並不能證明標記有效;瀏覽器會掩蓋錯誤。
  • 請記住預覽片段,而不是具有指令碼行為的整個頁面。

常見問題

它支援 CSS 和 JavaScript 嗎?

樣式標籤和內聯樣式呈現。指令碼呈現為標記,但這是片段的預覽,因此將指令碼行為視為不可靠。

為什麼我的程式碼片段看起來與我的網站不同?

因為周圍的樣式表遺失了。這裡的片段不會繼承任何內容,因此任何依賴網站 CSS 的內容都會看起來沒有樣式。

我可以載入外部影像或字型嗎?

是的,如果它們可以公開訪問,但周圍頁面自己的規則仍然不適用。

標記已上傳嗎?

不會。渲染發生在您的瀏覽器中,因此未發布的模板和內部內容會保留在您的裝置上。

它驗證 HTML 嗎?

不,它會渲染你所提供的內容。瀏覽器會默默地修復一些錯誤,因此乾淨的渲染並不能證明標記是有效的。

相關工具