HTML 是什麼，不是什麼
HTML（HyperText Markup Language）是標記語言，不是程式語言。
差別在哪？程式語言描述「要做什麼」（邏輯、計算、流程），標記語言描述「這是什麼」（結構、語意、內容）。HTML 告訴瀏覽器「這塊是標題、這塊是段落、這個連結指向哪裡」，不寫演算法、不跑迴圈。
<!-- 這是 HTML：描述結構 -->
<article>
<h1>文章標題</h1>
<p>這是一個段落。</p>
</article>HTML 是三層前端技術的基礎層：
- HTML：結構與語意（內容是什麼）
- CSS：視覺樣式（看起來什麼樣）
- JavaScript：行為與互動（怎麼動）
這三層分開是有意義的。HTML 改了不影響 CSS 邏輯；CSS 壞掉網頁內容還在；JS 關掉語意標籤的資訊仍可被爬蟲讀到。
<!DOCTYPE html> 是什麼
每個 HTML 文件的第一行：
<!DOCTYPE html>這不是 HTML 標籤，是給瀏覽器的宣告：「用標準模式（Standards Mode）解析這頁。」
沒有 DOCTYPE，瀏覽器會進入 Quirks Mode——模擬 1990 年代舊瀏覽器的錯誤行為，很多 CSS 和佈局規則會不一樣。現代頁面一定要有 <!DOCTYPE html>，沒有就是 bug。
瀏覽器怎麼把 HTML 變成你看到的頁面
解析流程分五步：
HTML 文字
↓ 解析器（Parser）
DOM 樹（Document Object Model）
↓ + CSSOM（CSS 物件模型）
Render Tree（只有可見節點）
↓ Layout
每個節點的位置與大小
↓ Paint → Composite
最終畫面
Parser 從上到下讀 HTML，遇到標籤就建 DOM 節點。遇到 <script> 預設會暫停解析（這是為什麼 <script> 建議放 <body> 末尾或加 defer）。
為什麼 DOM 是「樹」
HTML 的巢狀結構天然對應到樹狀資料結構——每個元素有父節點、可以有多個子節點、兄弟節點彼此平行。
<html>
<head>
<title>標題</title>
</head>
<body>
<h1>大標</h1>
<p>段落 <a href="#">連結</a></p>
</body>
</html>對應的 DOM 樹：
Document
└── html
├── head
│ └── title → "標題"
└── body
├── h1 → "大標"
└── p
├── "段落 "
└── a → "連結"
樹狀結構讓 CSS 選擇器、JavaScript 的 querySelector、事件冒泡這些機制都能用簡單的遍歷演算法實作。
相關文章
- HTML 結構基礎 — 元素、屬性、巢狀規則
- DOM 深入 — DOM API、節點操作、事件
- HTML 語意化標籤 — 語意標籤的用法與選擇