單元 1-1
HTML5 深度解析：打造大腦友善的閱讀體驗
在線上學習中，學員的注意力是稀缺資源。如果網頁充滿了密密麻麻的文字，大腦會本能地產生排斥感。本單元將教您如何利用 HTML5 的結構特性與 CSS 樣式，將枯燥的文檔轉化為「可掃描、易吸收」的學習內容。
🏗️
原則一：結構勝於裝飾 (Semantic Structure)
許多初學者習慣用「字體加大」來表示標題，這是錯誤的。請務必使用 <h3> 到 <h6> 標籤。這不僅是為了 SEO，更是為了讓學員建立知識的層次感。
❌ 錯誤做法 (僅改外觀)
<p style=”font-size:20px”>
這是標題
</p>
這是標題
</p>
螢幕閱讀器無法識別這是重點。
✅ 正確做法 (語意標籤)
<h3>
這是標題
</h3>
這是標題
</h3>
結構清晰，有助於大腦建立索引。
原則二：控制閱讀節奏的三大參數
好的排版應該像呼吸一樣自然。我們需要透過 CSS Inline Style 來控制以下三個關鍵參數，讓眼睛在閱讀時不費力：
1. 行高 (Line Height)
設定 line-height: 1.6 至 1.8。過於擁擠的行距會導致「跳行」，讀者容易迷失閱讀位置。
2. 段落間距 (Spacing)
段落之間應保留至少 margin-bottom: 20px。留白不是浪費空間，而是讓大腦有「喘息」的機會。
3. 視覺層級 (Hierarchy)
利用背景色區塊 (如灰色底) 來區隔「重點摘要」或「警告事項」，打破單調的白色背景。
原則三：將資訊「碎片化」
長篇大論是學習的殺手。請盡量使用列表 (List) 來呈現步驟或特徵。以下示範如何使用無序列表搭配 Emoji 來製作清晰的檢查清單：
🚀 內容上架前的檢查清單 (Checklist)：
- ☑️
檢查標題層級：是否依序使用了 H3, H4, H5？ - ☑️
檢查配色：重點文字是否使用了主色調 (Primary Color)？ - ☑️
檢查手機版：在手機寬度下，卡片內容是否會自動換行？
💡 本單元小結
HTML5 不僅僅是程式碼，它是設計師與學習者溝通的橋樑。當您在編寫教材時，請始終思考：「這樣的排版，我的學生讀起來舒服嗎？」
👉 課後練習：請試著將本頁面的排版邏輯，應用到您的下一篇文章中。
練習檔案