LESSON-02 · 零基礎學生教材
HTML 基礎：首頁骨架
建立自己的 commercial-site/index.html 與 services.html；首頁有一個 header、一個 main、一個 h1、兩個各含 h2 的 section，並有指向 services.html 的文字連結。
先理解：這堂課解決什麼問題？
客戶只有一段商家介紹與服務資訊，先用兩個 HTML 檔案建立能閱讀、能前往下一頁的首頁骨架；本堂不加入 CSS、JavaScript 或框架。
本堂要完成：建立自己的 commercial-site/index.html 與 services.html；首頁有一個 header、一個 main、一個 h1、兩個各含 h2 的 section，並有指向 services.html 的文字連結。
學習邊界：先完成「用 HTML 語意建立服務型商家首頁骨架」，不提前引入尚未教過的框架或建置工具。
第一次上課環境：從兩個 HTML 檔案開始
- 編輯器：建立並儲存純文字檔案；先確認副檔名是
.html，不是.html.txt。 - 資料夾：建立
commercial-site/，裡面放index.html與services.html，本堂不新增 CSS、JavaScript 或框架。 - 瀏覽器：先開啟
index.html；每次儲存後回到瀏覽器重新整理，才會看到最新結果。 - DevTools：在頁面按右鍵選「檢查」，本堂先用 Elements 看文件階層，再用 Network 看 HTML 是否 200 或 404。
素材選修預告：assets/ 本堂只知道它是素材資料夾，不建立也不引用本地素材。
先做最小實驗：先看見結果
這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。
- 入口：開啟
examples/minimal/index.html。 - 操作：開啟
examples/minimal/index.html，先點擊頁面內連結，再觀察網址中的 #services，最後用 Elements 展開文件階層。 - 預期：頁面內連結把網址移到 #services；Elements 能看到 html、head、body、header、main、section、h1 與 h2。
- 重設：重新整理
examples/minimal/index.html；需要重做時回到這份只讀示範頁。
學生練習流程
依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。
-
1
最小實驗
第一次開啟 HTML：在編輯器建立commercial-site/，用瀏覽器開啟index.html；儲存後重新整理。 -
2
最小實驗 2
先開啟examples/minimal/index.html，點擊頁面內連結，觀察網址中的#services，再用 Elements 展開文件階層。 -
3
名詞
回到名詞卡，依序拆解 doctype、head/body、header/main/section、title/h1/h2、元素／標籤／屬性、a/href、id 與相對路徑。 -
4
Starter
把 Starter 複製到自己的工作資料夾：完成 header/main/唯一 h1、兩個有 h2 的 section，再加入 services.html 連結；每一步都要看到指定結果。 -
5
Checkpoint
開啟 Checkpoint，點擊故意寫成service.html的連結，從 Network 確認唯一的 404。 -
6
驗收
把 href 修回services.html，確認 Network 變成 200；最後用 Elements、網址列、Tab focus 與窄版畫面留下驗收證據。 -
7
變體驗收
完成情境變體與獨立挑戰，保留兩個 HTML 檔案的責任，不新增 CSS、JavaScript 或框架，並閱讀下一堂銜接：多頁面與表單：下一堂會把相對路徑延伸到 services、about 與 contact 頁。
檔案地圖：每個位置負責什麼？
先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。
index.html首頁入口：呈現商家第一印象與主要 CTA。services.html服務頁：集中說明方案、內容與比較資訊。
先學會這些詞
先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。
文件骨架
4 個詞doctypeDOCTYPE declaration 白話意思：告訴瀏覽器這份文件使用現代 HTML 規則。 展開查看正式定義、範例與驗收證據
- 正式定義
- 位於文件最前方、宣告 HTML 文件型別的指示，不是一般內容元素。
- 什麼時候用
- 建立每一份 HTML 文件時。
- 最小範例
- <!doctype html> 放在 index.html 第一行。
- 可觀察證據
- 檢視原始檔案第一行，頁面以標準模式呈現。
- 容易混淆
- 和
html元素混淆；doctype 是文件宣告，html 才是文件根元素。
head／bodyHTML head and body 白話意思：head 放分頁設定，body 放訪客看得到的內容。 展開查看正式定義、範例與驗收證據
- 正式定義
- head 承載 title 等文件中繼資料，body 承載文件的主要可見內容。
- 什麼時候用
- 要設定 title，或決定內容放在哪裡時。
- 最小範例
- <head><title>首頁</title></head><body><h1>我的商家</h1></body>。
- 可觀察證據
- title 出現在分頁，h1 出現在畫面；Elements 可展開兩個區域。
- 容易混淆
- 和把所有內容放 body 混淆；title 應放 head，不會直接顯示在頁面。
header／main／sectionsemantic landmarks 白話意思：分別表示頁首、頁面的主要內容與一個內容分區。 展開查看正式定義、範例與驗收證據
- 正式定義
- 用名稱表達文件區域責任的 HTML 語意元素；main 應代表本頁主要內容。
- 什麼時候用
- 建立服務型首頁的內容骨架時。
- 最小範例
- header 放品牌說明，main 放首頁內容，兩個 section 分開介紹與服務。
- 可觀察證據
- Elements 的 DOM 階層與每個 section 內的 h2。
- 容易混淆
- 和 div 混淆；div 只有通用容器意義，語意元素能說明區域責任。
title／h1／h2document and heading levels 白話意思：title 是分頁名稱，h1 是本頁主題，h2 是內容分區標題。 展開查看正式定義、範例與驗收證據
- 正式定義
- title 描述文件名稱，h1 表示最高層級主標題，h2 表示 h1 下的次層級標題。
- 什麼時候用
- 需要同時設定分頁與畫面標題層級時。
- 最小範例
- <title>安心服務｜首頁</title><h1>讓日常維護變得簡單</h1><h2>服務內容</h2>。
- 可觀察證據
- 分頁、Elements 的
h1/h2數量與標題文字都可對照。 - 容易混淆
- 和只用字體大小混淆；標題層級是內容結構，不只是視覺大小。
元素與連結
4 個詞元素／標籤／屬性element, tag, attribute 白話意思：元素是完整內容單位，標籤是寫法，屬性是標籤裡的額外設定。 展開查看正式定義、範例與驗收證據
- 正式定義
- 元素是瀏覽器建立的文件節點；標籤描述節點類型與邊界；屬性提供名稱和值。
- 什麼時候用
- 閱讀或修改 HTML 原始碼時。
- 最小範例
- <a href="services.html">服務</a> 中 a 是標籤與元素類型，href 是屬性。
- 可觀察證據
- 原始碼與 Elements 的節點、Attributes 區域可以互相對照。
- 容易混淆
- 和 CSS property 混淆；attribute 寫在 HTML，property 是 CSS 宣告的一部分。
anchor／a／hrefanchor element and href 白話意思：a 是可點擊的連結，href 告訴瀏覽器要去哪裡。 展開查看正式定義、範例與驗收證據
- 正式定義
- anchor 元素透過 href 指定超連結目的地；同層檔案可使用相對路徑。
- 什麼時候用
- 需要讓訪客從首頁前往
services.html時。 - 最小範例
- <a href="services.html">查看服務方案</a>。
- 可觀察證據
- Tab 可以聚焦連結，點擊後網址與 Network 顯示目標 HTML。
- 容易混淆
- 和 link 混淆；link 通常載入資源，a 是頁面內容中的可操作連結。
idid attribute 白話意思：給單一元素的識別名稱，也可以成為頁面內連結目標。 展開查看正式定義、範例與驗收證據
- 正式定義
- 元素上應唯一的識別屬性，可被
#id連結或在 Elements 中定位。 - 什麼時候用
- 要讓頁面內連結跳到指定 section 時。
- 最小範例
- <section id="services"> 搭配 <a href="#services">服務</a>。
- 可觀察證據
- 點擊後網址出現
#services，Elements 找到對應 section。 - 容易混淆
- 和 class 混淆；id 應識別單一目標，class 可被多個元素共用。
相對路徑relative path 白話意思：從目前 HTML 所在資料夾找另一個檔案。 展開查看正式定義、範例與驗收證據
- 正式定義
- 以目前文件 URL 為基準解析目標資源或頁面位置的路徑表示法。
- 什麼時候用
- 首頁要連到同一資料夾的
services.html時。 - 最小範例
- href="services.html" 會從目前 index.html 的資料夾找檔案。
- 可觀察證據
- Network 顯示實際請求 URL；錯字
service.html會得到 404。 - 容易混淆
- 和檔名本身混淆；檔名正確但資料夾不同時，仍需要正確的相對位置。
瀏覽器驗收
2 個詞Elements／DOMElements panel and DOM 白話意思：Elements 讓你看瀏覽器目前的 HTML 樹；DOM 是這棵可被瀏覽器理解的文件樹。 展開查看正式定義、範例與驗收證據
- 正式定義
- DOM 是瀏覽器以 HTML 建立的文件物件模型；Elements 是 DevTools 用來檢查它的面板。
- 什麼時候用
- 要確認 header、main、section 與標題層級是否真的存在時。
- 最小範例
- 在 Elements 展開 body，查看唯一 h1、兩個 section 與各自的 h2。
- 可觀察證據
- DOM 的階層、元素數量與畫面內容一致。
- 容易混淆
- 和編輯器裡的原始文字混淆；Elements 顯示的是瀏覽器解析後的目前結果。
主要行動連結primary action link 白話意思：頁面希望訪客下一步做的最重要連結。 展開查看正式定義、範例與驗收證據
- 正式定義
- 依頁面任務選出的主要超連結；本堂它是前往
services.html的一般 a 元素。 - 什麼時候用
- 首頁內容完成後，需要讓訪客繼續了解服務時。
- 最小範例
- <a href="services.html">查看服務方案</a>。
- 可觀察證據
- Tab 可聚焦，點擊後到達
services.html，Network 回應 200。 - 容易混淆
- 和按鈕混淆；前往另一頁使用 a，留在目前頁面觸發動作才考慮 button。
最小例子：先看懂，再複製
這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>安心服務｜首頁</title>
</head>
<body>
<header>
<p>安心服務商家</p>
</header>
<main>
<h1>讓日常維護變得簡單</h1>
</main>
</body>
</html>Live Lab：逐段讀碼與驗證
每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。
-
Step 1
先建立 HTML 文件骨架
- 目的
- 先讓瀏覽器知道這是一份 HTML 文件，再把設定區和內容區分開。
- 修改位置
index.html
在 body 內建立一個 header、一個 main 與唯一的 h1。- 預期結果
- 重新整理後看到一個主標題；Elements 的 body 下只有一個 header、一個 main 與一個 h1。
- 驗收證據
- 分頁顯示 title，Elements 可數出 header=1、main=1、h1=1。
- 卡住先查
- 只檢查
index.html的 body；先不要新增 section 或連結。
-
Step 2
把內容分成兩個 section
- 目的
- 用 section 和 h2 表達品牌介紹與服務內容是兩個不同分區。
- 修改位置
index.html
在 main 裡新增兩個 section，每個 section 都放一個 h2 與一段 p。- 預期結果
- 畫面出現兩個內容分區；Elements 顯示 section=2，且每個 section 都有一個 h2。
- 驗收證據
- Elements 展開 main，確認 h1 後有兩個 section，section 內各有 h2。
- 卡住先查
- 搜尋 <section 與 <h2 的數量，並確認每個 h2 都在 section 裡。
-
Step 3
加入前往服務頁的連結
- 目的
- 用 a 和 href 讓首頁連到同一資料夾中的
services.html。 - 修改位置
index.html
加入一個 href 指向services.html的主要行動連結。- 預期結果
- 按下連結後網址前往
services.html；Network 對該 HTML 回應 200。 - 驗收證據
- Tab 可以聚焦連結，點擊後網址列顯示
services.html。 - 卡住先查
- 確認
index.html與services.html在同一個 files 資料夾，再逐字比對 href。
-
Step 4
故意製造一次 404
- 目的
- 把檔名錯誤變成可觀察的 Network 證據。
- 修改位置
index.html的 a href
先開啟連結並觀察service.html的 404，不要立刻重寫整份 HTML。- 預期結果
- 點擊後請求
service.html，Network 顯示 404；畫面無法載入指定服務頁。 - 驗收證據
- Network 的 Request URL 是
service.html，Status Code 是 404；檔案樹實際檔名是services.html。 - 卡住先查
- 先複製 Network 的完整 URL，再只查看 files 資料夾是否有同名檔案。
-
Step 5
修回正確的相對路徑
- 目的
- 用檔案樹與網址證據修正單一 href，而不是重做整個頁面。
- 修改位置
index.html的 a href
把 href 從service.html改成services.html，重新整理並再次點擊。- 預期結果
- 同一個連結現在前往
services.html，Network 回應 200。 - 驗收證據
- 網址列是
services.html，Network 的services.htmlStatus Code 是 200。 - 卡住先查
- 只檢查 href 的值與
services.html檔名，不要先修改 HTML 其他區塊。
-
Step 6
用 Elements 與鍵盤完成語意驗收
- 目的
- 把 HTML 結構轉成別人可以重做的證據。
- 修改位置
index.html、services.html
在 Elements 確認 header=1、main=1、h1=1、section=2；用 Tab 確認 CTA 有清楚 focus。- 預期結果
- 結構、連結與鍵盤操作都能被觀察；390px 寬度沒有水平溢出。
- 驗收證據
- 提交 Elements 結構、title、
services.html200、Tab focus 與窄版畫面結果。 - 卡住先查
- 一次只檢查一件事：先數 DOM，再測連結，最後按 Tab。
讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。
互動問答
先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。
Q1概念理解 「doctype（DOCTYPE declaration）」在本堂要解決什麼問題？ 本題線索：doctype；回到名詞卡與 檢視原始檔案第一行，頁面以標準模式呈現。 展開解析收合解析
白話解析：
告訴瀏覽器這份文件使用現代 HTML 規則。 正式來說，位於文件最前方、宣告 HTML 文件型別的指示，不是一般內容元素。
對照位置：
回到名詞卡「doctype」，再看 檢視原始檔案第一行，頁面以標準模式呈現。
預期觀察：
你應該能用自己的話說出：建立每一份 HTML 文件時。
常見錯誤：
不要只回答「它是doctype」；那是重複名詞，不是說明責任。
立即驗證：
開啟 examples/minimal/index.html，依序做「開啟 examples/minimal/index.html，先點擊頁面內連結，再觀察網址中的 #services，最後用 Elements 展開文件階層。」並記下畫面或工具證據。
Q2程式碼閱讀
修改指定規則後，你預測畫面會看到什麼？
本題線索：index.html；要修改：在 body 內建立一個 header、一個 main 與唯一的 h1。；觀察：分頁顯示 title，Elements 可數出 header=1、main=1、h1=1。
展開解析收合解析
白話解析：
先看檔案責任，再預測結果。這一步的目的：先讓瀏覽器知道這是一份 HTML 文件，再把設定區和內容區分開。
對照位置：
對照 Live Lab Step 1，位置是 index.html；先找到文件骨架，再把實際 HTML 貼到自己的 index.html。
預期觀察：
重新整理後看到一個主標題；Elements 的 body 下只有一個 header、一個 main 與一個 h1。
常見錯誤：
如果只改了檔案但沒有結果，先不要重寫全部；只檢查 index.html 的 body；先不要新增 section 或連結。
立即驗證：
實際操作後檢查 分頁顯示 title，Elements 可數出 header=1、main=1、h1=1。。
Q3概念比較
「doctype」和「head／body」在本堂的責任有什麼不同？
本題線索：比較 doctype 與 head／body；操作位置：index.html
展開解析收合解析
白話解析：
doctype：告訴瀏覽器這份文件使用現代 HTML 規則。；head／body：head 放分頁設定，body 放訪客看得到的內容。
對照位置：
對照兩張名詞卡的正式定義：位於文件最前方、宣告 HTML 文件型別的指示，不是一般內容元素。／head 承載 title 等文件中繼資料，body 承載文件的主要可見內容。
預期觀察：
你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。
常見錯誤：
不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。
立即驗證：
在 index.html 做「在 main 裡新增兩個 section，每個 section 都放一個 h2 與一段 p。」，再用 Elements 展開 main，確認 h1 後有兩個 section，section 內各有 h2。 比較前後差異。
Q4除錯驗收
如果完成操作後結果不對，你會先從哪一個證據開始查？
本題線索：index.html、services.html；第一個檢查位置：提交 Elements 結構、title、services.html 200、Tab focus 與窄版畫面結果。
展開解析收合解析
白話解析：
先描述症狀，再提出一個最小假設。本堂常見錯誤是：只截畫面，不提供 Elements、網址、Network 或 focus 證據。
對照位置：
對照最後一段 Live Lab：index.html、services.html；檢查方式：一次只檢查一件事：先數 DOM，再測連結，最後按 Tab。
預期觀察：
你要能指出一個具體位置，而不是一次修改很多檔案。
常見錯誤：
不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。
立即驗證：
重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。
除錯對照表：先看證據，再改一處
| 看到的症狀 | 第一個證據 | 先檢查什麼 |
|---|---|---|
| 頁面階層不對 | Elements 的 DOM | 確認 body 下 header=1、main=1、h1=1，並逐一展開兩個 section。 |
| 點連結沒有到服務頁 | 網址列與 Network | 確認 href 是 services.html，再看目標檔案是否回應 200。 |
| 看到 404 | Network 的完整 URL／狀態碼 | 逐字比對 service.html 與檔案樹實際的 services.html。 |
| 頁面內連結沒有移動 | 網址列的 hash | 確認目標 section 有 id="services"，連結使用 href="#services"。 |
常見誤解
- 看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
- 能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
- 本堂只使用 HTML、瀏覽器與 DevTools；先完成文件結構，不需要其他樣式、腳本或建置工具。
本堂任務與驗收
建立自己的 commercial-site/index.html 與 services.html；首頁有一個 header、一個 main、一個 h1、兩個各含 h2 的 section，並有指向 services.html 的文字連結。
- 能用 分頁 title 留下可重現證據。
- 能用 Elements 的
header/main/section/h1/h2結構 留下可重現證據。 - 能用 網址列的
services.html留下可重現證據。 - 能用 Network 的 404→200 與鍵盤 focus 留下可重現證據。
- Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
- 遇到問題時能先寫出症狀，再檢查一個最小假設。