前端技術是現代 Web 開發的基石,涵蓋了從基礎的 HTML、CSS、JavaScript 到瀏覽器原理與工程化實踐的完整知識體系。
模組概覽#
本模組整理了前端開發的核心知識,分為五個主題:
1. HTML 語義化#
HTML 不僅僅是 div 和 span,正確使用語義化標籤可以:
- 提升程式碼可讀性
- 改善 SEO 效果
- 增強可訪問性(Accessibility)
- 支援閱讀模式等現代瀏覽器功能
2. CSS 精通#
CSS 是「入門容易,精通困難」的技術:
- 選擇器與優先級規則
- 盒模型與佈局系統(Flexbox、Grid)
- 動畫與過渡效果
- 現代 CSS 函式與變數
3. JavaScript 核心#
深入理解 JavaScript 的執行時機制:
- 類型系統與類型轉換
- 執行上下文與作用域
- 閉包的本質
- Promise 與非同步程式設計
- ES6+ 現代特性
4. 瀏覽器原理#
了解瀏覽器如何將 URL 轉換為可視化頁面:
- HTTP/HTTPS 協定
- DOM 與 CSSOM 構建
- 渲染流程(重排與重繪)
- 事件機制(捕獲與冒泡)
5. 前端工程化#
建立高效的前端開發體系:
- 工具鏈設計
- 模組化方案
- 效能最佳化策略
- 前端架構模式
學習建議#
前端知識體系龐大,建議依照以下順序學習:
- 先打好 HTML/CSS/JavaScript 基礎
- 理解瀏覽器工作原理
- 學習工程化實踐
- 深入框架與進階主題
核心原則#
「用對」比「不用」好,「不用」比「用錯」好
這個原則適用於語義化標籤、CSS 技巧、以及各種前端技術的選擇。與其盲目追求使用某種技術,不如先理解其設計目的與適用場景。