HTML檢視器
免費的線上HTML檢視器，支援即時預覽、語法醒目提示、HTML驗證和響應式預覽。可新增Bootstrap、Tailwind等外部資源。
HTML編輯器
1
預覽
HTML驗證
有效
未發現問題。
本工具是用於在瀏覽器中預覽HTML、CSS和JavaScript程式碼的開發輔助工具。輸入的程式碼不會傳送到任何伺服器，全部在瀏覽器內處理。為防止惡意腳本執行帶來的安全風險，建議只執行可信賴的程式碼。
什麼是HTML檢視器？
HTML檢視器是一款免費的線上工具，可以即時預覽HTML程式碼。輸入程式碼後可立即查看結果，提供語法醒目提示、HTML驗證和響應式預覽功能。
非常適合Web開發者、設計師和學習者快速測試HTML和CSS程式碼並查看效果。無需建置單獨的開發環境，只需使用瀏覽器即可。
適用對象
- Web開發者 – 快速測試和驗證HTML程式碼片段
- 前端設計師 – 即時預覽CSS樣式
- 程式學習者 – 學習和實驗HTML/CSS
- 部落客/內容創作者 – 預覽HTML小工具和程式碼片段
- 團隊協作 – 程式碼審查時快速驗證
主要功能
- 即時預覽 – 輸入程式碼後立即在預覽中顯示。
- 語法醒目提示 – HTML、CSS、JavaScript程式碼以不同顏色顯示。
- HTML驗證 – 檢測未關閉標籤、過時標籤等問題。
- 響應式預覽 – 模擬桌機、平板、手機螢幕尺寸。
- 外部資源 – 可新增Bootstrap、Tailwind等CDN資源。
- 範例程式碼 – 提供基礎HTML、卡片、表單、動畫等範例。
- 自動儲存 – 編輯的程式碼會自動儲存在瀏覽器中。
- 複製和下載 – 可將程式碼複製到剪貼簿或下載為HTML檔案。
- 全螢幕預覽 – 可全螢幕查看結果。
HTML驗證項目
本工具可檢測以下HTML問題：
- DOCTYPE宣告 – 缺少<!DOCTYPE html>宣告時發出警告。
- 未關閉標籤 – <div>、<p>等標籤缺少結束標籤時顯示錯誤。
- 無對應標籤 – 結束標籤沒有對應的開始標籤時顯示錯誤。
- 過時標籤 – 對<font>、<center>等已棄用的標籤發出警告。
- 無障礙性 – <img>標籤缺少alt屬性時發出警告。
使用方法
- 在編輯器中輸入HTML程式碼。
- 輸入程式碼後預覽會即時更新。
- 在驗證區域查看錯誤和警告。
- 使用響應式按鈕測試不同螢幕尺寸。
- 完成後使用複製或下載按鈕。
使用外部資源
點擊「外部資源」按鈕可新增外部CSS或JS檔案：
- Bootstrap – https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css
- Tailwind – https://cdn.tailwindcss.com
- Font Awesome – https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css
在輸入框中貼上URL後會自動套用到預覽中。
範例程式碼說明
- 基礎HTML – HTML文件基本結構和樣式範例
- 卡片版面 – 使用CSS Grid的響應式卡片版面
- 表單設計 – 現代風格的聯絡表單
- 動畫效果 – CSS動畫（彈跳、淡入、旋轉）
注意事項
- 輸入的程式碼儲存在瀏覽器的localStorage中，不會傳送到任何伺服器。
- JavaScript在iframe中執行受到限制，但請避免執行不可信的程式碼。
- 預覽在目前瀏覽器環境中呈現，在其他瀏覽器中可能會有所不同。
- 處理大量程式碼時可能會影響效能。