htmx教程：49k星的高人气HTML工具，不写JS实现交互

📅 2026-08-30 · 🏷️ 前端开发 · HTML工具 · 开源项目

htmx是什么？

一个老牌但持续火热的前端库（49k 星），核心理念是"用 HTML 属性做交互"：直接在标签上加 hx-get、hx-post、hx-trigger 等属性，就能发起 AJAX、做 CSS 过渡、开 WebSocket 和 SSE，甚至局部替换页面，几乎不用手写 JavaScript。

它把"服务端渲染 + 局部刷新"带回前端主流：后端返回 HTML 片段，htmx 直接塞进目标节点，前端逻辑极简，特别适合传统后端开发者、以及想减少前端复杂度的团队。

安装

# CDN 直接引入
<script src="https://unpkg.com/htmx.org@2.0.0"></script>

# 或 npm
npm install htmx.org

单个文件无依赖，约 14KB gzip，直接放到静态目录也能用。

核心属性速查

属性	作用
hx-get / hx-post	指定请求方法与地址
hx-trigger	触发时机（click/change/每5s/自定义事件）
hx-target	响应HTML插入到哪个元素
hx-swap	innerHTML/outerHTML/append等插入方式
hx-push-url	更新地址栏（无刷新路由）
hx-ws / hx-sse	WebSocket 与 Server-Sent Events

三个立刻能用的示例

1. 按钮点击加载内容

<button hx-get="/more" hx-target="#box" hx-swap="innerHTML">
  加载更多
</button>
<div id="box"></div>

2. 表单无刷新提交

<form hx-post="/submit" hx-target="#result" hx-swap="innerHTML">
  <input name="q">
  <button type="submit">搜索</button>
</form>
<div id="result"></div>

3. 定时轮询刷新

<div hx-get="/status" hx-trigger="every 5s" hx-swap="innerHTML">
  加载中…
</div>

适合的场景

• 服务端渲染应用：后端（Python/Go/Java/PHP）返回 HTML 片段，前端零框架
• 后台管理系统：表格局部刷新、弹窗、轮询，代码量骤减
• 渐进增强：现有页面加交互，不动已有 JS 架构
• 团队协作：后端兼前端，不用切 Vue/React 心智模型

htmx 这类"轻交互"工具和 AI 生成网页的潮流很配——AI 更容易生成语义化 HTML + htmx 属性，而不是复杂前端框架代码。想了解截图直接生成页面，可看screenshot-to-code教程；用自然语言写整套应用的思路参考Cloudflare OS vibe coding 教程。