語法大全：HTML · CSS · JS
把三種網頁語言的基本語法放在同一頁：查得到、玩得到、做得出來。每個語法都能一鍵放進「遊樂場」即時修改，並有案例與任務可以完成；不懂時再用 AI 問法加深理解。
01這份語法大全，要怎麼用？
HTML、CSS、JavaScript 是網頁的三大語言。這一頁不是用來「背」的，而是用來查、玩、做：先搜尋語法、放進遊樂場動手改，再用案例檢查自己是否真的會用。
HTML｜結構
用標籤標示內容的意義：標題、段落、圖片、連結、清單、表格、表單。
CSS｜樣式
決定外觀與排版：顏色、字體、間距、盒模型、Flex／Grid、動畫、響應式。
JavaScript｜行為
讓網頁會「反應」：變數、判斷、迴圈、函式、DOM 操作與事件。
學每一個語法的「4 步循環」
| 三者的關係 | 比喻：蓋一間房子 | 少了它會怎樣？ |
|---|---|---|
| HTML | 骨架與房間隔間 | 沒有內容與結構，什麼都沒有。 |
| CSS | 裝潢、顏色、家具擺設 | 可以住，但樸素難看。 |
| JavaScript | 電器、開關、自動門 | 房子漂亮但不會「動」。 |
02HTML 語法：用標籤標示內容
HTML（HyperText Markup Language，超文本標記語言）是建立網頁的標準標記語言，由標籤（tag）與內容（content）組成：凡是在網頁上看到的文字、影音、圖檔都是內容；標籤則是給瀏覽器的「命令」，告訴它這些內容是什麼、要怎麼呈現。
HTML 的由來（小知識）
Tim Berners-Lee 發明 WWW 與 HTML
1989 年於 CERN 提出，1991 年發表 HTML 的基本草案。
HTML 1.0、2.0
W3C 前身組織陸續制定標準，全世界用同一套語法設計網頁。
HTML5 與 Living Standard
HTML5 在 2014 年成為正式建議標準；現在由 WHATWG 以「HTML Living Standard」持續更新，不再有 HTML6，而是不斷增加新功能。
標籤的基本觀念
| 種類 | 說明 |
|---|---|
| 獨立標籤 | 不需要結尾，作用在一個特定位置：<br> 換行、<hr> 隔線、<img> 圖片、<meta>、<input>。 |
| 成對標籤 | 大多數標籤：<p>…</p>、<a>…</a>。開始標籤加上斜線 / 就是結束標籤，中間的內容就是標籤作用的範圍。 |
| 成對三原則 | ① 順序原則：先有開始標籤，才會有結束標籤。 ② 對應原則：有開始就要有結束，數目相同。 ③ 巢狀原則：被包住的標籤，必須在外層標籤裡面完整開始與結束，不能交錯。 |
| 屬性 | 寫在開始標籤裡的補充設定：<a href="…" target="_blank">，格式是 屬性="值"。 |
HTML 標籤手冊（搜尋、篩選、放進遊樂場）
每一項都有說明與範例。按「放進遊樂場」會把範例載入下方的遊樂場，直接修改看效果；「複製問法」則會複製一段請 AI 解釋的提問。
HTML 遊樂場＋案例
選擇一個案例，完成任務清單。右側預覽會即時更新。
舊語法 → 新做法
網路上很多舊教材（包含舊版講義）的寫法，現在已不建議使用。看到下面的舊寫法，請改用新做法：
| 項目 | 舊寫法 | 現在的做法 |
|---|---|---|
| 段落對齊 | <p align="center"> | CSS：text-align: center; |
| 表格框線與間距 | <table border="1" cellpadding="8" bgcolor="…"> | CSS：border、padding、background |
| 字體顏色 | <font color="red"> | CSS：color: red;（font 標籤已淘汰） |
| 置中 | <center> | CSS：text-align、margin: 0 auto、Flex |
| 粗體／斜體 | <b> <i>（只管外觀） | <strong> <em>（表達重要性與語氣） |
| 用表格排版面 | 用 <table> 切整個頁面 | CSS Flexbox／Grid；表格只放「表格資料」 |
| 跑馬燈、閃爍 | <marquee> <blink> | CSS 動畫 @keyframes（且要尊重減少動態效果） |
| 到處用 div | <div id="header"> | 語意標籤 <header> <main> <footer> |
alt；③ HTML 只負責「結構」，樣式交給 CSS，不要用標籤屬性調外觀。03CSS 語法：決定網頁的樣子
CSS（Cascading Style Sheets，串接樣式表）負責網頁的外觀與排版。它讓你：精確控制文字、背景、字型；只改一份 CSS 就能同時更新很多頁面；讓 HTML 更精簡；適用各種裝置平台。
選擇器 {
屬性: 值;
屬性: 值;
}
h1 {
font-size: 20px;
line-height: 2em;
color: #D7297A;
}
| 三種套用方式 | 寫法 | 建議 |
|---|---|---|
| 外部樣式表 | <link rel="stylesheet" href="css/style.css"> | ✓ 最推薦：多頁共用、好維護 |
| 內嵌樣式 | <style> h1 { … } </style>（寫在 head） | 單頁練習、快速測試 |
| 行內樣式 | <p style="color:red"> | 盡量避免，優先權過高、難維護 |
選擇器（Selector）：決定樣式要套給誰
| 種類 | 寫法 | 說明 |
|---|---|---|
| 標籤選擇器 | h1 { … } | 所有這個標籤都會套用。 |
| 類別（class） | .title { … } | 以「.」開頭，名稱自訂；同一頁可有多個，也能同時套用多處。 |
| ID | #top { … } | 以「#」開頭，一個頁面同一個 ID 只能用一次，是獨一無二的。 |
| 組合 | nav li（後代）、main > p（子層）、h1, h2（群組）、.a.b（同時） | 用空白、>、逗號串接。 |
| 偽類／屬性 | a:hover、li:first-child、a[href] | 依狀態、位置或屬性挑選。 |
單位與色彩
| 單位 | 說明 | 範例 |
|---|---|---|
| px | 像素，最直觀、精確的單位。 | font-size: 16px; |
| em／rem | em：相對「父層」字級（2em＝兩倍）；rem：相對「根（html）」字級，現代專案最常用，利於整體縮放。 | line-height: 2em; padding: 1.5rem; |
| % | 相對父層的百分比。 | width: 50%; |
| vw／vh | 相對視窗寬／高的 1%。 | height: 100vh; |
色彩寫法：#rrggbb（HEX，16 進位）、rgb(135, 255, 124)、rgba(…, 0.5)（含透明度）、hsl(…)（色相、飽和度、亮度）、色彩名稱（red）。找配色可以用 Adobe Color、Coolors，以及 MDN 色彩選擇工具。
盒模型：每個元素都是一個盒子
每個元素由內而外分成：內容（content）→ 內距（padding）→ 邊框（border）→ 外距（margin）。拖拉滑桿看看，並比較 content-box 與 border-box 的差別。
內容
*, *::before, *::after { box-sizing: border-box; } 讓所有元素用 border-box，寬度計算直覺很多；再搭配 img { max-width: 100%; } 就能避免圖片超出版面。CSS 屬性手冊（搜尋、篩選、放進遊樂場）
排版實驗室：Flexbox 與 Grid
想讓元素橫向排列、對齊、分欄，現在用 Flexbox（一維）與 Grid（二維）。調整選項，看 5 個方塊如何排列，並複製產生的 CSS。
CSS 遊樂場＋案例
舊語法 → 新做法
| 項目 | 舊／有問題的寫法 | 現在的做法 |
|---|---|---|
| 字距、背景位置沒單位 | letter-spacing: 5; background-position: 135 159; | 數值（0 除外）一定要有單位：5px、135px 159px |
| 文字閃爍 | text-decoration: blink; | 已無效；用 @keyframes 動畫 |
| 漸層 | -webkit-gradient(…) | linear-gradient()、radial-gradient() |
| 用 float 做排版 | float: left; 切欄位 | display: flex 或 grid |
| 只寫固定寬度 | width: 960px; | max-width＋%／rem／clamp()，並搭配 @media |
| 瀏覽器前綴 | -webkit-border-radius 等 | 現代瀏覽器大多直接支援，不必加前綴 |
| IE 專用語法 | filter: alpha(opacity=50) | opacity: 0.5（IE 已於 2022 年停止支援） |
04JavaScript 語法：讓網頁會互動
JavaScript（簡稱 JS）是網頁的行為語言：偵測使用者動作（點擊、輸入）、修改網頁內容與樣式、驗證表單、做出動態效果。它直接在瀏覽器中執行，不需要安裝任何東西。
| 放在哪裡？ | 寫法 | 建議 |
|---|---|---|
| 內嵌 | <script> … </script>，放在 </body> 之前 | 單頁練習 |
| 外部檔案 | <script src="js/main.js" defer></script> | ✓ 推薦；defer 會等網頁讀完才執行 |
| Console | 瀏覽器 F12 → Console 分頁 | 輸入程式碼立刻執行，除錯必備 |
操作網頁的「DOM 三步驟」
選取元素
const btn = document.querySelector('#btn');
用 CSS 選擇器找到畫面上的元素。
監聽事件
btn.addEventListener('click', function () { … });
等使用者點擊、輸入、滑過…
改變內容或樣式
out.textContent = '你好'; out.classList.toggle('dark');
JavaScript 語法手冊（搜尋、篩選、放進遊樂場）
範例都有 console.log，執行後請看遊樂場右下方的 Console 區。
JavaScript 遊樂場＋案例
jQuery 與原生 JavaScript 對照
作業二（web04）與之後的 OnePage 實作會用到 jQuery。它的邏輯和原生 JS 一樣，只是更簡短。兩種寫法都要看得懂：
| 動作 | jQuery | 原生 JavaScript |
|---|---|---|
| 選取 | $('.box') | document.querySelectorAll('.box') |
| 點擊事件 | $('#btn').on('click', fn) | btn.addEventListener('click', fn) |
| 加／移除 class | $(el).addClass('on') | el.classList.add('on') |
| 改文字 | $('#out').text('Hi') | out.textContent = 'Hi' |
| 隱藏／顯示 | $('.box').hide() .show() | el.style.display = 'none'／'' |
| 網頁準備好 | $(function () { … }) | script 加 defer，或 DOMContentLoaded |
舊語法 → 新做法
| 項目 | 舊寫法 | 現在的做法 |
|---|---|---|
| 宣告變數 | var x = 1; | const（不改的值）、let（會改的值） |
| 比較相等 | x == '1' | x === 1（嚴格相等，不做型態轉換） |
| 行內事件 | <button onclick="go()"> | addEventListener（HTML 與 JS 分離） |
| 輸出到頁面 | document.write() | textContent、createElement |
| 除錯 | 用 alert() 到處彈窗 | console.log()＋開發者工具 Sources 斷點 |
| 字串相加 | '你好 ' + name + '！' | 樣板字面值 `你好 ${name}！` |
05綜合案例：三種語言一起用
真正的網頁，是 HTML、CSS、JavaScript 合作的結果。下面兩個案例同時用到三種語言，請切換上方的 HTML／CSS／JS 分頁，找找各自負責什麼，再完成任務。
HTML 負責
有哪些元素：卡片、頭像、清單、按鈕，以及它們的階層。
CSS 負責
長什麼樣：版面、顏色、圓角、陰影，以及 .dark 狀態的樣子。
JS 負責
何時改變：偵測點擊，切換 dark class 並更新文字。
06AI 協作：用 AI 加速學習語法
這一頁的每個語法旁都有「複製問法」。把 AI 當成「家教」，而不是「代寫」：能用手冊查到的先自己查，不懂的地方再問 AI，並回到遊樂場驗證。
你要自己懂
三種語言各自的角色、標籤成對、選擇器怎麼選到元素、DOM 三步驟，以及「看到錯誤能判斷哪裡錯」。
可以請 AI 幫忙
用比喻解釋觀念、說明錯誤訊息、查某個屬性的所有用法、比較寫法、出練習題、改寫成另一種寫法。
好問題的結構
| 要素 | 範例 |
|---|---|
| ① 我的程度 | 我是網頁設計初學者。 |
| ② 我想做什麼 | 我想讓按鈕被點擊時，標題變成紅色。 |
| ③ 我的程式碼與現象 | （貼上 HTML、JS）。點了沒有反應，Console 出現紅字：… |
| ④ 要求的回答方式 | 請先列出 3 個可能原因，並教我怎麼檢查，先不要直接給完整答案。 |