Chapter 1: Essential Knowledge

Definitions, terms, formulas, and basic facts. Do not worry about “why” yet—memorise the essentials first; Chapter 2 explains the principles.

Key Vocabulary

English / 英文	中文	Simple Meaning / 簡單意思
semantic	語意化的	describes purpose
attribute	屬性	extra tag information
retrieve	讀取／取得	get stored data

1. HTML Quick Reference

Form Elements / 表單元素

Tag or Attribute / 標籤或屬性	Meaning / 意思
`<form>`	form container（表單容器）
`<input type="text">`	general text input（一般文字輸入）
`<input type="tel">`	phone-number input（電話號碼輸入）
`<input type="number">`	number input（數字輸入）
`<input type="date">`	date input（日期輸入）
`<input type="checkbox">`	multiple-choice box（多選方塊）
`<input type="radio">`	one-choice button; same `name` = one group（單選鈕）
`<select>` + `<option>`	drop-down list（下拉選單）
`<label>`	description for one field（欄位說明）
`<fieldset>` + `<legend>`	group related fields with a title（欄位分組標題）
`required`	must be completed（必填）
`maxlength`	maximum input length（最大字數）
`autofocus`	focus automatically on load（載入時自動聚焦）
`placeholder`	hint shown before input（輸入前提示）

Semantic Tags (HTML5) / 語意化標籤

Tag / 標籤	Meaning / 意思
`<header>` / `<footer>`	page header / footer（頁首／頁尾）
`<nav>`	navigation area（導覽區塊）
`<section>`	thematic page section（主題區塊）
`<article>`	independent content item（可獨立成篇內容）
`<aside>`	side or extra information（側欄／附加資訊）
`<figure>` + `<figcaption>`	figure and caption（圖片及說明）

Media, Tables, and Other Tags / 多媒體、表格與其他

Item / 項目	Meaning / 意思
`<img alt="...">`	alternative text for screen readers（替代文字）
`<video>` / `<audio>`	embedded video / audio（嵌入影片／音訊）
`poster`	video thumbnail attribute（影片縮圖屬性）
`<canvas>` / `<svg>`	drawing canvas / vector graphic（繪圖畫布／向量圖）
`<table>` / `<tr>` / `<td>` / `<th>`	table / row / cell / header cell（表格／列／儲存格／表頭）
`<thead>` / `<tbody>` / `<tfoot>`	table structure sections（表格結構分區）
`rowspan` / `colspan`	merge cells vertically / horizontally（縱向／橫向合併）
`id`	unique page identifier（頁面唯一識別碼）
`target="_blank"`	open link in a new tab（新分頁開啟）
`<!DOCTYPE html>`	declares an HTML5 document（宣告 HTML5）
`<center>` / `<font>`	obsolete tags; avoid in HTML5（舊式標籤）

2. CSS Quick Reference

CSS 速查表

Text and Colour / 文字與顏色

Property / 屬性	Meaning / 意思
`color`	text colour（文字顏色）
`font-weight`	text weight; `bold` = boldface（粗細）
`font-style`	text style; `italic` = slanted（斜體）
`line-height`	line spacing（行距）

Box Model: content → padding → border → margin (inside to outside). 盒子模型四層。

position values: static (default), relative (offset from itself), absolute (positioned ancestor), fixed (viewport), sticky (conditional stickiness).

Layout Keywords / 版面佈局

Term / 名詞	Meaning / 意思
Flexbox	one-dimensional layout（單一方向佈局）, `display: flex;`
`justify-content`	alignment on the main axis（主軸對齊）
`align-items`	cross-axis alignment for all items（整排交叉軸對齊）
`align-self`	cross-axis alignment for one item（單一元素交叉軸對齊）
Grid	two-dimensional layout（二维佈局）, `display: grid;`
`@media`	responsive-rule syntax（響應式核心語法）

