HTML 本身不能连接数据库，它是纯静态标记语言，无执行能力；所有“HTML 连数据库”实为混淆前后端职责，真正连接数据库的是服务器端程序，前端仅能通过 fetch 等向后端 API 发起 HTTP 请求。
HTML 本身不能连接数据库。 它是纯静态标记语言，没有执行能力，更没有网络请求、身份认证、SQL 解析这些后端功能。所有“HTML 连数据库”的搜索结果，实际都是混淆了前端和后端职责，或误用了某些简化工具（如低代码平台、本地文件型 DB）。
为什么 fetch 或 XMLHttpRequest 看起来像在连数据库？
它们只是发 HTTP 请求，真正连接数据库的是你服务器上的后端程序（比如用 Node.js 调 mysql2，或 PHP 用 mysqli_connect）。浏览器里的 HTML 页面只能和后端 API 通信，绝不能直连 MySQL/PostgreSQL 等服务。
常见错误现象：
- 在 HTML 里写
mysql://user:pass@localhost:3306/db—— 浏览器直接报错或忽略 - 用
fetch("/api/data")却没搭后端，返回 404 或 CORS 错误 - 把数据库账号密码硬编码进 HTML 或 JS，导致泄露
本地开发时能绕过后端吗？比如用 sqlite 或 localStorage？
可以模拟，但不是“连数据库”的等价替代：
立即学习“前端免费学习笔记（深入）”；
-
localStorage和sessionStorage只存字符串，适合缓存用户偏好、表单草稿，不支持查询、索引、事务 - Web SQL（已废弃）和
IndexedDB是浏览器内置的客户端数据库，能存结构化数据，但无法与服务端数据库同步，也不支持 SQL 标准语法（SELECT * FROM不行，得用objectStore.openCursor） - 有极少数场景用
sqlite-wasm在浏览器跑 SQLite，但数据全在内存/本地，且无法访问远程 DB
真实项目中该怎么做？关键路径必须清晰
一个可运行的最小闭环是：HTML → fetch → 后端 API（如 /api/users）→ 后端代码（如 express + pg）→ 数据库
- 后端必须做鉴权，不能让任何用户都能调
/api/delete-all - API 返回 JSON，HTML 用
response.json()解析，别直接innerHTML = response.text() - 数据库连接信息（
DB_HOST、DB_PASSWORD）必须存在环境变量或配置文件里，绝不能出现在前端代码中 - 开发时用
cors中间件允许本地http://localhost:5173访问，上线后关掉或限制域名
容易被忽略的坑：CORS、预检请求、连接池泄漏
你以为写了 fetch("/api/data") 就完事了？实际卡在：
- 浏览器发 OPTIONS 预检请求，后端没处理就挂掉 —— 得加
app.options("*", cors())（Express） - 每次请求都新建数据库连接，没复用，很快耗尽连接数 —— 必须用连接池（如
pg.Pool） - 后端没设
Content-Type: application/json，前端response.json()报错 - HTML 页面用
file://协议打开，fetch 直接被浏览器拦截（跨源策略），必须走http://或https://
真正在意“HTML 怎么连数据库”，说明还没分清请求发起方和数据处理方。重点不是怎么写 HTML，而是谁来响应那个请求、怎么保护凭证、怎么控制数据流向。这些逻辑不在 里，而在服务器进程里。
