LESSON-02 · HTML 基礎

用 HTML 語意建立服務型商家首頁骨架

建立 index.html 與 services.html；看懂 HTML 結構、同層連結與 404→200 的修正證據。

本堂只學一件事

用語意 HTML 把商家首頁拆成能閱讀、能前往下一頁的文件骨架。

學習邊界：只使用 HTML、瀏覽器與 DevTools；本堂不加入 CSS、JavaScript 或框架。

第一次上課環境

編輯器：建立純文字檔，確認副檔名是 .html。
資料夾：把 index.html 與 services.html 放在同一個 commercial-site/。
瀏覽器：每次儲存後重新整理 HTML 入口。
DevTools：Elements 看階層；Network 看 404 或 200；Tab 看 focus。

先做最小實驗

開啟 examples/minimal/index.html，點擊頁面內連結，再看網址中的 #services。

第一個檢查位置：Elements 的 body。

成功證據：看到 header、main、section、h1、h2，且連結能移到 #services。

學生練習流程：三階段路徑

Starter｜建立基底

完成 header、main、唯一 h1、兩個含 h2 的 section，再加入 services.html 連結。

開始 Starter

Checkpoint｜找一個缺口

保留完整骨架，只修正故意造成 service.html 404 的 href。

開始 Checkpoint

Solution｜核對完整結果

逐項核對四個結果：骨架、內容分區、服務連結與 404→200。

查看 Solution

檔案地圖：每個位置負責什麼？

index.html · services.html

index.html：首頁結構與前往服務頁的主要行動。
services.html：提供首頁連結的真實目的地。

先學會這些詞

doctype DOCTYPE declaration

白話：告訴瀏覽器使用現代 HTML 規則。

最小例子：檔案第一行的 <!doctype html>。

head／body HTML head and body

白話：head 放分頁設定；body 放畫面內容。

最小例子：title 放 head，h1 放 body。

header／main／section semantic landmarks

白話：用元素名稱說明頁首、主要內容與內容分區。

最小例子：main 裡放兩個 section。

title／h1／h2 heading levels

白話：title 是分頁名稱；h1 是主題；h2 是分區標題。

最小例子：每個 section 放一個 h2。

a／href link and destination

白話：a 是連結；href 指定要前往的路徑。

最小例子：<a href="services.html">。

相對路徑 relative path

白話：從目前 HTML 所在資料夾尋找另一個檔案。

最小例子：index.html 與 services.html 同層時使用 services.html。

Elements Elements panel

白話：在 DevTools 查看瀏覽器實際建立的 HTML 階層。

最小例子：展開 body，數 header、main、section、h1、h2。

Network Network panel

白話：查看瀏覽器請求檔案後得到的狀態。

最小例子：故意錯誤是 service.html／404；修正後是 services.html／200。

最小例子：先看懂，再複製

<header>
  <p>安心服務商家</p>
</header>
<main>
  <h1>讓日常維護變得簡單</h1>
</main>

學生自問

我能指出 header、main、section、h1、h2 各自負責什麼嗎？
我能說明 service.html 為什麼是 404 嗎？
我修正的是哪個檔案、哪個 href、哪一個可觀察結果？
我用 Elements、Network、網址列與 Tab 留下證據了嗎？

完成驗收

三個階段入口都能開啟。
Starter 的三個 TODO、Checkpoint 的一個路徑缺口、Solution 的四個結果都能對照。
Checkpoint 可重現 service.html／404；Solution 可確認 services.html／200。
沒有新增 CSS、JavaScript 或框架；留下檔案、操作、預期與實際觀察。

情境變體：把首頁改成在地清潔服務，保留 index.html 與 services.html、header/main/section/h1/h2 的責任；至少替換 title、h1、兩段內容與 CTA 文字，不新增 CSS、JavaScript 或框架。
獨立挑戰：不看 Solution，替另一個服務型商家完成「用 HTML 語意建立服務型商家首頁骨架」，並留下分頁 title、Elements 的 header/main/section/h1/h2 結構、網址列的 services.html、Network 的 404→200 與鍵盤 focus 的驗收證據。

官方延伸閱讀

互動問答

先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。

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；先查看第一個可觀察錯誤。

立即驗證：

重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。

正式延伸｜自主學習

把「HTML 文件語意與可理解內容」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。

開啟自主學習入口｜4 個獨立 topic

你會怎麼做

先選一個 topic，讀懂成果、檔案與定位。
在自己的 Starter 檔案修改一小段。
重新載入，用畫面、Elements、Computed、Console 或文件留下證據。

建議第一個 topic：lang、charset 與 viewport。

Learning map

lang、charset 與 viewport｜code-edit｜files/starter/index.html｜html.lang、meta.charset、meta[name=viewport].content
段落、清單與可掃讀內容｜code-edit｜files/starter/index.html｜paragraphCount=1、listCount=1、itemCount=3
img、alt 與圖片相對路徑｜code-edit｜files/starter/index.html｜loaded=true、currentSrc 可解析、naturalWidth>0、alt 符合用途
可單獨理解的連結文字｜code-edit｜files/starter/index.html｜linkText 包含網站規劃服務且 ambiguous=false