S SmartDocs

웹 개발

HTML5, React, Angular, Next.js, Vite 등 현대 프런트엔드 개발 가이드와 프로젝트.

HTML5 中文 업데이트 2026-02-12

第 11 課:選擇器和特異性

掌握各種 CSS 選擇器 理解選擇器的特異性(優先權) 學會組合選擇器 了解偽類和偽元素

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 12 課:盒模型和布局基礎

理解 CSS 盒模型的概念 掌握 margin、padding、border 的使用 學會控制元素的尺寸 了解 display 屬性的不同值

글 읽기 →
HTML5 中文 업데이트 2026-04-05

第 13 課:文字和顏色樣式

掌握文字相關的 CSS 屬性 學會使用各種字體 了解顏色和漸層的應用 學會文字和盒子陰影效果

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 14 課:Flexbox 布局

理解 Flexbox 的概念和優勢 掌握 Flex 容器和項目的屬性 學會使用 Flexbox 建立各種布局 解決常見的布局問題

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 16 課:響應式設計

理解響應式設計的概念和重要性 掌握 Media Queries 的使用 學會響應式布局技巧 了解 Mobile First 設計原則

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 18 課:CSS 進階技巧

掌握 CSS 變數的使用 學會 CSS 函數 了解進階選擇器 掌握實用的 CSS 技巧

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 19 課:JavaScript 基礎介紹

理解什麼是 JavaScript 及其用途 學會在網頁中使用 JavaScript 掌握基本的輸出方法 了解 JavaScript 的基本語法

글 읽기 →
HTML5 中文 업데이트 2026-04-19

第 20 課:變數和資料型別

理解變數的概念 學會宣告和使用變數 掌握 JavaScript 的基本資料型別 了解 let、const、var 的區別

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 21 課:運算子和控制流程

掌握各種運算子的使用 學會 if/else 條件判斷 了解 switch 語句 掌握迴圈(for、while)

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 22 課:函式

// 帶回傳值的函式 function adda, b { return a + b; }

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 23 課:陣列和物件

// 新增元素 fruits.push'葡萄'; // 加到最後 fruits.unshift'草莓'; // 加到最前

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 24 課:DOM 操作

DOM(Document Object Model)是網頁的程式化表示,讓 JavaScript 可以存取和操作 HTML 元素。

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 25 課:事件處理

// 輸入事件 input.addEventListener'input', functionevent { console.log'輸入值:', event.target.value; };

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 26 課:表單驗證

範例:examples/lesson26/example01validation.html

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 28 課:ES6+ 新特性

// 物件解構 let {name, age} = {name: '小明', age: 25};

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 29 課:本地儲存和 API

學會使用 localStorage 了解 sessionStorage 掌握資料的儲存和讀取

글 읽기 →
HTML5 中文 업데이트 2026-02-12

第 30 課:整合實戰專題

整合以下技術: HTML5 語義化標籤 CSS Flexbox/Grid 布局 JavaScript DOM 操作 事件處理 localStorage 儲存 表單驗證

글 읽기 →
React.js 中文 업데이트 2026-04-01

React.js 完整教材

本教材涵蓋 React.js 從入門到進階的所有核心概念,包含大量範例程式碼與詳細說明。

글 읽기 →
React.js 中文 업데이트 2026-04-01

Lesson 01:React 簡介與環境建置

React 是由 Facebook(現 Meta)開發的 JavaScript UI 函式庫,用於建構使用者介面。

글 읽기 →
React.js 中文 업데이트 2026-04-03

Lesson 02:JSX 語法

JSX(JavaScript XML)是 React 使用的語法擴展,讓你可以在 JavaScript 中撰寫類似 HTML 的程式碼。

글 읽기 →
React.js 中文 업데이트 2026-04-01

Lesson 03:元件 Components

// 方法 2:箭頭函式(更常用) const Welcome = = { return <h1歡迎來到 React!</h1; };

글 읽기 →
React.js 中文 업데이트 2026-04-01

Lesson 04:Props 屬性傳遞

Props(Properties)是父元件傳遞資料給子元件的機制,類似 HTML 標籤的屬性。

글 읽기 →
React.js 中文 업데이트 2026-04-02

Lesson 05:State 與 useState

State 是元件內部的「記憶」,用來儲存會隨時間改變的資料。當 state 改變時,React 會自動重新渲染元件。

글 읽기 →
React.js 中文 업데이트 2026-04-02

Lesson 06:事件處理 Event Handling

React 使用合成事件 Synthetic Events,提供跨瀏覽器一致的事件 API。

글 읽기 →