一、HTML 核心基础：页面结构与常用标签
HTML（超文本标记语言）是 Web 页面的骨架，嵌入式场景下无需复杂样式，掌握核心标签即可满足需求。
1. HTML 基本格式（必背）
html
预览
<!DOCTYPE html> <!-- 声明HTML5文档类型 -->
<html> <!-- 根标签 -->
<head> <!-- 头部：元数据、标题等 -->
<meta charset="utf-8"> <!-- 编码格式，解决中文乱码 -->
<title>页面标题</title> <!-- 浏览器标签页标题 -->
</head>
<body> <!-- 主体：页面可见内容 -->
这里是页面核心内容
</body>
</html>关键注意：<meta charset="utf-8"> 必须加，否则嵌入式 Web 服务器返回的中文会乱码。
2. 超链接标签 <a>：实现页面跳转
<a> 是嵌入式 Web 中最常用的标签之一，支持外部网站、本地文件、图片三种跳转形式：
html
预览
<!-- 1. 链接外部网站 -->
<a href="http://www.baidu.com">访问百度</a>
<!-- 2. 链接本地HTML文件（同目录） -->
<br> <!-- 换行标签 -->
<a href="1.html">打开本地1.html</a>
<!-- 3. 图片作为链接（点击图片跳转） -->
<br>
<a href="login.html"><img src="icon.jpg"></a>3. 图片标签 <img>：展示设备可视化内容
嵌入式场景常用来展示设备状态图、二维码等，单标签无需闭合：
html
预览
<!-- 基础用法：src指定路径，alt备用文本，宽高固定值 -->
<img src="abc.jpg" alt="设备状态图" width="100" height="200">
<!-- 自适应布局：宽高按百分比设置（适配不同屏幕） -->
<img src="logo.jpg" alt="设备LOGO" width="50%" height="20%">| 属性 | 作用 | 嵌入式场景建议 |
|---|---|---|
src |
图片路径 | 用相对路径（如./img/xxx.jpg），避免绝对路径 |
alt |
图片加载失败时显示的文本 | 填写设备相关提示（如 "传感器状态图"） |
width/height |
宽高 | 优先用百分比，适配嵌入式屏小尺寸 |
4. 表单标签 <form>：实现数据提交（核心）
嵌入式 Web 中，表单是设备向服务器提交参数（如登录密码、配置参数）的核心方式，支持GET/POST两种提交方式。
（1）表单基础结构
html
预览
<!-- action：提交地址（嵌入式服务器IP/路径）；method：提交方式 -->
<form action="http://192.168.1.100/login" method="get">
<!-- 表单内容：输入框、按钮等 -->
用户名：<input type="text" name="username" required>
<br>
密码：<input type="password" name="password" maxlength="6">
<br>
<input type="submit" value="登录"> <!-- 提交按钮 -->
<input type="reset" value="重置"> <!-- 重置按钮 -->
</form>（2）核心属性说明
| 表单属性 | 取值 | 嵌入式场景选择 |
|---|---|---|
action |
服务器地址 / 路径 | 填嵌入式 Web 服务器 IP + 接口（如/login） |
method |
get/post |
- GET：参数拼在 URL 后（简单场景，如登录）- POST：参数封装在请求体（安全，如配置参数） |
（3）input 输入框核心类型（嵌入式高频）
type值 |
作用 | 应用场景 |
|---|---|---|
text |
单行文本框 | 输入用户名、设备编号 |
password |
密码框（内容隐藏） | 输入登录密码、设备密钥 |
submit |
提交按钮 | 提交表单数据到服务器 |
reset |
重置按钮 | 清空表单输入内容 |
button |
普通按钮 | 绑定 JS 事件（如本地逻辑处理） |
hidden |
隐藏字段（不显示） | 传递设备 ID、默认参数等无需用户输入的内容 |
email |
邮箱格式校验 | 配置设备通知邮箱（需兼容） |
（4）input 常用属性
html
预览
<!-- required：必填项；placeholder：提示文字；value：默认值 -->
<input type="text" name="device_id" required placeholder="请输入设备ID" value="dev001">
<!-- maxlength：限制输入长度 -->
<input type="password" name="pwd" maxlength="8">二、HTML+SQLite3：嵌入式 Web 数据交互实战
嵌入式 Web 服务中，HTML 表单提交的数据需通过 SQLite3 数据库验证 / 存储，以下是核心交互示例。
1. 场景：登录表单 + SQLite3 验证
（1）登录页面（login.html）
html
预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入式设备登录</title>
</head>
<body>
<h3>设备管理后台</h3>
<form action="/login" method="get">
用户名：<input type="text" name="username" required placeholder="请输入用户名">
<br><br>
密码：<input type="password" name="password" required placeholder="请输入密码">
<br><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
</body>
</html>（2）SQLite3 数据库验证核心代码
c
运行
#include <sqlite3.h>
#include <stdio.h>
#include <string.h>
// 回调函数：查询到匹配数据时设置flag=1
int show(void* arg, int col, char** result, char** title) {
*(int*)arg = 1;
return 0;
}
// 验证用户名密码（嵌入式Web服务器核心逻辑）
int check_login(const char* name, const char* pass) {
sqlite3* db = NULL;
int ret = sqlite3_open("user.db", &db); // 打开用户数据库
if (ret != SQLITE_OK) {
fprintf(stderr, "数据库打开失败：%s\n", sqlite3_errmsg(db));
sqlite3_close(db);
return -1;
}
char* errmsg = NULL;
int flag = 0;
char sql_cmd[512] = {0};
// 拼接查询SQL：匹配用户名和密码
sprintf(sql_cmd, "select * from user where name = '%s' and password = '%s';", name, pass);
// 执行SQL，回调show函数
ret = sqlite3_exec(db, sql_cmd, show, &flag, &errmsg);
if (ret != SQLITE_OK) {
fprintf(stderr, "SQL执行失败：%s\n", errmsg);
sqlite3_free(errmsg);
sqlite3_close(db);
return -1;
}
sqlite3_close(db);
return flag; // 1=验证成功，0=验证失败
}2. 核心交互流程
- 浏览器访问嵌入式服务器的
login.html页面； - 用户输入用户名 / 密码，点击 "提交"，表单通过
GET方式将参数拼到 URL（如/login?username=admin&password=123456）； - 嵌入式 Web 服务器解析 URL 中的参数，调用
check_login函数； check_login通过 SQLite3 查询user.db中的用户表，返回验证结果；- 服务器根据结果返回登录成功 / 失败页面。
三、嵌入式 Web 开发避坑指南
- 中文乱码 ：HTML 必须加
<meta charset="utf-8">，服务器返回页面时需确保编码一致； - 路径问题 ：HTML 中图片、本地链接用相对路径（
./xxx），避免绝对路径（/home/xxx）； - 表单提交 ：嵌入式服务器优先支持
GET（解析简单），POST需解析请求体； - SQLite3 容错 ：数据库操作后必须关闭句柄（
sqlite3_close），避免资源泄漏； - 适配性：嵌入式屏尺寸小，HTML 尽量不用复杂样式，表单 / 按钮按百分比布局。
四、总结
嵌入式 Web 开发的核心是 "轻量、实用"：HTML 层面掌握表单、超链接、图片即可满足大部分场景，无需过度追求样式；数据交互层面，SQLite3 凭借轻量、无需安装的特性，是嵌入式 Web 服务的最佳数据库选择。
结合本文的 HTML 基础和 SQLite3 交互示例，可快速实现嵌入式设备的 Web 登录、参数配置、状态展示等核心功能，适配智能家居、工业控制、物联网网关等各类嵌入式场景。