Chapter 1: Essential Knowledge
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」），已移到第三章「高頻應用」與第二章「核心概念」，這裡只保留純定義型的卡片。
7. Final-round Environment Quick Reference (v3-lite2) / 決賽新制環境速查
The current final-round format (v3-lite2) is a full-stack database project; the competition computers come with this environment pre-installed（比賽電腦已預先安裝以下環境）.
| Software / 軟體 | Version / 版本 | Note / 備註 |
|---|---|---|
| Docker Desktop | 最新版 | 透過 docker-compose.yml 提供 PHP 8.4 + MySQL 8.0；Composer、Laravel、PHPUnit 已含在映像檔內 |
| Node.js（含 npm） | 24.14.0 | Laravel Vite 建構用 |
| Git | 最新版 | 版控，最後一次 commit 是評分依據 |
| MySQL Workbench | 8.0.46 | 資料庫管理與匯出 |
| Tailwind CSS | ≥ 4.2 | 已預裝於 Laravel 專案模板 + 獨立靜態檔 |
| Bootstrap | 5.0.2 | 獨立靜態檔（供 Plain PHP 使用） |
Database connection / 資料庫連線: host 127.0.0.1（container-internal name: mysql）, port 3306, database skills_macau, user root, password blank.
docker-compose up -d # start the PHP + MySQL containers
docker-compose exec app composer create-project laravel/laravel . # create the Laravel project
docker-compose exec app php artisan migrate --seed # create tables + seed initial data
docker-compose exec app php artisan serve --host=0.0.0.0 --port=8000
Common mistake: in Laravel's .env, the database host must be mysql (the Docker container name), not 127.0.0.1 — the latter is only for tools outside the container (e.g. MySQL Workbench).
