每個網頁都是 HTML、CSS、JavaScript 三個東西堆起來的——就像人有骨骼、皮膚和神經系統。搞清楚誰負責什麼，才不會把所有東西塞在同一個地方。
先講結論
HTML 管結構、CSS 管外觀、JavaScript 管行為。三個東西各司其職，混在一起寫就是災難的開始。現代前端框架（React、Vue）雖然把三者整合進元件裡，但底層邏輯沒變——你還是得知道瀏覽器到底在看什麼。
網頁三本柱
| 技術 | 角色 | 一句話說明 |
|---|---|---|
| HTML | 骨架 | 「這裡有一個標題、一段文字、一張圖片」 |
| CSS | 外觀 | 「標題要紅色、文字要 16px、圖片要圓角」 |
| JavaScript | 行為 | 「按這個按鈕會跳出彈窗、滾動會載入更多」 |
你可以只有 HTML（純文字網頁），但沒有 CSS 就像素顏出門，沒有 JavaScript 就像木頭人。三個都到位才是一個現代網頁。
HTML 文件的基本結構
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頁面標題</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>導航</nav>
</header>
<main>
<article>
<h1>標題</h1>
<p>內容</p>
</article>
</main>
<footer>頁尾</footer>
<script defer src="app.js"></script>
</body>
</html><head> 是瀏覽器看的（meta 資訊、SEO、載入資源），<body> 是使用者看的（實際內容）。很多新手搞不清楚為什麼 meta tag 寫了沒用——因為你寫在 body 裡面了啊。
Head 裡面放什麼
兩個必須有的 meta tag：
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">少了 charset 可能出現亂碼，少了 viewport 手機上會顯示桌面版縮小的畫面。這兩行就像系安全帶——你不一定會出事，但不繫就是在賭。
SEO 和社群分享的 meta tag 也很重要：
<!-- SEO -->
<meta name="description" content="網頁描述，約 150 字">
<!-- Facebook / LINE 分享 -->
<meta property="og:title" content="文章標題">
<meta property="og:image" content="https://example.com/image.jpg">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">你有沒有分享過一個連結結果預覽圖是空白的？就是因為沒設 Open Graph tag。
JavaScript 的三種載入方式
這是面試常考題，也是效能調校的基本功：
一般 <script>： 解析暫停 → 下載 → 執行 → 繼續解析
async <script>： 解析繼續，下載完立即執行（可能中斷解析）
defer <script>： 解析繼續，DOM 完成後才執行
99% 的情況用 defer 就對了。 它不會阻塞 HTML 解析，又確保 DOM ready 之後才執行。async 適合完全獨立的腳本，像 Google Analytics。
不用 defer 的話，另一個常見做法是把 <script> 放在 </body> 前面——效果差不多，但語意上 defer 更明確。
語意化標籤：不只是好看
<header> <!-- 不是 <div class="header"> -->
<nav> <!-- 不是 <div class="nav"> -->
<main> <!-- 不是 <div class="content"> -->
<article> <!-- 不是 <div class="post"> -->
<aside> <!-- 不是 <div class="sidebar"> -->
<footer> <!-- 不是 <div class="footer"> -->用語意化標籤的好處：SEO 更好（搜尋引擎知道哪塊是主要內容）、無障礙更好（螢幕閱讀器知道這是導航列不是隨便一個 div）、可讀性更好（同事看到 <nav> 就知道是導航，不用猜 class name）。
如果你的 HTML 裡面全是 <div>，那跟用 Excel 寫文件一樣——能用，但很痛苦。
現代前端專案結構
用框架之後，你看不到上面那種原始 HTML 了。但打包工具最終輸出的還是同樣的東西：
project/
├── public/ # 靜態資源（favicon, robots.txt）
├── src/
│ ├── assets/ # 圖片、字型
│ ├── components/ # 元件
│ ├── styles/ # CSS
│ ├── App.jsx # 根元件
│ └── main.js # 入口點
├── index.html # HTML 模板（只有一個 div#root）
└── vite.config.js # 打包設定
不管框架怎麼包裝，底層都是 HTML + CSS + JS。理解這個基礎，才不會被框架的抽象層搞暈。
HTML 是最被低估的技術。大家都急著學 React，卻連 <article> 和 <section> 的差別都不知道。