前端技術是現代 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. 前端工程化#

建立高效的前端開發體系:

  • 工具鏈設計
  • 模組化方案
  • 效能最佳化策略
  • 前端架構模式

學習建議#

前端知識體系龐大,建議依照以下順序學習:

  1. 先打好 HTML/CSS/JavaScript 基礎
  2. 理解瀏覽器工作原理
  3. 學習工程化實踐
  4. 深入框架與進階主題

核心原則#

「用對」比「不用」好,「不用」比「用錯」好

這個原則適用於語義化標籤、CSS 技巧、以及各種前端技術的選擇。與其盲目追求使用某種技術,不如先理解其設計目的與適用場景。