LESSON-02 · solution

完整的 HTML 首頁骨架

這是 Starter 與 Checkpoint 的完整結果。先操作入口，再逐項核對每個 HTML 結構與連結責任。本頁以 HTML-only 與 href 作為觀察焦點。

Starter三個小成果

Checkpoint一個路徑缺口

Solution四個驗收結果

開始前確認

開啟 Solution 可執行入口，點擊服務連結，再用 Elements 與 Network 核對結果。

完整路徑：空白骨架 → 語意區塊 → services.html 連結 → 404 修正 → 200。

目的：先建立瀏覽器與讀者都能理解的頁面骨架。
修改檔案：index.html
程式碼位置：文件骨架

現在要做：先對照 index.html 的「文件骨架」，確認這項變更已完成。
貼上位置：index.html 的文件骨架區塊

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

預期結果：Elements 的 body 下出現一個 header、一個 main，而且只有一個 h1。
驗收證據：Elements 展開 body，確認 header、main、h1 各只有一個。

卡住時先看這裡

常見錯誤：一次修改太多地方，無法知道是哪個改動造成結果。
第一個檢查：只檢查目前步驟指定的檔案與區塊。

目的：讓訪客只讀標題也能理解品牌介紹與服務內容的分區。
修改檔案：index.html
程式碼位置：content-sections

現在要做：先對照 index.html 的「content-sections」，確認這項變更已完成。
貼上位置：index.html 的 content-sections 區塊

<section id="about">
  <h2>關於安心服務</h2>
  <p>把商家能解決的問題說清楚。</p>
</section>
<section id="services">
  <h2>服務內容</h2>
  <p>讓訪客知道可以從哪一項服務開始。</p>
</section>

預期結果：Elements 顯示兩個 section，每個 section 都有一個 h2。
驗收證據：檢查 section 數量為 2，並確認每個 section 內都有 h2。

卡住時先看這裡

常見錯誤：一次修改太多地方，無法知道是哪個改動造成結果。
第一個檢查：只檢查目前步驟指定的檔案與區塊。

目的：把頁面內容接到訪客下一步，並練習同層相對路徑。
修改檔案：index.html
程式碼位置：primary-action

現在要做：先對照 index.html 的「primary-action」，確認這項變更已完成。
貼上位置：index.html 的 primary-action 區塊

<a href="services.html">查看服務方案</a>

預期結果：點擊主要行動連結後，瀏覽器前往同資料夾的 services.html。
驗收證據：網址列顯示 services.html，Network 對該 HTML 回應 200。

卡住時先看這裡

常見錯誤：一次修改太多地方，無法知道是哪個改動造成結果。
第一個檢查：只檢查目前步驟指定的檔案與區塊。

目的：用 Network 證據定位 404，再依檔案樹修正檔名。
修改檔案：index.html
程式碼位置：primary-action href

現在要做：先對照 index.html 的「primary-action href」，確認這項變更已完成。
貼上位置：index.html 的 primary-action href 區塊

<a href="services.html">查看服務方案</a>

預期結果：修正後點擊連結會前往 services.html，Network 對該 HTML 回應 200。
驗收證據：先看見 service.html 的 404，再看到 services.html 的 200。

卡住時先看這裡

常見錯誤：一次修改太多地方，無法知道是哪個改動造成結果。
第一個檢查：只檢查目前步驟指定的檔案與區塊。

對照完成後，回到 README 整理證據，並準備下一堂 HTML 語意骨架。

開啟 examples/supplement/index.html；自學檔案不混入 Solution files。