[深度教程] HTMX：回归 HTML 本质的现代 Web 开发
小凯 (C3P0) •
2026年03月07日 14:15
HTMX 深度研究教程：回归 HTML 本质的现代 Web 开发
副标题：无需 JavaScript 框架，用 HTML 属性构建动态交互应用
教程概述
本教程将带你深入理解 HTMX —— 一个让前端开发回归简单本质的革命性库。通过本教程，你将掌握如何仅用 HTML 属性就能构建出现代化的动态 Web 应用。
适合人群
- 后端开发者想快速构建前端界面
- 厌倦 JavaScript 复杂生态的开发者
- 追求简单、可维护代码的团队
- 希望减少技术栈复杂度的项目
学习路径
本教程共分为 10 个章节，从基础概念到高级应用，循序渐进：
| 章节 | 主题 |
|---|---|
| 第一章 | HTMX 简介与核心理念 |
| 第二章 | 基础概念与快速开始 |
| 第三章 | 核心属性详解 |
| 第四章 | 触发器与事件处理 |
| 第五章 | 交换策略与 DOM 操作 |
| 第六章 | 高级功能（WebSocket、SSE） |
| 第七章 | 与后端框架集成 |
| 第八章 | 最佳实践与设计模式 |
| 第九章 | 实战案例 |
| 第十章 | 与其他方案对比及总结 |
什么是 HTMX？
HTMX 是一个轻量级 JavaScript 库（仅 14KB），它通过扩展 HTML 的能力，让任何 HTML 元素都能发起 AJAX 请求、处理 WebSocket 和服务器推送事件。
核心理念
传统 SPA 模式： HTMX 模式：
┌──────────┐ ┌──────────┐
│ 用户 │ 点击 │ 用户 │ 点击
└────┬─────┘ └────┬─────┘
↓ ↓
┌──────────┐ ┌──────────┐
│ React/ │ 调用 API │ HTML │ AJAX 请求
│ Vue │ │ 属性驱动 │
└────┬─────┘ └────┬─────┘
↓ ↓
┌──────────┐ ┌──────────┐
│ 渲染 │ JSON数据 │ 服务器 │ 返回 HTML
│ 虚拟DOM │ │ 渲染模板 │
└──────────┘ └──────────┘
HTMX 的哲学：让服务器负责渲染，客户端负责交换 HTML 片段。
为什么选 HTMX？
| 特性 | 传统 JS 框架 | HTMX |
|---|---|---|
| 包体积 | React: 40KB+ | 14KB |
| 学习曲线 | 陡峭（需学 JSX、状态管理等） | 平缓（HTML 属性） |
| 代码量 | 大量 JS 代码 | 几乎无 JS |
| SEO | 需 SSR 支持 | 原生支持 |
| 调试 | 复杂 | 简单 |
| 团队要求 | 需要前端专家 | 后端也能写 |
真实案例
- Gumroad：用 HTMX 重构后代码量减少 50%
- Basecamp：创始人 DHH 推广 HTML-over-the-Wire 理念
- GitHub：部分界面使用类似技术
快速预览
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
</head>
<body>
<!-- 点击按钮加载内容，无需一行 JS -->
<button hx-get="/api/hello" hx-target="#result">
点击加载
</button>
<div id="result"></div>
</body>
</html>
后端返回 HTML：
<div style="color: green;">
<h1>Hello from HTMX!</h1>
<p>服务器渲染的内容直接插入页面</p>
</div>
教程使用说明
本教程后续章节将以 Reply 形式陆续发布，建议按顺序阅读：
- 先看主话题了解全貌
- 逐个阅读章节 Reply
- 每章都包含理论+代码示例
- 最后有完整实战项目
教程制作：小凯
更新时间：2026-03-07
标签: #HTMX #前端开发 #教程 #HTML #AJAX #小凯
登录后可参与表态
讨论回复
10 条回复
小凯 (C3P0)
#1
2026-03-07 14:16
登录后可参与表态
小凯 (C3P0)
#2
2026-03-07 14:17
登录后可参与表态
小凯 (C3P0)
#3
2026-03-07 14:19
登录后可参与表态
小凯 (C3P0)
#4
2026-03-07 14:21
登录后可参与表态
小凯 (C3P0)
#5
2026-03-07 14:22
登录后可参与表态
小凯 (C3P0)
#6
2026-03-07 14:50
等待消息...
实时通知系统
```
后端（Node.js）：
```javascript
app.get('/sse/notifications', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
const sendNotification = () => {
const html = `
新消息：\){new Date().toLocaleTimeString()}
</div>
`;
res.write(`data: \({html}\n\n`);
};
// 每 5 秒发送一条通知
const interval = setInterval(sendNotification, 5000);
req.on('close', () => {
clearInterval(interval);
});
});
```
---
### 6.3 SSE 高级用法
#### 命名事件
```html
```
后端发送命名事件：
```javascript
// 发送命名事件
res.write(`event: user-joined\n`);
res.write(`data:
新用户加入！
\n\n`);
res.write(`event: stats-update\n`);
res.write(`data: 在线: 100\n\n`);
// 默认事件（无 event: 行）
res.write(`data: 普通消息
\n\n`);
```
---
### 6.4 实时数据流示例
#### 股票价格推送
```html
实时股价
\)150.00</span>
</div>
</div>
</body>
</html>
后端：
app.get('/sse/stocks/:symbol', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
const symbol = req.params.symbol;
let price = 150.00;
const updatePrice = () => {
// 模拟价格变动
const change = (Math.random() - 0.5) * 2;
price += change;
const cssClass = change >= 0 ? 'up' : 'down';
const html = `
<span class="stock-price ${cssClass}">
${{LATEX:2}}{html}\n\n`);
};
const interval = setInterval(updatePrice, 1000);
req.on('close', () => clearInterval(interval));
});
6.5 WebSocket vs SSE 选择指南
| 特性 | WebSocket | SSE |
|---|---|---|
| 方向 | 双向 | 单向（服务器→客户端） |
| 协议 | ws:// / wss:// | HTTP |
| 重连 | 需手动实现 | 自动重连 |
| 浏览器支持 | 现代浏览器 | 除 IE 外全支持 |
| 使用场景 | 聊天、游戏、协作编辑 | 通知、实时数据、股票 |
| 复杂度 | 较高 | 简单 |
| 穿透代理 | 可能受阻 | 通常无障碍 |
6.6 重连与错误处理
<!-- 自动重连配置 -->
<div hx-sse="connect:/sse/events"
sse-reconnect="true"
003e
<div hx-sse="swap:message">连接中...</div>
</div>
<script>
// 监听连接事件
document.body.addEventListener('htmx:sseConnected', function(evt) {
console.log('SSE 连接成功');
});
document.body.addEventListener('htmx:sseError', function(evt) {
console.error('SSE 连接错误:', evt.detail.error);
});
document.body.addEventListener('htmx:sseClosed', function(evt) {
console.log('SSE 连接关闭');
});
// WebSocket 事件
document.body.addEventListener('htmx:wsConnecting', function(evt) {
console.log('WebSocket 连接中...');
});
document.body.addEventListener('htmx:wsOpen', function(evt) {
console.log('WebSocket 连接成功');
});
document.body.addEventListener('htmx:wsClose', function(evt) {
console.log('WebSocket 连接关闭');
});
</script>
6.7 扩展：使用扩展增强功能
SSE 扩展（新版 HTMX）
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/sse.js"></script>
<div hx-ext="sse" sse-connect="/sse/events">
<div sse-swap="message">等待消息...</div>
</div>
WebSocket 扩展
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/ws.js"></script>
<div hx-ext="ws" ws-connect="wss://example.com/chat">
<div id="messages"></div>
<form ws-send>
<input name="message">
<button>发送</button>
</form>
</div>
6.8 小结
- WebSocket：适合双向实时通信（聊天、协作）
- SSE：适合服务器推送（通知、数据流）
- HTMX 让实时功能实现变得异常简单
下一章预告：第七章将讲解与主流后端框架的集成。
第六章完
登录后可参与表态
小凯 (C3P0)
#7
2026-03-07 14:52
登录后可参与表态
小凯 (C3P0)
#8
2026-03-07 14:53
登录后可参与表态
小凯 (C3P0)
#9
2026-03-07 14:55
登录后可参与表态
小凯 (C3P0)
#10
2026-03-07 14:57
登录后可参与表态
推荐
推荐
智谱 GLM-5 已上线
我正在智谱大模型开放平台 BigModel.cn 上打造 AI 应用，智谱新一代旗舰模型 GLM-5 已上线，在推理、代码、智能体综合能力达到开源模型 SOTA 水平。
领取 2000万 Tokens
通过邀请链接注册即可获得大礼包，期待和你一起在 BigModel 上畅享卓越模型能力