這個目錄包含所有課程中的 HTML 範例代碼，方便學生直接在瀏覽器中開啟查看效果。
📁 目錄結構
每個課程都有對應的資料夾，裡面包含該課的所有範例：
HTML 部分
- lesson-01: HTML 基礎介紹
example-01-basic-structure.html- HTML 基本結構-
example-02-self-introduction.html- 自我介紹頁面 -
lesson-02: 文字標籤和格式化
example-01-text-formatting.html- 基本文字格式化-
example-02-complete-formatting.html- 完整格式化範例 -
lesson-03: 列表和連結
example-01-lists.html- 各種列表示範-
example-02-navigation.html- 導覽選單範例 -
lesson-04: 圖片和多媒體
example-01-images.html- 圖片相簿、figure/figcaption、圖片連結-
example-02-multimedia.html- 音訊、視訊、YouTube 嵌入 -
lesson-05: 表格
example-01-basic-table.html- 基本表格、thead/tbody/tfoot、colspan-
example-02-grade-table.html- 學生成績表範例 -
lesson-06: 表單基礎
-
example-01-login-form.html- 登入表單 -
lesson-07: 表單進階
-
example-01-validation-form.html- 帶 HTML5 驗證的會員註冊表單 -
lesson-08: HTML5 語義化標籤
-
example-01-blog-page.html- 語義化部落格頁面（header, nav, main, article, aside, footer） -
lesson-09: HTML5 新功能
example-01-canvas.html- Canvas 繪圖示範example-02-svg.html- SVG 圖形、漸層、路徑
CSS 部分
- lesson-10: CSS 基礎介紹
-
example-01-css-methods.html- CSS 引入方式 -
lesson-11: 選擇器和特異性
-
example-01-selectors.html- 基本選擇器（元素、class、ID） -
lesson-12: 盒模型和布局基礎
-
example-01-box-model.html- 盒模型、padding、border、圓角、邊框樣式 -
lesson-13: 文字和顏色樣式
-
example-01-text-styling.html- 字體、對齊、裝飾、行高、縮排 -
lesson-14: Flexbox 布局
-
example-01-flexbox-demo.html- Flexbox 示範 -
lesson-15: Grid 布局
-
example-01-grid-demo.html- CSS Grid 基礎（fr、repeat、auto-fill、對齊） -
lesson-16: 響應式設計
-
example-01-responsive-demo.html- 響應式示範 -
lesson-17: CSS 動畫和過渡
-
example-01-transitions.html- 過渡效果 -
lesson-18: CSS 進階技巧
example-01-theme-switch.html- CSS 變數與主題切換（淺色/深色）
🚀 如何使用
- 瀏覽器開啟：直接雙擊 HTML 檔案，或右鍵選擇「用瀏覽器開啟」
- 開發工具：按 F12 開啟瀏覽器開發者工具，查看元素結構
- 實驗修改：可以複製範例檔案進行修改實驗
- 配合課程：搭配對應課程的 markdown 文件學習
💡 學習建議
- 先閱讀課程內容（lessons 目錄中的 .md 檔案）
- 然後開啟對應的範例檔案查看效果
- 嘗試修改代碼，觀察變化
- 完成課後練習，鞏固學習
📝 注意事項
- 某些範例可能需要圖片或其他資源檔案
- 建議使用現代瀏覽器（Chrome、Firefox、Edge）
- 開啟開發者工具可以查看 Console 輸出和網路請求
Happy Coding! 🎉