LESSON-02 · 自主延伸
把「HTML 文件語意與可理解內容」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。
成果：完成一份語言、行動裝置、內容結構、圖片與連結都可被理解的首頁骨架。
需要的檔案：files/starter/index.html（整合起點，保留跨 module 的最小缺口。）
完成後：完成一份語言、行動裝置、內容結構、圖片與連結都可被理解的首頁骨架。
逐項展開；答不出來時先走補救連結，不必硬做。
自我檢查：我能否開啟 Elements、Console 或 Network 並找到本頁？
每一個目標只對應一個 module；成功狀態必須能指出證據。
依序展開；每次只改一項，操作後確認該模組自己的 DOM、progress 與 evidence。
白話：告訴瀏覽器「這頁用什麼語言、怎麼解讀文字、手機要用多寬畫面」。
正式說法：lang 是全域語言屬性；meta charset 宣告文件字元編碼；viewport meta 指示行動 layout viewport。
何時使用：每一份可獨立開啟的 HTML 文件。
修改前後：Before：語音可能用錯語言、中文亂碼、手機頁面被縮小。After：三項 DOM metadata 均可查證。
常見混淆：viewport 不是 CSS breakpoint；charset 也不是字型 font-family。
情境：新首頁在手機上被縮得很小，語音工具也用錯語言。
起始狀態：fixture 的 lang、charset 與 viewport 值都是待修正狀態。
目前主題：lang、charset 與 viewport
預期：documentElement.lang=zh-Hant、charset=utf-8，viewport 含 width=device-width 與 initial-scale=1。
證據：html.lang、meta.charset、meta[name=viewport].content
第一個檢查：先在 Elements 展開 html 與 head，不要先調 CSS。
重設：重設後回到 lang 空白、編碼未確認、viewport 未設定。
本模組官方來源：MDN｜lang global attribute
白話：一段完整的話用 p；數個同類項目用清單，每項用 li。
正式說法：p 表示文字段落；ul 表示無特定順序的項目群，li 是清單項目。
何時使用：服務特色、步驟、注意事項或任何有群組關係的內容。
修改前後：Before：三項服務擠在一個 p 中。After：說明與三個 li 可分別被計數。
常見混淆：不要為了視覺縮排就用 br 假裝清單；ol 只用在順序會改變意義時。
情境：首頁用一長行逗號文字列出三種服務，很難掃讀。
起始狀態：fixture 只有一段包含三項文字的 p。
目前主題：段落、清單與可掃讀內容
我們提供三項服務。
預期：DOM 有 1 個說明段落、1 個清單與 3 個同層 li。
證據：paragraphCount=1、listCount=1、itemCount=3
第一個檢查：先數內容有幾項，再選 ul 或 ol。
重設：重設回單一長段落。
本模組官方來源：MDN｜The Unordered List element
白話：src 要從這份 HTML 的位置找到圖；alt 是圖看不到時要交付的文字資訊。
正式說法：img src 是可解析 URL；alt 是圖像替代文字，其內容取決於圖像在文件中的功能與資訊。
何時使用：每張 img；相對路徑搬動檔案夾層級後尤其要重驗。
修改前後：Before：src 指向不存在檔案，alt 只寫 hero.jpg。After：圖載入且 alt 交付等價意思。
常見混淆：alt 不是圖片 caption，也不是關鍵字清單；純裝飾圖通常用 alt=""。
情境：首頁 hero 破圖，語音只讀出 hero-final.svg。
起始狀態：img src 指向 missing.svg，alt 是檔名。
目前主題：img、alt 與圖片相對路徑
預期：image.complete=true、naturalWidth>0、currentSrc 為本地 fixture，alt 非檔名且說明圖片用途。
證據：loaded=true、currentSrc 可解析、naturalWidth>0、alt 符合用途
第一個檢查：先看 Network/currentSrc 找路徑，圖成功載入後再審 alt。
重設：重設回 missing src 與檔名 alt。
本模組官方來源：MDN｜The Image Embed element
白話：連結自己就要說清楚按下去會去哪裡或做什麼。
正式說法：accessible name 應使連結目的可在上下文中或由連結本身確定；本練習以連結自身文字完成。
何時使用：導覽、CTA、文章內文與下載連結。
修改前後：Before：連結清單只有多個「點這裡」。After：每個文字能分辨目的地。
常見混淆：title attribute 不是用來補救模糊連結的主要方法；URL 完整也不代表連結文字可理解。
情境：首頁有三個「點這裡」，使用者從連結清單無法分辨。
起始狀態：a.textContent 為「點這裡」。
目前主題：可單獨理解的連結文字
預期：連結文字為「查看三項網站規劃服務」，不含點這裡/更多。
證據：linkText 包含網站規劃服務且 ambiguous=false
第一個檢查：先只讀連結文字，不看前後段落。
重設：重設將連結恢復模糊文字。
本模組官方來源：MDN｜The Anchor element
情境：在同一份章節作品中整合 4 個 module，排除單項通過但組合失敗的問題。
交付：完成一份語言、行動裝置、內容結構、圖片與連結都可被理解的首頁骨架。
檔案：files/starter/index.html 定位：#observe
操作：逐項讀取 outcomes，執行一次現況操作。
// OBSERVE：不修改程式，先記錄第一個失敗 moduleId。預期：能指出第一個未通過 module。
證據：第一個 moduleId 與缺少的 evidence。
原因：先觀察可避免未重現就直接改答案。
卡住先查：確認開啟的是 files/starter/index.html。
檔案：files/starter/index.html 定位：#modify
操作：套用 zh-Hant、UTF-8 與 width=device-width viewport，再讀取三個 DOM 值。 → 將三個文字項目建成 ul/li，再計算 p、ul、li 數量。 → 將 img 切到可載入的本地 data image，設定用途導向 alt，讀取 complete/currentSrc/naturalWidth。 → 將「點這裡」改為描述目的地的文字，再程式檢查 textContent。
// 02-01-lang-charset-viewport: 套用 zh-Hant、UTF-8 與 width=device-width viewport，再讀取三個 DOM 值。
// 02-02-topic: 將三個文字項目建成 ul/li，再計算 p、ul、li 數量。
// 02-03-img-alt: 將 img 切到可載入的本地 data image，設定用途導向 alt，讀取 complete/currentSrc/naturalWidth。
// 02-04-topic: 將「點這裡」改為描述目的地的文字，再程式檢查 textContent。預期：完成一份語言、行動裝置、內容結構、圖片與連結都可被理解的首頁骨架。
證據：html.lang、meta.charset、meta[name=viewport].content；paragraphCount=1、listCount=1、itemCount=3；loaded=true、currentSrc 可解析、naturalWidth>0、alt 符合用途；linkText 包含網站規劃服務且 ambiguous=false
原因：逐項整合能把回歸定位到明確 module。
卡住先查：回到第一個未通過的 module，只修該處。
檔案：files/solution/index.html 定位：#verify
操作：重新整理並依 outcomes 順序重跑所有證據。
// VERIFY：逐項記錄 pass/fail，不以看到畫面代替 evidence。預期：4/4 module 通過。
證據：每個 moduleId 都有實際結果與重設後重現紀錄。
原因：單項通過不代表整合後沒有 selector、id 或狀態衝突。
卡住先查：若失敗，回到第一個失敗 module，不同時修多項。
檔案：files/starter/index.html 定位：#challenge
操作：替另一個商家情境重做，仍達成：完成一份語言、行動裝置、內容結構、圖片與連結都可被理解的首頁骨架。
// CHALLENGE：只替換內容與資料，不新增框架或跳過 self-check。預期：完成一份語言、行動裝置、內容結構、圖片與連結都可被理解的首頁骨架。
證據：轉用後的作品與全數 module self-check。
原因：能轉用才代表理解責任，而非只記住原範例。
卡住先查：先確認共同基底與 module id 未被改壞。
重設方法：重新載入 files/starter/index.html；若 localStorage 不可用，使用頁面內記憶狀態並提供重設按鈕。
挑戰：將同一組責任轉用到另一個商家情境，仍達成：完成一份語言、行動裝置、內容結構、圖片與連結都可被理解的首頁骨架。
限制：不新增框架。；保留 module id 與驗收證據。
提交證據：提交可直接開啟的作品與逐項 self-check。
拆小：在「HTML 文件語意與可理解內容」先完成第一個尚未通過的 module：lang、charset 與 viewport，不同時修改其他責任。
串接：依 02-01-lang-charset-viewport → 02-02-topic → 02-03-img-alt → 02-04-topic 核對各自輸入與證據。
完整解答與原因：依序執行 套用 zh-Hant、UTF-8 與 width=device-width viewport，再讀取三個 DOM 值。 → 將三個文字項目建成 ul/li，再計算 p、ul、li 數量。 → 將 img 切到可載入的本地 data image，設定用途導向 alt，讀取 complete/currentSrc/naturalWidth。 → 將「點這裡」改為描述目的地的文字，再程式檢查 textContent。；這個順序能把每個結果對回單一 module，避免整合後無法定位。
完整解答預設收合；先留下自己的嘗試，再開第三層。