HTML5无法直接连接数据库，必须通过后端API中转；前端仅能发送请求，数据库交互由服务器端代码（如Node.js、PHP）完成，且需注意CORS、鉴权、敏感信息保护及连接池配置。
HTML5 本身不能连接数据库
HTML5 是标记语言，没有 I/O 能力，更不支持直接访问服务器端数据库。所谓“HTML5 连数据库”，实际是混淆了前端界面（HTML + JavaScript）和后端服务的角色。
真正发生数据库交互的，一定是服务器上的代码（比如 Node.js、PHP、Python），前端只负责发请求、收响应。
常见错误现象：Failed to load resource: net::ERR_CONNECTION_REFUSED 或控制台报 Access to fetch at 'http://localhost:3000/api/data' from origin 'http://localhost:5500' has been blocked by CORS policy——这说明你试图绕过后端，让浏览器直连数据库端口（如 3306、5432），这在标准 Web 环境中根本不可行，且极度危险。
必须通过后端 API 中转
前端用 fetch 或 axios 调用你自己的后端接口，后端再用对应驱动（如 mysql2、pg）连数据库。这是唯一安全、可行的路径。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 不要把数据库地址、账号密码写在
JavaScript里（哪怕只是测试），它们会暴露在浏览器源码中 - 后端接口需明确鉴权（哪怕只是简单 token），否则任何人都能调用你的
/api/users拿走全部数据 - 避免 GET 接口返回敏感字段（如
password_hash），后端应做字段过滤 - 本地开发时注意跨域：若前端跑在
http://localhost:5500，后端要配CORS允许该源，或用代理（如 Vite 的server.proxy）
示例（前端）：
fetch('/api/posts')<br> .then(r => r.json())<br> .then(data => console.log(data));对应后端（Express）：app.get('/api/posts', (req, res) => {<br> db.query('SELECT id, title FROM posts', (err, results) => {<br> res.json(results);<br> });<br>});
Web SQL 和 IndexedDB 不是“连服务器数据库”
这两个是浏览器内置的客户端存储方案，数据存在用户本地，和服务器数据库完全无关。
常见误解场景：
- 以为
openDatabase能连 MySQL —— 实际它只支持 Web SQL（已废弃，仅旧版 Safari/Chrome 支持） - 把
IndexedDB当作远程同步工具 —— 它默认不联网，同步逻辑必须自己用fetch实现 - 在 PWA 中缓存 API 响应时，误以为缓存 = 数据库连接 —— 缓存的是 JSON 字符串，不是实时数据库视图
性能影响：Web SQL 最大容量通常 5MB，IndexedDB 可达数百 MB，但都受限于用户磁盘空间和浏览器策略，且无法执行 JOIN、事务跨库等服务端能力。
想快速验证流程？最小可行组合
不用框架也能跑通：一个静态 HTML 页面 + 一个轻量后端 + 一条 SQL 查询。
推荐组合（零配置压力小）：
- 前端：
index.html里放一个button，点击执行fetch('/api/hello') - 后端：用
json-server（仅读）或express+sqlite3（可读写），监听localhost:3001 - 数据库：SQLite 文件（
db.sqlite）比 MySQL 更易启动，无用户名密码烦恼 - 关键检查点：打开浏览器开发者工具 → Network 标签页 → 点按钮后看是否出现
200 OK的/api/hello请求，响应体是否为 JSON
容易被忽略的一点：数据库连接池配置。本地调试时可能不显，但上线后若每次请求都新建连接（mysql.createConnection），很快会耗尽连接数，必须用 createPool 并设好 max 和 acquireTimeout。
