ESP32教程（基于Arduino IDE）7-Web Server③ HTML&CSS基础

已于 2025-03-23 13:36:28 修改
阅读量1.5k 收藏 21
点赞数 28
分类专栏： ESP32基础教程 文章标签： 单片机 嵌入式硬件 物联网
于 2024-11-04 00:28:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44736441/article/details/143462079
版权

ESP32教程系列
1 - 认识ESP32
2 - Arduino IDE安装&配置
3 - 基本操作
4 - WiFi配网
5 - WebServer①
6 - Web Server②控制输出
7 - Web Server③ HTML&CSS基础
8 - Web Server④ 在Arduinio中添加HTML&CSS
9 - 异步网页服务器 Asynchronous Web Server（DHT11)
10 - OTA ESP32无线升级,告别数据线

ESP32实战系列
WiFi遥控小车

ESP32 Homekit系列
Homekit & Homespan介绍
点亮一颗LED
调节LED亮度

前言

在ESP32教程（基于Arduino IDE）6 - Web Server②控制输出中使用到了HTML&CSS的技术，这里做一些简单的介绍，方便大家自行修改。需要深入了解者，可自行学习相关知识。

一、HTML 介绍

0. 什么是HTML

HTML 是超文本标记语言（Hypertext Markup Language）的缩写，是用于创建网页的主要标记语言。用于创建网页。网络浏览器就是为读取 HTML 文件而创建的–HTML 标签告诉网络浏览器如何显示网页上的内容。

1. 基本框架

<!DOCTYPE html><!--任何HTML文档的第一行，用于这就告诉网络浏览器此文档是HTML文件。-->
<html><!--网页结构应位于 <html> 和 </html> 之间。<html> 标记表示网页的开头，</html> 标记表示网页的结尾。-->

<!--HTML 文档分为两个主要部分：头部和主体。头部位于 <head> 和 </head> 标记内，主体位于 <body> 和 </body> 标记内。-->
<head>
</head><!--头部是插入 HTML 文档数据的地方，这些数据对最终用户来说并不直接可见，但可以为网页增加功能，如标题、脚本、样式等-->
<body><!--主体包含正文包括网页内容，如标题、文本、按钮、表格等。-->
</body><!-- -->
</html><!-- -->
<!-- HTML 中的注释以<!-- 开头，以 --> 结尾-->

2. 丰富网页内容

①标签

网页标签是网页浏览器标签中显示的文字。网页标签应位于<title> 和 </title>标记之间，而 <title> 和 标记应位于 <head> 和 </head>标记之间。在 <title> 和 </title> 标记之间输入标签，为网页添加标签，如下所示。

<!DOCTYPE html>
<html>
<head>
	<title>ESP32 Web Server</title><!-- 追加一个名叫《ESP32 Web Server》的标签-->
</head>
<body>
</body>
</html>

②标题

标题
标题用于构建网页文本的结构。标题以 “h ”开头，后面跟一个表示标题强度的数字。例如，<h1> 和 </h1> 是标题 1 的标记，<h2> 和 </h2> 是标题 2 的标记，直到标题 6。标题标记应位于 <body> 和 </body> 标记之间。

<!DOCTYPE html>
<html>
<head>
	<title>ESP32 Web Server</title><!-- 追加一个名叫《ESP32 Web Server》的标签-->
</head>
<body>
	<h1>ESP32 Web Server</h1><!-- 追加一个名叫《ESP32 Web Server》的标题-->
</body>
</html>

段落

段落用于放置文本。每个段落都应位于 <p> 和</p> 标记之间。添加一些段落来显示 GPIO 26 和 GPIO 27 的状态。（此处是以上一个代码为例）

<!DOCTYPE html>
<html>
<head>
	<title>ESP32 Web Server</title><!-- 追加一个名叫《ESP32 Web Server》的标签-->
</head>
<body>
	<h1>ESP32 Web Server</h1><!-- 追加一个名叫《ESP32 Web Server》的标题-->
	<p>GPIO 26 - State</p><!--追加显示GPIO26的状态-->
	<p>GPIO 27 - State</p><!--追加显示GPIO27的状态-->
</body>
</html>

按钮

在网页中添加按钮时，使用<button>和</button>标签。在标签之间输入您想要在按钮中显示的文本。为每个GPIO添加一个“ON”和“OFF”按钮。我们已在<p>和</p>之间的代码中插入了<button>和</button>标签。

<!DOCTYPE html>
<html>
<head>
	<title>ESP32 Web Server</title><!-- 追加一个名叫《ESP32 Web Server》的标签-->
