设计类型的网站,重庆是哪个省哪个市,网站做好了怎样推广,青岛手机网站设计公司ESP32-Web-Server编程-HTML 基础
概述
HTML(HyperText Markup Language) 是用来描述网页的一种语言。其相关内容存储在前端代码的 .html 文件中。
当浏览器向 web 服务器请求网页时#xff0c;一个 HTML 文件被发送给浏览器#xff0c;浏览器解释该文件的内容#xff0c;…ESP32-Web-Server编程-HTML 基础
概述
HTML(HyperText Markup Language) 是用来描述网页的一种语言。其相关内容存储在前端代码的 .html 文件中。
当浏览器向 web 服务器请求网页时一个 HTML 文件被发送给浏览器浏览器解释该文件的内容呈现具体的图表、文字给用户。
HTML 文档包含了HTML 标签(包含标签和元素其实他们是一样的)及文本内容其中 HTML 标签是由尖括号包围的关键词HTML 标签通常是成对出现的基本格式是 标签内容/标签示例 h1这是一个一级标题/h1
h2这是一个二级标题/h2
p这是一个段落。/p
a hrefhttps://www.iot-wang.com这是一个链接/a文本内容标签内的显示字符。 还有一些格式化标签也称为元素的定义以及注释风格 br 换行
hr 在 HTML 页面中创建水平线
!-- 这是一个注释 --
b 与i 定义粗体或斜体文本我们暂时可以只了解这些用到了新的内容是我们将进一步介绍它学以致用边学边用一直是我们的目标。
一个 HTML 的基础结构组成 示例中的 HTML 的基本组成如上所示。 声明为 HTML5 文档 元素是 HTML 页面的根元素 元素包含了文档的元meta数据如 定义网页编码格式为 utf-8。 元素描述了文档的标题 元素包含了可见的页面内容 元素定义一个大标题 元素定义一个段落
**注意**在浏览器的页面上使用键盘上的 F12 按键开启调试模式就可以看到该网页的组成标签。
查看完整网页声明类型 DOCTYPE 参考手册。
**注意**对于中文网页需要使用 声明编码否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码则你需要设置为 。
更多HTML 的学习你可以在网络上收集资料或者参考 HTML 教程 | 菜鸟教程 (runoob.com)。
需求及功能解析
本节演示如何在 ESP32 上使用 wifi并使用 html 文件编译使用步骤参考
示例在网页上的显示 本系列博客并不是一门专门介绍 HTML 编程的课程我们只需了解常用的技术就可以了。在 components/htmls 目录中还有一些 HTML 文件你可以将其拷贝到 components/fs_image 中并重命名为 index.html然后重新编译该工程以查看不同 HTML 文件的效果。下面简单介绍各个 HTML 文件涉及的内容。
示例解析
目录结构
├── CMakeLists.txt
├── main
│ ├── CMakeLists.txt
│ └── main.c User application
├── components
│ └── fs_image└── index.html└── ...
| └── url_handlers└── url_handlers.c└── ...
└── README.md This is the file you are currently reading目录结构主要包含主目录 main以及组件目录 components. 其中组件目录components中包含了用于存储网页文件的 fs_image 目录即前述前端文件以及用于记录 ESP32 上接收来自服务器的请求并作出响应的 url_handlers 目录即后端文件。如前所述浏览器可以通过 URL 请求服务器端的资源包括数据和文件每个 URL 到来时都可以设计一个函数来决定如何响应该 URL 请求这便是 url_handlers 要完成的功能。
建立前后端代码 为了保存 html 文件以及图片文件到 ESP32 上url_handlers 目录的 CMakeLists.txt 使用内嵌数据的方式将 fs_image目录的 index.html 和 favicon.ico 文件保存在 ESP32 中此外前端代码 idf_component_register(SRCS url_handlers.cINCLUDE_DIRS includePRIV_REQUIRES esp_http_serverEMBED_FILES ../fs_image/favicon.ico ../fs_image/index.html)为了在打开网页时显示 index.html 中的内容在 url_handlers.c 中实现了 一个处理函数 index_html_get_handler()。这部分是后端代码。 /* Handler to redirect incoming GET request for /index.html to /* This can be overridden by uploading file with same name */
static esp_err_t index_html_get_handler(httpd_req_t *req)
{extern const char html_start[] asm(_binary_index_html_start);extern const char html_end[] asm(_binary_index_html_end);const size_t html_size (html_end - html_start);httpd_resp_set_type(req, text/html);/* Add file upload form and script which on execution sends a POST request to /upload */httpd_resp_send_chunk(req, (const char*) html_start, html_size);/* Respond with an empty chunk to signal HTTP response completion */return httpd_resp_send_chunk(req, NULL, 0);
}在实现了 html 文件以及 对应的 handles 后可以在 main.c 中注册对应的 handler: static httpd_handle_t start_webserver(void)
{httpd_handle_t server NULL;httpd_config_t config HTTPD_DEFAULT_CONFIG();config.lru_purge_enable true;// Start the httpd serverESP_LOGI(TAG, Starting server on port: %d, config.server_port);if (httpd_start(server, config) ESP_OK) {// Set URI handlersESP_LOGI(TAG, Registering URI handlers);for (int i 0; i sizeof(httpd_uri_array) / sizeof(httpd_uri_t); i) {if (httpd_register_uri_handler(server, httpd_uri_array[i]) ! ESP_OK) {ESP_LOGE(TAG, httpd register uri_array[%d] fail, i);}}ESP_LOGI(TAG, Success starting server!);return server;}ESP_LOGI(TAG, Error starting server!);return NULL;
}如此当打开网页时浏览器会自动请求名为 index.html 的文件并显示其中的内容。
编译并烧录固件到设备中
1在工程目录打开配置菜单
idf.py menuconfig主要是配置 wifi 连接的名称和密码 2编译烧录固件到设备中
idf.py -p PORT build flash monitor(Replace PORT with the name of the serial port to use.)
(To exit the serial monitor, type Ctrl-].)
如果你是新手请参考 Getting Started Guide 搭建编译环境。
3网页显示
设备烧录固件后启动该设备从 log 中查看设备的 IP地址
I (3288) app_wifi: got ip:192.168.47.100
I (3288) esp_netif_handlers: sta ip: 192.168.47.100, mask: 255.255.255.0, gw: 192.168.47.1
I (3288) example_main: Starting server on port: 80
I (3298) example_main: Registering URI handlers
I (3298) example_main: Success starting server!这里假设设备 IP 地址是 192.168.47.100.
让手机或者电脑与 ESP32 连接同一个路由器然后打开手机或者电脑上电浏览器输入上述IP地址即可打开网页 上述示例网页即是本例程 fs_images 目录的 index.html 文件在该浏览器中所程序的样子。
讨论
1输入网址后浏览器会自动请求 favicon.ico(即上述网页中第一行显示的图标)。
默认情况下当请求一个网站的 “/” 目录内容时会默认打开该目录的 index.html 文件。
同样的默认情况下浏览器会自动请求 /目录下的 favicon.ico 文件用作网址栏的一个标识图像。
2如何设计 index.html 文件中的内容使之在网页上呈现合适的内容
这正是本系列博客主要介绍的内容。以试验促进理解在测试实践中学习敬请参考后续章节。
总结
1本节主要是介绍 HTML 的基础知识。HTML 描述了一个网页中的基本内容 2HTML 文档包含了HTML 标签(包含标签和元素其实他们是一样的)及文本内容。其中 HTML 标签是由尖括号包围的关键词HTML 标签通常是成对出现的。 3在 ESP32 Web 编程中通过在后端代码中建立一个发送 HTML 内容的 handler 函数以及在前端代码中实现 HTML 文件来定义网页上的内容。
资源链接
1ESP32-Web-Server ESP-IDF系列博客介绍 2对应示例的 code 链接 点击直达代码仓库
3下一篇ESP32-Web-Server编程-CSS 基础1
(码字不易感谢点赞或收藏)
