LESSON-02 · solution
這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、services.html
本堂焦點：用 HTML 語意建立服務型商家首頁骨架
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：先對照差異，再檢查 在 index.html 的「文件骨架」對照這項變更：<header>
<p>安心服務商家</p>
</header>
<main>
<h1>讓日常維護變得簡單</h1>
</main>
貼上位置：index.html 的 文件骨架 區塊
<header>
<p>安心服務商家</p>
</header>
<main>
<h1>讓日常維護變得簡單</h1>
</main>預期結果：Elements 的 body 下出現一個 header、一個 main，而且只有一個 h1。
驗收證據：Elements 展開 body，確認 header、main、h1 各只有一個。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 index.html 的「content-sections」對照這項變更：<section id="about">
<h2>關於安心服務</h2>
<p>把商家能解決的問題說清楚。</p>
</section>
<section id="services">
<h2>服務內容</h2>
<p>讓訪客知道可以從哪一項服務開始。</p>
</section>
貼上位置：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。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 index.html 的「primary-action」對照這項變更：<a href="services.html">查看服務方案</a>
貼上位置：index.html 的 primary-action 區塊
<a href="services.html">查看服務方案</a>預期結果：點擊主要行動連結後，瀏覽器前往同資料夾的 services.html。
驗收證據：網址列顯示 services.html，Network 對該 HTML 回應 200。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 index.html 的「primary-action href」對照這項變更：<a href="services.html">查看服務方案</a>
貼上位置：index.html 的 primary-action href 區塊
<a href="services.html">查看服務方案</a>預期結果：修正後點擊連結會前往 services.html，Network 對該 HTML 回應 200。
驗收證據：先看見 service.html 的 404，再看到 services.html 的 200。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.html首頁入口：只使用 HTML 建立 header、main、標題、內容分區與服務頁連結。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>安心服務｜首頁</title>
</head>
<body>
<header>
<p>安心服務商家</p>
</header>
<main>
<h1>讓日常維護變得簡單</h1>
<p>我們把日常維護說清楚，讓訪客知道下一步。</p>
<section id="about">
<h2>關於安心服務</h2>
<p>把商家能解決的問題說清楚。</p>
</section>
<section id="services">
<h2>服務內容</h2>
<p>讓訪客知道可以從哪一項服務開始。</p>
</section>
<p><a href="services.html">查看服務方案</a></p>
</main>
</body>
</html>services.html服務頁入口：提供首頁 CTA 的真實相對路徑目標。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>服務方案｜安心服務</title>
</head>
<body>
<header>
<p>安心服務商家</p>
</header>
<main>
<h1>服務方案</h1>
<section>
<h2>到府維護</h2>
<p>依照需求安排清楚、可靠的到府服務。</p>
</section>
<p><a href="index.html">回到首頁</a></p>
</main>
</body>
</html>Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。