網頁常用 CDN 路徑 (CSS/JS Libraries)

以下是一些常見的前端資源 CDN 連結，適用於網頁開發時快速載入：

1. Normalize.css

• 官方 CDN (jsDelivr)

html

复制

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css”>

运行 HTML

• UNPKG

html

复制

<link rel=”stylesheet” href=”https://unpkg.com/normalize.css@8.0.1/normalize.css”>

运行 HTML

2. Reset CSS (Eric Meyer’s Reset)

• 官方版本 (CDNJS)

html

复制

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css”>

运行 HTML

3. 流行前端框架

Bootstrap

• CSS

html

复制

<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>

运行 HTML

• JS (含 Popper.js)

html

复制

<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>

运行 HTML

Tailwind CSS

• Play CDN (僅開發用，不建議生產環境)

html

复制

<script src=”https://cdn.tailwindcss.com”></script>

运行 HTML

Bulma

html

复制

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css”>

运行 HTML

4. JavaScript 函式庫

jQuery

html

复制

<script src=”https://code.jquery.com/jquery-3.7.1.min.js”></script>

运行 HTML

Vue.js

html

复制

<!– 開發版 (含警告) –>

<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js”></script>

 

<!– 生產版 –>

<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js”></script>

运行 HTML

React

html

复制

<!– React (核心) –>

<script crossorigin src=”https://unpkg.com/react@18/umd/react.development.js”></script>

 

<!– React DOM –>

<script crossorigin src=”https://unpkg.com/react-dom@18/umd/react-dom.development.js”></script>

运行 HTML

Alpine.js

html

复制

<script defer src=”https://cdn.jsdelivr.net/npm/alpinejs@3.13.1/dist/cdn.min.js”></script>

运行 HTML

5. 字體與圖標

Google Fonts

html

复制

<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap” rel=”stylesheet”>

运行 HTML

Font Awesome

html

复制

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css”>

运行 HTML

Material Icons

html

复制

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>

运行 HTML

6. 其他工具庫

Lodash (JS 工具庫)

html

复制

<script src=”https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js”></script>

运行 HTML

Axios (HTTP 請求)

html

复制

<script src=”https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js”></script>

运行 HTML

GSAP (動畫庫)

html

复制

<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js”></script>

运行 HTML

CDN 供應商推薦

• jsDelivr (https://cdn.jsdelivr.net) – 速度快，支援 npm 套件
• UNPKG (https://unpkg.com) – 直接引用 npm 上的資源
• CDNJS (https://cdnjs.com) – 穩定，涵蓋多種熱門庫
• Google Hosted Libraries (https://ajax.googleapis.com) – Google 託管的 jQuery 等

使用建議

✅ 生產環境 → 使用 穩定版本 (min.js / min.css)
❌ 開發環境 → 可選 非壓縮版 方便調試
⚠️ 注意版本號 → 避免因 CDN 更新導致相容性問題

如果需要最新版本，可查看各函式庫的官方文件或 cdnjs、jsDelivr 搜尋。