</head>
<body>
	<h1>ESP32 Web Server</h1><!-- 追加一个名叫《ESP32 Web Server》的标题-->
	<p>GPIO 26 - State</p><!--追加显示GPIO26的状态-->
	<p><button>ON</button></p><!--追加ON按钮-->
	<p><button>OFF</button></p><!--追加OFF按钮-->
	<p>GPIO 27 - State</p><!--追加显示GPIO27的状态-->
	<p><button>ON</button></p><!--追加ON按钮-->
	<p><button>OFF</button></p><!--追加OFF按钮-->
</body>
</html>

拷贝上述代码至文本文件中，另存为后缀名是"html"的文件，用网页浏览器打开则可以看到以下画面。
在这里插入图片描述

超链接

HTML链接称为超链接。可以向文本、图像、按钮或任何其他HTML元素添加超链接。要添加超链接，可以使用和标记。
语法如下：

<a href="url">element</a>

在<a>和</a>标记之间，应该放置要应用链接的HTML元素。例如，要将链接应用于其中一个“OFF”按钮，则可以这么写。

<a href="url"><button>OFF</button></a>

href 属性指定了链接的指向。当您点击 GPIO 26 ON 按钮时，您希望被重定向到根页面，然后是 /26/on。为此，应将该 URL 添加到 href 属性中，如下所示：

<a href="/26/on"><button>ON</button></a>

完整的含有超链接的代码如下。

<!DOCTYPE html>
<html>
<head>
	<title>ESP32 Web Server</title><!-- 追加一个名叫《ESP32 Web Server》的标签-->
</head>
<body>
	<h1>ESP32 Web Server</h1><!-- 追加一个名叫《ESP32 Web Server》的标题-->
	<p>GPIO 26 - State</p><!--追加显示GPIO26的状态-->
	<p><a href="/26/on"><button>ON</button></a></p>
	<p><a href="/26/off"><button>OFF</button></a></p>
	<p>GPIO 27 - State</p><!--追加显示GPIO27的状态-->
	<p><a href="/27/on"><button>ON</button></a></p>
	<p><a href="/27/off"><button>OFF</button></a></p>
</body>
</html>

上述代码若保存到刚才的txt文件中再次用网页浏览器打开的话，遇到报错是正常的。因为href="/26/on"并没有相应的文件可以超链接；但在ESP32里的话不会有这问题，因为ESP32会发送这些相关信息给Web服务器。

类属性

class 属性为元素指定一个或多个类名。类名对于在 CSS 中定义样式非常有用。例如，如果要为一组 HTML 元素设置相同的样式，我们可以为它们设置相同的类名。
使用下面的语法添加类属性

<element class="classname">

一个 HTML 元素可以有多个类名，类名之间必须用空格隔开。在上一个教程中，我们为《开启》按钮指定了类名 “button”。对于《关闭》按钮，我们同时指定了 “button ”和 “button2 ”两个类名。因此，GPIO 26 按钮的类名如下

<p><a href="/26/on"><button class="button">ON</button></a></p>
<p><a href="/26/off"><button class="button button2">OFF</button></a></p>

那么，完整代码则为

<!DOCTYPE html>
<html>
<head>
	<title>ESP32 Web Server</title><!-- 追加一个名叫《ESP32 Web Server》的标签-->
</head>
<body>
	<h1>ESP32 Web Server</h1><!-- 追加一个名叫《ESP32 Web Server》的标题-->
	<p>GPIO 26 - State</p><!--追加显示GPIO26的状态-->
	<p><a href="/26/on"><button class="button">ON</button></a></p>
	<p><a href="/26/off"><button class="button button2">OFF</button></a></p>
	<p>GPIO 27 - State</p><!--追加显示GPIO27的状态-->
	<p><a href="/26/on"><button class="button">ON</button></a></p>
	<p><a href="/26/off"><button class="button button2">OFF</button></a></p>
</body>
</html>

元数据

在 index.html 文件的头部，添加了 <meta> 标签，它能使网页在任何网络浏览器中都能响应。

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta> 标签提供有关 HTML 文档的元数据。元数据不会在页面上显示，但会向浏览器提供有用的信息，例如，如何显示内容。

防止浏览器向 ESP32 发送有关收藏夹的请求追加如下代码

<link rel="icon" href="data:,">

二、 CSS介绍

0. 什么是CSS

