LESSON-02 · starter
你會依序完成3個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：入口頁可以開啟
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、services.html
本堂焦點：用 HTML 語意建立服務型商家首頁骨架
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：請在 index.html 的「文件骨架」位置完成：建立 header、main 與唯一的 h1
貼上位置：index.html：文件骨架 區塊，先保留同一檔案的其他內容。
<header>
<p>安心服務商家</p>
</header>
<main>
<h1>讓日常維護變得簡單</h1>
</main>預期結果：Elements 的 body 下出現一個 header、一個 main，而且只有一個 h1。
驗收證據：Elements 展開 body，確認 header、main、h1 各只有一個。
常見錯誤：把 h1 放在 head，或為了補內容又複製一個 main。
第一個檢查：先在 Elements 展開 body，只檢查 header、main、h1 的數量。
現在要做：請在 index.html 的「content-sections」位置完成：建立兩個有 h2 的內容 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。
常見錯誤：只增加 h2 沒有 section，或把兩個內容塞進同一個 section。
第一個檢查：先搜尋頁面中的 section 與 h2，確認數量和巢狀關係。
現在要做：請在 index.html 的「primary-action」位置完成：加入通往 services.html 的文字連結
貼上位置：index.html：primary-action 區塊，先保留同一檔案的其他內容。
<a href="services.html">查看服務方案</a>預期結果：點擊主要行動連結後，瀏覽器前往同資料夾的 services.html。
驗收證據：網址列顯示 services.html，Network 對該 HTML 回應 200。
常見錯誤：把連結寫成沒有 href 的文字，或把 services 拼成 service。
第一個檢查：先確認 index.html 與 services.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>
<!-- TODO-1：在 body 建立一個 header、一個 main 與唯一的 h1。 -->
<!-- TODO-2：建立兩個內容 section，並在每個 section 內放一個 h2。 -->
<!-- TODO-3：加入一個 href 指向 services.html 的文字連結。 -->
</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 與鍵盤 focusStarter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。