HTML.cafe 線上即時 HTML 編輯器，修改原始碼立即查看效果變化

現在比較少有機會從頭到尾、以原始碼編寫一個網頁，記得十幾年前剛開始製作免費資源網路社群時還沒有使用 WordPress 架站，最早的網頁就是直接用 HTML 文字編輯器寫出來，後來有了所見即所得編輯器，很多事情變得很方便，也少有機會去編寫原始碼。若你偶爾需要測試一些 HTML 內容，看看呈現出來的結果是否正確，可試試接下來的免費工具。

本文要介紹「HTML.cafe」是一個免費的線上即時 HTML 編輯器，開啟後頁面會分為上下兩個功能，上方是編輯器，下方則為網頁預覽，透過貼上、修改原始碼後即時查看呈現出來的效果變化，以輕量化程式碼（大約只有 25kB）實現 HTML 編輯器所需的最低功能。

當然 HTML.cafe 介面很陽春，也沒有太多的選項，不過對於要測試網頁來說還算方便，不用在瀏覽器跟編輯器間反覆存檔和重新整理，倒是很像早期的網頁編輯器內建預覽功能。

HTML.cafe
https://html.cafe/

使用教學

STEP 1

開啟 HTML.cafe 後會看到一段 HTML 原始碼範例，下方就是呈現出來的效果，點選 new 打開新的畫面或是按下 save 將頁面保存到平台，要注意的是儲存後其他人也能在 gallery 中看到，不要將太過重要或包含隱私資訊的原始碼上傳到 HTML.cafe。

如果你需要更大的編輯器範圍，可以拖曳分隔線調整編輯器大小，HTML.cafe 編輯器本身有上色功能，在閱讀程式碼時會較為輕鬆。

STEP 2

將網頁原始碼貼上立即從下方預覽畫面取得實際顯示效果。

若需要產生鏈結，使用者還能點選 save 保存內容、取得網址，如果想繼續編輯內容，記得要將原本的編輯頁面開著，修改後儲存會即時更新到預覽網址中。

STEP 3

點選編輯器右下角的預覽按鈕，會立即在瀏覽器呈現網頁，HTML.cafe 是一個蠻有用的線上 HTML 編輯器，如果手邊剛好沒有合適的網頁編輯軟體，它可以做為應急使用。