Responsive breakpoints: mobile ≤ 640px, tablet ≤ 1024px, desktop > 1024px.

Selectors / 選擇器

Selector / 選擇器	Meaning / 意思
`p`	tag selector（標籤選擇器）
`.class`	class selector（class 選擇器）
`#id`	ID selector（id 選擇器）
`div p`	descendant selector（後代選擇器）
`div > p`	direct-child selector（只選直接子元素）
`:hover`	hover pseudo-class（滑鼠懸停偽類）
`:last-child`	last-child pseudo-class（最後子元素偽類）

3. JavaScript Quick Reference

JavaScript 速查表

JSON Conversion / JSON 轉換

Method / 方法	Meaning / 意思
`JSON.stringify(obj)`	object / array → string（物件／陣列轉字串）
`JSON.parse(str)`	string → object / array（字串轉回物件／陣列）

Events / 事件

Event / 事件	Trigger / 觸發時機
`onclick`	when clicked（點擊時）
`oninput`	whenever input changes（每字可觸發）
`onchange`	changed after losing focus（失焦後觸發）
`onload`	when page loading finishes（頁面載入完成）

Common Methods / 常用方法

Method / 方法	Meaning / 意思
`scrollIntoView({behavior: "smooth"})`	scroll into view smoothly（平滑捲動進入畫面）
`window.scrollTo({top, behavior: "smooth"})`	scroll to a chosen position（捲動到指定位置）
`IntersectionObserver`	detects entry into the viewport（偵測進入畫面）
`split()`	split a string into an array（字串拆成陣列）
`map()`	returns a processed new array（回傳處理後新陣列）

Tests and Operators / 判斷與運算子

Item / 項目	Meaning / 意思
`===`	compares value and type（比較值及型別）
`==`	compares after type coercion（會自動轉型別）
`typeof NaN`	result is `"number"`（結果是數值型別）
`Array.isArray()`	tests whether a value is an array（判斷是否為陣列）
`isNaN(x)`	tests whether a value is NaN（判斷是否為 NaN）

4. LocalStorage Quick Reference

LocalStorage 速查

localStorage.setItem("key", "value");      // 存
const v = localStorage.getItem("key");     // 讀
localStorage.setItem("obj", JSON.stringify(data));   // 存物件先轉字串
const data = JSON.parse(localStorage.getItem("obj")); // 讀出再轉回物件

Stores strings only; capacity is about 5 MB. 只能存字串。
It persists after closing the browser (unlike SessionStorage). 關閉瀏覽器不會消失。
Access data as key-value pairs. 以 key-value 方式存取。

5. Accessibility and Responsive Basics

無障礙與響應式基本要求

Requirement / 要求	Meaning / 意思
Alternative text（圖片替代文字）	`<img alt="...">`
Form label（表單欄位標籤）	pair `<label>` with `<input>`（配對使用）
High contrast（高對比度）	text must stand out from its background（文字與背景要清楚）
Keyboard access（鍵盤可操作）	do not require only mouse or touch（不能只靠滑鼠／觸控）
Error message（錯誤提示）	use text and colour, not colour alone（文字＋顏色）
Viewport meta（可視區 meta）	`<meta name="viewport" content="width=device-width, initial-scale=1">`
Minimum button size（按鈕最小尺寸）	44px × 44px

6. Flash Cards (NotebookLM)

速記單字卡

Cover the answer and recall it first. Good for short revision sessions.

先蓋住答案再回答，適合零碎時間。

