LESSON-02 · checkpoint
主要結構已經完成，只留下本堂一個核心缺口。先預測，再從指定檔案找出它。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：入口頁可以開啟
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、services.html
本堂焦點：用 HTML 語意建立服務型商家首頁骨架
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：請在 index.html 的「primary-action href」位置完成：修正故意寫錯的相對路徑 service.html
貼上位置：index.html：primary-action href 區塊，先保留同一檔案的其他內容。
<a href="services.html">查看服務方案</a>預期結果：修正後點擊連結會前往 services.html，Network 對該 HTML 回應 200。
驗收證據：先看見 service.html 的 404，再看到 services.html 的 200。
常見錯誤：只把錯誤頁重新整理，卻沒有對照 href 與實際檔名。
第一個檢查：先查看 Network 的完整 URL，再回到 index.html 比對 href 與檔案樹。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
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="service.html">查看服務方案</a></p>
</main>
<!-- CHECKPOINT-1：目前 href 故意寫成 service.html，請用 Network 找到 404 後修正。 -->
</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>header/main/section/h1/h2 結構、網址列的 services.html、Network 的 404→200 與鍵盤 focusCheckpoint 完成後，先說出你修正的原因，再前往 Solution 對照每個檔案差異。