HTML5 完整教學課程
歡迎來到 HTML5 完整教學課程!本課程將帶您從零開始,逐步掌握現代網頁開發的三大核心技術:HTML、CSS 和 JavaScript。
阅读文章 →HTML5 課程範例檔案
這個目錄包含所有課程中的 HTML 範例代碼,方便學生直接在瀏覽器中開啟查看效果。
阅读文章 →第 1 課:HTML 基礎介紹
HTML(HyperText Markup Language,超文本標記語言)是用來建立網頁的標準標記語言。它不是程式語言,而是一種標記語言,用來描述網頁的結構和內容。
阅读文章 →第 2 課:文字標籤和格式化
顯示效果: 這段文字很重要(語義化) 這段文字是粗體(純樣式)
阅读文章 →第 3 課:列表和連結
HTML 提供三種列表類型:無序列表、有序列表和定義列表。
阅读文章 →第 4 課:圖片和多媒體
必要屬性: src:圖片的來源路徑 alt:替代文字(圖片無法顯示時的說明)
阅读文章 →第 5 課:表格
HTML 表格用於顯示結構化的數據,由行和列組成。
阅读文章 →第 6 課:表單基礎
表單(Form)是網頁中用來收集使用者輸入資料的重要元素。常見的應用包括:: 登入/註冊頁面 搜尋功能 聯絡表單 問卷調查 訂單表單
阅读文章 →第 7 課:表單進階
HTML5 提供內建的表單驗證功能,無需 JavaScript 即可進行基本驗證。
阅读文章 →第 8 課:HTML5 語義化標籤
語義化標籤(Semantic Tags)是具有明確意義的 HTML 標籤,能夠清楚描述內容的性質和用途。
阅读文章 →第 9 課:HTML5 新功能
<canvas> 元素提供一個畫布,可以使用 JavaScript 在上面繪製圖形。
阅读文章 →第 10 課:CSS 基礎介紹
CSS(Cascading Style Sheets,層疊樣式表)是用來控制網頁外觀和版面配置的樣式語言。
阅读文章 →第 11 課:選擇器和特異性
使用 . 選擇具有特定 class 的元素:
阅读文章 →第 12 課:盒模型和布局基礎
每個 HTML 元素都可以看作一個「盒子」,由以下部分組成:
阅读文章 →第 13 課:文字和顏色樣式
字體分類: serif:襯線字體(如 Times New Roman) sans-serif:無襯線字體(如 Arial) monospace:等寬字體(如 Courier) cursive:草書字體 fantasy:裝飾字體
阅读文章 →第 14 課:Flexbox 布局
Flexbox(彈性盒子)是一種一維布局模型,專門用於在容器中排列和分配空間。
阅读文章 →第 16 課:響應式設計
響應式設計(Responsive Web Design)讓網頁能夠自動適應不同裝置的螢幕尺寸,提供最佳的瀏覽體驗。
阅读文章 →第 18 課:CSS 進階技巧
CSS 變數讓我們可以重複使用值,方便維護和主題切換。
阅读文章 →第 19 課:JavaScript 基礎介紹
JavaScript 是一種程式語言,讓網頁能夠「動起來」,實現互動功能。
阅读文章 →第 20 課:變數和資料型別
變數(Variable)就像一個盒子,用來儲存資料。
阅读文章 →第 21 課:運算子和控制流程
請參考範例:examples/lesson-21/example-01-operators.html
阅读文章 →第 22 課:函式
函式(Function)是可重複使用的程式碼區塊。
阅读文章 →第 23 課:陣列和物件
範例:examples/lesson-23/example-01-arrays-objects.html
阅读文章 →第 24 課:DOM 操作
DOM(Document Object Model)是網頁的程式化表示,讓 JavaScript 可以存取和操作 HTML 元素。
阅读文章 →