CSS 是层叠样式表的缩写，用于描述网页中元素的外观。它描述网页的某一部分，如特定标签或特定标签集。CSS 可以添加到 HTML 文件中，也可以添加到 HTML 文件引用的单独文件中。把 CSS 添加到 HTML 文件中是因为它更容易添加到 Arduino IDE 中。
CSS 应放在 <style> 和 </style> 标记之间，应放在 HTML 文件的head部。
如：

<!DOCTYPE html>
<html>
<head>
	<title>ESP32 Web Server</title><!-- 标签 -->
	<style>CSS代码<\style><!-- CSS部分-->
</head>

CSS 使用选择器来设置 HTML 内容的样式。选择器指向你想要样式化的 HTML 元素。选择器具有属性，而属性具有值。

selector {
	property: value;
}

1. 设计页面样式

html {
	font-family: Helvetica;	/* 字体：Helvetica */
	display: inline-block;	/* 内容显示为一个块 */
	margin: 0px auto;		/* 页边距：0 */
	text-align: center;		/* 对齐方式：居中 */
}

截至目前为止，完整代码如下

<!DOCTYPE html>
<html>
<head>
	<title>ESP32 Web Server</title><!-- 追加一个名叫《ESP32 Web Server》的标签-->
	<meta name="viewport" content="width=device-width, initialscale=1">
	<link rel="icon" href="data:,">
	<style>
		html {
		font-family: Helvetica;	/* 字体：Helvetica */
		display: inline-block;	/* 内容显示为一个块 */
		margin: 0px auto;		/* 页边距：0 */
		text-align: center;		/* 对齐方式：居中 */
		}
	</style>
</head>
<body>
	<h1>ESP32 Web Server</h1><!-- 追加一个名叫《ESP32 Web Server》的标题-->
	<p>GPIO 26 - State</p><!--追加显示GPIO26的状态-->
	<p><a href="/26/on"><button class="button">ON</button></a></p>
	<p><a href="/26/off"><button class="button button2">OFF</button></a></p>
	<p>GPIO 27 - State</p><!--追加显示GPIO27的状态-->
	<p><a href="/26/on"><button class="button">ON</button></a></p>
	<p><a href="/26/off"><button class="button button2">OFF</button></a></p>
</body>
</html>

在网页端的整体效果如下：
在这里插入图片描述

2. 设计按键样式

要选择具有特定类别的元素，我们可以在类别名称后使用英文的句号（.），如下所示。

/* 
.button 是一个类选择器，下面的样式规则将应用于所有具有 "button" 类的 HTML 元素。
*/
.button {   
    background-color: #4CAF50;/* 设置按钮的背景颜色为绿色 */    
    border: none;		/* 移除按钮的边框 */    
    color: white;		/* 设置按钮文本颜色为白色 */   
    padding: 16px 40px; /* 设置按钮内部的内边距，上下为16px，左右为40px */
    text-decoration: none;/* 移除按钮文本的下划线*/    
    font-size: 30px;/* 设置按钮文本的字体大小为30px */   
    margin: 2px; /* 设置按钮的外边距为2px */
    cursor: pointer; /* 当鼠标悬停在按钮上时，鼠标指针变为指针形状（通常是手型），表示可点击 */
}

button2为关闭按钮的配置，比如用灰色显示，则可以这么写

.button2 {
background-color: #555555
}

background-color: 用于设置按钮（button）的背景颜色，可通过颜色名称、十六进制值、RGB 等方式来指定颜色。

border: 控制按钮（button）的边框样式，包括边框宽度、样式（如实线、虚线）和颜色等，设置为 “none” 时可移除边框。

color:用来确定按钮（button）上文本的颜色，使文字以指定的颜色显示。

padding: 定义按钮（button）内部内容（如文本）与按钮边框之间的间距，可分别设置上下和左右的间距。

text-decoration: 主要用于控制按钮（button）文本是否有下划线、删除线等装饰效果，“none” 表示无装饰。

font-size: 规定按钮（button）文本的字体大小，以像素（px）、点数（pt）等单位来衡量。

margin: 设置按钮（button）与相邻元素之间的外边距，用于控制按钮在页面布局中的间隔。

cursor: 当鼠标指针悬停在按钮（button）上时，改变指针的形状，例如变为手型来提示用户该按钮可以点击。

把.button以及.button2的代码加到<style>和</style>之间的话，则可以看到如下画面。

在这里插入图片描述