#	Question / 題目	Answer / 答案
1	HTML 中定義表格表頭單元格的標籤？	`<th>`
2	為 `<img>` 提供替代文字的屬性？	alt
3	HTML 文檔的根元素標籤？	`<html>`
4	HTML5 中定義獨立自包含內容的語意標籤？	`<article>`
5	建立下拉選單要結合哪兩個標籤？	`<select>` 與 `<option>`
6	強制使用者提交前必填的屬性？	required
7	定義頁面或區塊底部資訊的標籤？	`<footer>`
8	HTML5 建議廢棄、改用 CSS 處理置中的標籤？	`<center>`
9	錨點跳轉搭配 `<a>` 標籤用的屬性？	href
10	嵌入影片用的 HTML5 元素？	`<video>`
11	跨行／跨列合併儲存格的屬性？	rowspan 與 colspan
12	讓手機彈出日期選擇器的 input type？	date
13	連結在新視窗開啟的 target 屬性值？	`"_blank"`
14	為 `<figure>` 提供標題文字的元素？	`<figcaption>`
15	搭配表單輸入框描述文字的標籤？	`<label>`
16	包裝導航連結區塊的語意標籤？	`<nav>`
17	讓輸入框自動獲得焦點的屬性？	autofocus
18	把表單相關控件分組的標籤？	`<fieldset>`
19	播放音樂／音頻的標籤？	`<audio>`
20	讓 radio 預設選中的屬性？	checked
21	`<!DOCTYPE html>` 的主要目的？	宣告文件為 HTML5 並啟動標準模式
22	嵌入 SVG 向量圖形的標籤？	`<svg>`
23	`<video>` 設定載入前縮圖的屬性？	poster
24	限制輸入框最大字數的屬性？	maxlength
25	`<div>` 屬於哪種元素（相對 `<span>` 的 inline）？	塊級（block-level）
26	塊級元素預設佔父容器多少寬度？	100%（整行）
27	顯示進度百分比的標籤？	`<progress>`
28	嵌入另一個網頁的標籤？	`<iframe>`
29	rem 相對於誰的字體大小？	根元素（`<html>`）
30	預設盒模型下元素總寬度公式？	width + padding + border（+ margin 為佔用空間）
31	Flexbox 中控制主軸對齊的屬性？	justify-content
32	控制 Flex 項目是否伸縮填滿空間的屬性？	flex-grow
33	z-index 生效的前提條件？	position 為 relative/absolute/fixed/sticky
34	Grid 中指定跨行跨列的縮寫屬性？	grid-area
35	捲動到閾值後固定的 position 值？	sticky
36	`typeof NaN` 回傳什麼型別？	number
37	字串轉整數的函式？	parseInt()
38	徹底防止物件被修改的方法？	Object.freeze()
39	正確判斷變數是否為 NaN？	isNaN(x)
40	`Array.prototype.map()` 回傳什麼？	處理後組成的新陣列
41	讓非同步程式碼寫起來像同步的關鍵字組合？	async / await
42	合併兩陣列產生新陣列、不影響原陣列的方法？	concat()
43	`event.preventDefault()` 的作用？	阻止瀏覽器預設行為（如表單提交跳轉）
44	正確判斷變數是否為陣列？	Array.isArray(variable)
45	物件轉 JSON 字串的方法？	JSON.stringify()
46	確保網頁依設備寬度縮放的 meta 標籤？	viewport meta 標籤
47	建議互動按鈕最小點擊區域？	44px × 44px
48	LocalStorage 儲存物件資料的方法？	先 stringify() 存，取回再 parse()
49	`overscroll-behavior: contain` 解決什麼問題？	防止過度滾動的彈性回彈效果
50	無障礙設計要求錯誤訊息還要能被什麼工具讀出？	螢幕閱讀器
51	PWA 是什麼？	讓網頁具備類似原生 App 體驗的技術（離線工作、全螢幕等）
52	實現透明效果的 CSS 屬性？	opacity
53	輸入電話號碼並喚起數字鍵盤的最優 type？	tel
54	`column-count` 用於什麼佈局？	多列（多欄）文本佈局

其餘卡片與情境應用有關（例如「旅遊登記系統何時寫入 LocalStorage」），已移到第三章「高頻應用」與第二章「核心概念」，這裡只保留純定義型的卡片。