第二章：基础概念与快速开始
2.1 安装 HTMX
HTMX 的安装非常简单，有三种方式：
方式一：CDN（推荐用于学习和原型）
<!-- 生产环境建议锁定版本 -->
<script src="https://unpkg.com/htmx.org@1.9.12"
integrity="sha384-..."
crossorigin="anonymous"></script>
<!-- 开发环境可以使用最新版 -->
<script src="https://unpkg.com/htmx.org@latest"></script>
方式二：npm/yarn
npm install htmx.org
# 或
yarn add htmx.org
然后在代码中导入：
import 'htmx.org';
// 或者
const htmx = require('htmx.org');
方式三：下载文件
curl -o htmx.min.js https://unpkg.com/htmx.org@1.9.12/dist/htmx.min.js
<script src="/js/htmx.min.js"></script>
2.2 第一个 HTMX 应用
创建一个完整的示例，展示 HTMX 的核心工作流程：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个 HTMX 应用</title>
<!-- 引入 HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<style>
.loading { opacity: 0.5; }
.fade-in { animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
</style>
</head>
<body>
<h1>🚀 HTMX 示例</h1>
<!-- 示例 1: 点击加载内容 -->
<section>
<h2>1. 点击加载</h2>
<button hx-get="/api/hello"
hx-target="#result1"
hx-indicator="#loading1">
点击获取内容
</button>
<span id="loading1" class="htmx-indicator">加载中...⏳</span>
<div id="result1"></div>
</section>
<!-- 示例 2: 表单提交 -->
<section>
<h2>2. 表单提交</h2>
<form hx-post="/api/submit"
hx-target="#result2"
hx-swap="outerHTML">
<input type="text" name="username" placeholder="用户名" required>
<button type="submit">提交</button>
</form>
<div id="result2"></div>
</section>
</body>
</html>
2.3 核心概念解析
2.3.1 请求触发
HTMX 通过 HTML 属性定义何时向服务器发起请求：
| 属性 | 方法 | 示例 |
|---|
hx-get | GET 请求 | hx-get="/api/data" |
hx-post | POST 请求 | hx-post="/api/save" |
hx-put | PUT 请求 | hx-put="/api/update" |
hx-patch | PATCH 请求 | hx-patch="/api/edit" |
hx-delete | DELETE 请求 | hx-delete="/api/delete" |
2.3.2 目标选择
hx-target 决定服务器返回的 HTML 插入到哪里：
<!-- CSS 选择器 -->
<button hx-get="/content" hx-target="#result">插入 #result</button>
<!-- this - 当前元素 -->
<button hx-get="/content" hx-target="this">替换自己</button>
<!-- closest - 最近的父元素 -->
<div class="card">
<button hx-get="/detail" hx-target="closest .card"></button>
</div>
<!-- next - 下一个兄弟元素 -->
<button hx-get="/content" hx-target="next div"></button>
<div></div>
<!-- previous - 上一个兄弟元素 -->
<div></div>
<button hx-get="/content" hx-target="previous div"></button>
2.3.3 内容交换方式
hx-swap 控制内容如何替换：
| 值 | 行为 |
|---|
innerHTML | 替换目标内部的 HTML（默认） |
outerHTML | 替换整个目标元素 |
beforebegin | 在目标前插入 |
afterbegin | 在目标内部开头插入 |
beforeend | 在目标内部末尾插入 |
afterend | 在目标后插入 |
delete | 删除目标元素 |
none | 不交换内容 |
可视化演示：
目标元素: <div id="target">原内容</div>
innerHTML: <div id="target">[新内容]</div>
outerHTML: [新内容]
beforebegin: [新内容]<div id="target">原内容</div>
afterbegin: <div id="target">[新内容]原内容</div>
beforeend: <div id="target">原内容[新内容]</div>
afterend: <div id="target">原内容</div>[新内容]
2.4 后端示例
HTMX 可以与任何后端语言配合，以下是常见语言的示例：
Python (Flask)
from flask import Flask, render_template_string
app = Flask(__name__)
@app.route('/api/hello')
def hello():
return '<div class="fade-in"><h3>Hello from HTMX!</h3></div>'
@app.route('/api/submit', methods=['POST'])
def submit():
username = request.form.get('username')
return f'<div class="success">欢迎，{username}！</div>'
PHP
<?php
// api/hello.php
header('Content-Type: text/html');
echo '<div class="fade-in"><h3>Hello from HTMX!</h3></div>';
// api/submit.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = htmlspecialchars($_POST['username']);
echo "<div class='success'>欢迎，{$username}！</div>";
}
Node.js (Express)
const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: true }));
app.get('/api/hello', (req, res) => {
res.send('<div class="fade-in"><h3>Hello from HTMX!</h3></div>');
});
app.post('/api/submit', (req, res) => {
const { username } = req.body;
res.send(`<div class="success">欢迎，${username}！</div>`);
});
2.5 关键要点总结
- HTMX 的核心是属性：所有功能通过 HTML 属性实现
- 后端返回 HTML：不是 JSON，而是渲染好的 HTML 片段
- 渐进增强：即使 HTMX 加载失败，页面也能正常工作
- 零 JS 代码：纯 HTML 就能实现动态交互
下一章预告：第三章将详细讲解所有核心属性及其高级用法。
第二章完
返回主话题查看完整目录