以上内容，如有错误，欢迎指正交流。
ESP32开发板新手教程 连接wifi并发送http请求获取网页html内容
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
04-16 160
这个小功能看起来简单，但在很多 IoT 项目里真的能用上，比如自动从某个接口抓状态、更新配置、同步时间等等。ESP32 不光能收传感器数据，也能像爬虫一样和网络世界打交道，关键是——它只要几十块！如果你也有类似需求，希望这篇文章能帮你少走些弯路。如果你有更高级的玩法，欢迎评论交流，我也在继续折腾 ESP32 和 HTTP 的更多可能性～
ESP32-Web-Server编程-HTML 基础
wangyx1234的博客
11-26 2053
1）本节主要是介绍 HTML 的基础知识。HTML 描述了一个网页中的基本内容； 2）HTML 文档包含了HTML **标签(包含标签和元素，其实他们是一样的)**及**文本内容**。其中 **HTML 标签**是由**尖括号**包围的关键词，HTML 标签通常是成对出现的。 3）在 ESP32 Web 编程中，通过在后端代码中建立一个发送 HTML 内容的 handler 函数，以及在前端代码中实现 HTML 文件来定义网页上的内容。
ESP32教程（基于Arduino IDE）5 - WebServer①
weixin_44736441的博客
10-27 998
请求 - 响应是一种消息交换模式。客户端（如浏览器）通过HTTP协议向服务器发送请求消息，服务器接收并处理请求后，返回响应消息。例如，当在浏览器中输入一个URL时，浏览器作为客户端向对应的服务器发送请求，服务器根据请求内容返回相应的网页内容。
基于ESP32搭建物联网服务器六(利用SPIFFS存放html,css,js等文件(读取html)
Byte Madman
09-17 9915
已经实现建立了一个WEB服务器了，但是页面的HTML代码是镶嵌在C语言代码中的，大部份情况下，不管是调试或者使用都是很不方便的。但是ESP32的SPIFFS提供了很好的解决方法，SPIFFS相当于ESP32中的一个硬盘分区，每种版本的ESP32中SPIFFS分区的大小可能会有各区别，如果需要存储的文件过大，需要先了解清楚自已的ESP32版本，或者找店家了解一下该分区的大小。本文中只做一个简单的了解和使用，文件不会过大，各种版本的ESP32应该都可以用来测试。至此，文件就上传至SPIFFS分区。
ESP32(Arduino)
Yf18005429102的博客
02-03 3497
USB接口用于下载程序，电源输入和烧录驱动等等。BOOT启动模式选择，按下为下载模式，放开为运行模式。ESP-32-WROOM-32模组集成了蓝牙，wifi等模块共48个引脚。但并不是所有引脚都暴露在外面，有些引脚不能使用就没有暴露出来。这个单片机就只有30个引脚。ESP32芯片有34个可编程的GPIO引脚，每个引脚执行多个功能。
基于ESP32搭建物联网服务器五(内嵌HTML)
Byte Madman
09-17 9052
的全称为超文本标记语言，大多数情况下会包含有CSS层叠样式表来修饰网页，同时会利用JavaScript脚本语言来对浏览器事件做出响应,详细的说明这里不再赘叙。但是只是输出了最基本的字符串，但一个正常的网页，是一种叫做。引用该方法，就无需对比如斜杠"\"或换行符"\n"之类的进行转义,非常方便。在这个变量里，使用了 PROGMEM 关键字，这个关键字的目的是将数据存储在Flash(闪存)中而不是RAM(运行内存)的基础上，把响应浏览器的请求换成上面的HTML代码。该HTML生成的网页在浏览器打开后的结果。
ESP32教程（基于Arduino IDE）6 - Web Server②控制输出
web13595609705的博客
12-12 1333
本节学习怎么用 ESP32 搭建一个简单的 Web 服务器，用它来控制输出。有了这个 Web 服务器，不管是手机、平板，还是电脑之类的，只要这个设备有浏览器，那在本地网络里，就能访问这个服务器，进而控制那些连在 ESP32 的 GPIO 引脚上的设备。我们要构建的 Web 服务器将控制两个连接到 ESP32 GPIO 26 和 27 的 LED。（可以更具自己开发板自行更改IO口）在本地网络中，通过在浏览器中输入 ESP32 的 IP 地址来访问 Web 服务器。
Arduino WIFI-WEBSERVER实验例程【正点原子EPS32S3】
最新发布
04-30
Arduino WIFI-WEBSERVER实验例程【正点原子EPS32S3】为Arduino爱好者提供了一个非常好的实践平台，通过这个实验，可以熟悉ESP32S3开发板的特性，掌握基础的网络编程技能，并进一步探索物联网的无限可能。无论你是...
ESP32_Web_Server_with_Arduino_IDE.zip
04-20
标题 "ESP32_Web_Server_with_Arduino_IDE.zip" 暗示了这个压缩包包含的内容是关于如何使用Arduino IDE来开发基于ESP32的Web服务器项目。ESP32是一款功能强大的微控制器，拥有集成Wi-Fi和蓝牙功能，非常适合物联网...
ESP8266-Arduino网络编程实例-Web服务器（从SPIFFS加载页面文件）
视觉与物联智能
10-16 1040
本实例将展示如何使用 Arduino IDE 构建一个 Web 服务器，为存储在 ESP8266 NodeMCU 文件系统 (SPIFFS) 上的 HTML 和 CSS 文件提供服务。 我们无需将 HTML 和 CSS 文本写入 Arduino 代码中，而是创建单独的 HTML 和 CSS 文件。
ESP32 Arduino开发环境搭建完整版
07-12
根据网上资料整理最完整的ESP32 Arduino开发环境搭建说明，可以根据说明制作自己的开发板。
Arduino:带有Arduino Control，p5.js HTML Web界面，用于物联网连接的PubNub API的C ++嵌入式编程，用于自动化设备
05-24
Arduino的 该存储库包含用于带有Arduino Control的自动化设备的C ++嵌入式编程的设计文件。 此处定义了不同的设计文件： 卷 可以用来确定某人听力阈值的音量控制。 用户可以从最大音量开始直到直到不再听到声音为止，或者从关闭音量开始直到一直听到直到听到声音为止。 闪烁声音 声音检测测试将打开灯，并且蜂鸣器将发出蜂鸣声或不发出蜂鸣声。 哔声将随机确定。 使用音量阈值测试确定用户的听力阈值。 然后，用户执行声音检测测试。 当他们既听到噪音又看到灯亮时，指示他按下按钮。 在所有3种实验条件下为用户记录命中率，未命中率，正确拒绝率和误报警率，并对数据进行分析。
IotPitcher-示例：用于ESP32 Arduino IDE环境的IotPitcher示例项目
02-11
您是否正在使用ESP32开发IoT设备？ 您将节省至少一个月的开发时间。 我们不在乎您的云平台，IotPitcher是您的应用程序的助手。 IotPitcher是一个物联网开发框架，可通过以下功能轻松构建和配置： 用户友好的AP...
快速入门ESP32——开发环境配置Arduino IDE
热门推荐
mucherry的博客
11-09 2万+
带你快速入门ESP32——arduino环境配置
html做的网页连wifi,ESP32通过WEB页面连接WIFI
weixin_31129503的博客
06-17 4489
在ESP32官方的例程中，都是直接把WIFI的SSID和Password写死在程序里，但是在实际使用中网络环境是不固定的，如果更换了网络环境，就得重新修改程序，在实际运用中并不合理。我在网上找了很久也没找到类似的例程，于是便自己试着写了一个，我的思路如下：首次上电会有一个ESP32发出的WIFI，手机连接这个WIFI，然后访问esp32的IP地址就会出现WIFI配置的网页：直接贴上代码：#incl...
HTML与Arduino通信: 使用Involt库进行交互
PnServer的博客
10-09 387
Involt是一个用于创建交互式HTML界面的JavaScript库，它与Arduino通信的功能非常强大。在本文中，我们将探讨如何使用HTML和Involt库实现与Arduino的通信。我们将提供详细的步骤和相应的源代码，以帮助您开始构建自己的HTML和Arduino通信项目。在上面的模板中，我们引入了Involt库，并创建了一个标题和一个空的JavaScript代码块。通过HTML和Involt库，您可以实现各种有趣的Arduino交互应用，如控制LED灯、读取传感器数据等。方法连接到Arduino。
micropython文件上传软件_ESP32 MicroPython教程：通过Picoweb的文件系统提供HTML
weixin_39540020的博客
11-24 341
介绍本 ESP32 MicroPython 教程的目的是解释如何在 picoweb 应用程序上从 MicroPython 文件系统中提供 html 内容。您可以检查如何在 esp32 上安装 picoweb, 以及如何在上一篇文章：ESP32 MicroPython教程：更改Picoweb路由的HTTP响应内容类型中开始使用它。如果您以前了解 picoweb 的工作原理, 则本教程将更易于遵循。有...
ESP32 html升级
XiaoEr_beiwang的博客
11-30 3124
esp32 html升级
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值