HTML 編輯器
編寫 HTML，並在瀏覽器中查看響應式預覽。
原始碼行數: 15 · 字元: 368
範本
預覽
檢查結果:未發現語法問題。
網上 HTML 編輯器是什麼？
網上 HTML 編輯器是分割檢視：一邊是原始碼，另一邊是渲染後的頁面。你打標記，瀏覽器重新解析，預覽馬上更新，中間不用存檔、上傳或建置。
這是在片段進入正式項目前檢查它最快的辦法：表格有沒有正確巢狀、表單是否漏了標籤、版面在 390px 視窗下還能不能看。
如何撰寫並預覽 HTML
- 在 HTML 原始碼面板輸入或貼上標記。
- 保持「自動執行」開啟，預覽會跟著打字更新；想乾淨地重新渲染時可關掉再按「執行」。
- 切換桌機、平板與手機寬度，看版面如何重排。
- 查看 HTML 檢查面板：它會列出解析錯誤與行號，以及所有沒有收尾標籤的元素。
- 用「格式化」以 js-beautify 重新縮排，再複製或下載 .html 檔。
HTML 編輯範例
未閉合的元素
<div> <p>Hello </div>
HTML 檢查：<p> 沒有收尾（第 2 行）
缺少 doctype
<html><body>Hi</body></html>
HTML 檢查：缺少 <!DOCTYPE html> 宣告
重複的屬性
<img src="a.png" src="b.png" alt="x">
HTML 檢查：同一個元素出現兩次相同屬性
瀏覽器 HTML 編輯器與本機環境
| 面向 | 這個編輯器 | 本機開發伺服器 |
|---|---|---|
| 安裝 | 打開頁面就能開始打 | 要安裝 Node、打包工具與編輯器 |
| 回饋速度 | 預覽約 400 毫秒更新 | 看開發伺服器與熱重載的狀況 |
| 驗證 | HTML5 解析錯誤與未閉合標籤 | 看項目採用的 linter |
| 隱私 | 原始碼留在瀏覽器分頁 | 原始碼留在你的電腦 |
| 最適合 | 片段、教學、快速檢查 | 含資源與路由的完整項目 |
常見問題
HTML 編輯器常見問題
我貼上的 HTML 會被上傳嗎？
不會。解析、格式化與渲染都在瀏覽器分頁內完成。預覽 iframe 是由字串組出來的，不會向伺服器發出請求。
預覽裡的 JavaScript 會執行嗎？
會，指令碼會在預覽框架內執行。框架以 allow-scripts 但沒有 allow-same-origin 的條件沙箱化，因此程式碼讀不到這個頁面或它的儲存空間。
為什麼檢查器沒有標出我沒收尾的 <p>？
HTML5 解析器會自動閉合段落、清單項目與表格儲存格，所以那不算解析錯誤。檢查面板列出的是原始碼裡從來沒有明確收尾標籤的元素。
可以在同一個編輯器裡放 CSS 與 JavaScript 嗎？
可以。行內 <style> 與 <script> 區塊在預覽裡都能運作。想要有獨立編輯器的專門 CSS 面板，請改用 CSS 練習場。
「格式化」按鈕改了什麼？
只改空白與縮排，使用 js-beautify 的兩空格縮排。屬性、屬性順序與內容都不動。
可以下載我寫的內容嗎？
可以。「下載 .html」會把目前的原始碼存成 index.html，方便你在本機開啟或放進項目。