ESP32 DHT11 / DHT22 Web服务器

SP32 DHT11 / DHT22 Web服务器–使用Arduino IDE的温度和湿度

在本项目中，您将学习如何使用DHT11或DHT22来构建异步ESP32 Web服务器，该服务器使用Arduino IDE显示温度和湿度。

我们将构建的网络服务器无需刷新网页即可自动更新读数。

通过这个项目，您将学到：

· 如何从DHT传感器读取温度和湿度；

· 使用ESPAsyncWebServer库构建异步Web服务器;

· 自动更新传感器读数，而无需刷新网页。

异步Web服务器

为了构建Web服务器，我们将使用ESPAsyncWebServer库，该提供了一种构建异步Web服务器的简便方法。如库GitHub页面中所述，构建异步Web服务器具有多个优点，例如：

· "同时处理多个连接"；

· "当您发送响应时，当服务器负责在后台发送响应时，您将立即准备处理其他连接"；

· "用于处理模板的简单模板处理引擎"；

· 以及更多。

所需部件

要完成本教程，您需要以下部分：

ESP32开发板

DHT22 或 DHT11 温湿度传感器

4.7k欧姆电阻

面包板

跳线

原理图

进入Web服务器之前，您需要按照以下示意图所示将DHT11或DHT22传感器连接到ESP32。

在这种情况下，我们将数据引脚连接到GPIO 27，但是您可以将其连接到任何其他数字引脚。您可以将此示意图用于DHT11和DHT22传感器。

（此原理图使用带有36个GPIO的ESP32 DEVKIT V1模块版本–如果您使用的是其他型号，请检查所用电路板的引脚排列。）

注意：如果您使用的模块带有DHT传感器，则通常只有三个引脚。引脚上应标有标签，以便您知道如何进行接线。此外，这些模块中的许多模块已经带有内部上拉电阻，因此您无需在电路中增加一个。

安装库

您需要为此项目安装几个库：

· DHT和Adafruit的统一传感器驱动器库读取DHT传感器数据。

· ESPAsyncWebServer和Async TCP库可构建异步Web服务器。

按照以下说明安装这些库：

安装DHT传感器库

要使用Arduino IDE读取DHT传感器，您需要安装DHT传感器库。请按照以下步骤安装库。

1. 下载DHT-sensor-library-master .zip文件

2. 解压缩.zip文件夹，您应该获得 DHT-sensor-library-master 文件夹

3. 重命名您的文件夹到DHT_sensor

4. 将DHT_sensor 文件夹移至Arduino IDE安装库文件夹

5. 最后，重新打开您的Arduino IDE

安装Adafruit统一传感器驱动程序

您还需要安装Adafruit统一传感器驱动程序库才能使用DHT传感器。请按照以下步骤安装库。

1. 下载 Adafruit_sensor-master.zip文件

2. 解压缩.zip文件夹，您应该获得 Adafruit_sensor-master 文件夹

3. 重命名您的文件夹到 Adafruit_sensor

4. 将Adafruit_sensor文件夹移至Arduino IDE安装库文件夹

5. 最后，重新打开您的Arduino IDE

安装ESPAsyncWebServer库

请按照以下步骤安装 ESPAsyncWebServer库：

1. 下载ESPAsyncWebServer-master.zip文件

2. 解压缩.zip文件夹，您应该得到ESPAsyncWebServer-master文件夹

3. 重命名您的文件夹到ESPAsyncWebServer

4. 将ESPAsyncWebServer 文件夹移至Arduino IDE安装库文件夹

为ESP32安装异步TCP库

该 ESPAsyncWebServer库需要 AsyncTCP库才能工作。请按照以下步骤安装该库：

1. 下载AsyncTCP-master.zip文件

2. 解压缩.zip文件夹，您应该获得AsyncTCP-master文件夹

3. 重命名您的文件夹到AsyncTCP

4. 将AsyncTCP文件夹移至Arduino IDE安装库文件夹

5. 最后，重新打开您的Arduino IDE

程序代码

我们将使用Arduino IDE对ESP32进行编程，因此在继续之前，请确保已安装ESP32附加组件：

打开您的Arduino IDE并复制以下代码。

/*********

Rui Santos

Complete project details at https://randomnerdtutorials.com

*********/

// Import required libraries

#include "WiFi.h"

#include "ESPAsyncWebServer.h"

#include <Adafruit_Sensor.h>

#include <DHT.h>

// Replace with your network credentials

const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

#define DHTPIN 27 // Digital pin connected to the DHT sensor

// Uncomment the type of sensor in use:

//#define DHTTYPE DHT11 // DHT 11

#define DHTTYPE DHT22 // DHT 22 (AM2302)

//#define DHTTYPE DHT21 // DHT 21 (AM2301)

DHT dht(DHTPIN, DHTTYPE);

// Create AsyncWebServer object on port 80

AsyncWebServer server(80);

String readDHTTemperature() {

// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)

// Read temperature as Celsius (the default)

float t = dht.readTemperature();

// Read temperature as Fahrenheit (isFahrenheit = true)

//float t = dht.readTemperature(true);

// Check if any reads failed and exit early (to try again).

if (isnan(t)) {

Serial.println("Failed to read from DHT sensor!");

return "--";

}

else {

Serial.println(t);

return String(t);

}

String readDHTHumidity() {

// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)

float h = dht.readHumidity();

if (isnan(h)) {

Serial.println("Failed to read from DHT sensor!");

return "--";

}

else {

Serial.println(h);

return String(h);

}

const char index_html[] PROGMEM = R"rawliteral(

<!DOCTYPE HTML><html>

<head>

<style>

html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;

}

h2 { font-size: 3.0rem; }

p { font-size: 3.0rem; }

.units { font-size: 1.2rem; }

.dht-labels{

font-size: 1.5rem;

vertical-align:middle;

padding-bottom: 15px;

}

</style>

</head>

<body>

<h2>ESP32 DHT Server</h2>

<p>

<span class="dht-labels">Temperature</span>

<span id="temperature">%TEMPERATURE%</span>

</p>

<p>

<span class="dht-labels">Humidity</span>

<span id="humidity">%HUMIDITY%</span>

</p>

</body>

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("temperature").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/temperature", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("humidity").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/humidity", true);

xhttp.send();

}, 10000 ) ;

</script>

</html>)rawliteral";

// Replaces placeholder with DHT values

String processor(const String& var){

//Serial.println(var);

if(var == "TEMPERATURE"){

return readDHTTemperature();

}

else if(var == "HUMIDITY"){

return readDHTHumidity();

}

return String();

}

void setup(){

// Serial port for debugging purposes

Serial.begin(115200);

dht.begin();

// Connect to Wi-Fi

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi..");

}

// Print ESP32 Local IP Address

Serial.println(WiFi.localIP());

// Route for root / web page

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/html", index_html, processor);

});

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", readDHTTemperature().c_str());

});

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", readDHTHumidity().c_str());

});

// Start server

server.begin();

}

void loop(){

}

将WIFI用户名和密码插入以下变量中，该代码将立即生效。

const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

代码如何工作

在下面的段落中，我们将解释代码的工作方式。

导入库

首先，导入所需的库。需要WiFi，ESPAsyncWebServer和ESPAsyncTCP来构建Web服务器。Adafruit_Sensor和DHT是从DHT11或DHT22传感器来读取数据。

#include "WiFi.h"

#include "ESPAsyncWebServer.h"

#include <ESPAsyncTCP.h>

#include <Adafruit_Sensor.h>

#include <DHT.h>

设置您的WIFI网络

在以下变量中插入您的用户名和密码，以便ESP32可以连接到您的本地WIFI网络。

const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

变量定义

定义DHT数据引脚连接的GPIO。在这种情况下，它已连接到GPIO 27。

#define DHTPIN 27 // Digital pin connected to the DHT sensor

然后，选择您正在使用的DHT传感器类型。在我们的示例中，我们使用的是DHT22。如果您使用的是其他类型，则只需要取消注释传感器并注释所有其他传感器即可。

#define DHTTYPE DHT22 // DHT 22 (AM2302)

使用我们之前定义的类型和引脚实例化DHT对象。

DHT dht(DHTPIN, DHTTYPE);

在端口80上创建一个AsyncWebServer对象。

AsyncWebServer server(80);

读取温度和湿度函数

我们创建了两个函数：一个读取温度（readDHTTemperature（）），另一个读取湿度（readDHTHumidity（））。

String readDHTTemperature() {

// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)

// Read temperature as Celsius (the default)

float t = dht.readTemperature();

// Read temperature as Fahrenheit (isFahrenheit = true)

//float t = dht.readTemperature(true);

// Check if any reads failed and exit early (to try again).

if (isnan(t)) {

Serial.println("Failed to read from DHT sensor!");

return "--";

}

else {

Serial.println(t);

return String(t);

}

获取传感器读数就像在dht对象上使用readTemperature（）和readHumidity（）方法一样简单。

float t = dht.readTemperature();

float h = dht.readHumidity();

如果传感器无法获得读数，我们还有一个条件返回两个破折号（–）。

if (isnan(t)) {

Serial.println("Failed to read from DHT sensor!");

return "--";

}

读数以字符串类型返回。要将float转换为字符串，请使用String（）函数。

return String(t);

默认情况下，我们以摄氏度为单位读取温度。要获取以华氏度为单位的温度，请以摄氏度为单位注释温度，并以华氏度为注释温度，以便您具有以下条件：

//float t = dht.readTemperature();

// Read temperature as Fahrenheit (isFahrenheit = true)

float t = dht.readTemperature(true);

建立网页

进入Web服务器页面。

如上图所示，该网页显示一个标题和两个段落。有一段显示温度，另一段显示湿度。还有两个图标可以美化我们的页面。

让我们看看如何创建此网页。

所有包含样式的HTML文本都存储在index_html变量中。现在，我们将遍历HTML文本，并查看每个部分的作用。

以下<meta>标记使您的网页在任何浏览器中都能响应。

所述<链路>需要标签来从网站fontawesome加载的图标。

风格样式

在<style> </ style>标记之间，我们添加了一些CSS来设置网页样式。

<style>

html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;

}

h2 { font-size: 3.0rem; }

p { font-size: 3.0rem; }

.units { font-size: 1.2rem; }

.dht-labels{

font-size: 1.5rem;

vertical-align:middle;

padding-bottom: 15px;

}

</style>

基本上，我们将HTML页面设置为显示Arial字体的文本，该文本以不带边距的块显示，并居中对齐。

html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;

}

我们为读数的标题（h2），段落（p）和单位（.units）设置字体大小。

h2 { font-size: 3.0rem; }

p { font-size: 3.0rem; }

.units { font-size: 1.2rem; }

读数的标签样式如下所示：

dht-labels{

font-size: 1.5rem;

vertical-align:middle;

padding-bottom: 15px;

}

先前的所有标记应位于<head>和</ head>标记之间。这些标记用于包含用户不直接可见的内容，例如<meta>，<link>标记和样式。

HTML主体

在<body> </ body>标记内是我们添加网页内容的位置。

该<h2> </ h2>标签标题添加到网页。在这种情况下，" ESP32 DHT服务器"文本，但是您可以添加任何其他文本。

<h2>ESP32 DHT Server</h2>

然后，有两个段落。一个显示温度，另一个显示湿度。段落由<p>和</ p>标记分隔。温度的段落如下：

<p>

<span class="dht-labels">Temperature</span>

<span id="temperature">%TEMPERATURE%</span>

</p>

湿度的段落在以下摘要中：

<p>

<span class="dht-labels">Humidity</span>

<span id="humidity">%HUMIDITY%</span>

</p>

所述的<i>标签显示fontawesome图标。

如何显示图标

要选择图标，请访问。

搜索您要查找的图标。例如，"温度计"。

单击所需的图标。然后，您只需要复制提供的HTML文本。

要选择颜色，您只需要通过十六进制传递颜色的样式参数，如下所示：

继续HTML文本…

下一行在网页中写入"温度"一词。

<span class="dht-labels">Temperature</span>

％符号之间的TEMPERATURE文本是温度值的占位符。

<span id="temperature">%TEMPERATURE%</span>

这意味着此％TEMPERATURE％文本就像一个变量，将被DHT传感器的实际温度值代替。HTML文本上的占位符应位于％符号之间。

最后，我们添加度数符号。

该<SUP> < / SUP>标签使文本标。

对于湿度段，我们使用相同的方法，但是使用不同的图标和％HUMIDITY％占位符。

<p>

<span class="dht-labels">Humidity</span>

<span id="humidity">%HUMIDITY%</span>

</p>

自动更新

最后，我们的网页中有一些JavaScript代码，每10秒自动更新一次温度和湿度。

HTML文本中的脚本应位于<script> </ script>标记之间。

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("temperature").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/temperature", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("humidity").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/humidity", true);

xhttp.send();

}, 10000 ) ;

</script>

要更新背景温度，我们有一个setInterval（）函数，该函数每10秒运行一次。

基本上，它在/ temperature URL中发出请求以获取最新的温度读数。

xhttp.open("GET", "/temperature", true);

xhttp.send();

}, 10000 ) ;

收到该值时，它将更新id为temperature的HTML元素。

if (this.readyState == 4 && this.status == 200) {

document.getElementById("temperature").innerHTML = this.responseText;

}

总而言之，上一节负责异步更新温度。对湿度读数重复相同的过程。

重要提示：由于DHT传感器获取读数的速度非常慢，如果您计划同时将多个客户端连接到ESP32，建议您增加请求间隔或删除自动更新。

处理器

现在，我们需要创建processor（）函数，该函数将用实际的温度和湿度值替换HTML文本中的占位符。

String processor(const String& var){

//Serial.println(var);

if(var == "TEMPERATURE"){

return readDHTTemperature();

}

else if(var == "HUMIDITY"){

return readDHTHumidity();

}

return String();

}

当请求网页时，我们检查HTML是否具有任何占位符。如果找到％TEMPERATURE％占位符，则通过调用先前创建的readDHTTemperature（）函数来返回温度。

if(var == "TEMPERATURE"){

return readDHTTemperature();

}

如果占位符为％HUMIDITY％，则返回湿度值。

else if(var == "HUMIDITY"){

return readDHTHumidity();

}

设定（）

在setup（）中，初始化串口监视器以进行调试。

Serial.begin(115200);

初始化DHT传感器。

dht.begin();

连接到您的局域网并打印ESP32 IP地址。

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi..");

}

最后，添加以下代码行以处理Web服务器。

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/html", index_html, processor);

});

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", readDHTTemperature().c_str());

});

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", readDHTHumidity().c_str());

});

当我们在根URL上发出请求时，我们将发送存储在index_html变量中的HTML文本。我们还需要传递处理器函数，该函数将用正确的值替换所有占位符。

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/html", index_html, processor);

});

我们需要添加两个其他处理程序来更新温度和湿度读数。当我们在/ temperature URL 上收到请求时，我们只需要发送更新的温度值。它是纯文本，应该以char形式发送，因此我们使用c_str（）方法。

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", readDHTTemperature().c_str());

});

对湿度重复相同的过程。

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", readDHTHumidity().c_str());

});

最后，我们可以启动服务器。

server.begin();

因为这是一个异步Web服务器，所以我们不需要在loop（）中编写任何内容。

void loop(){

}

以上就是代码的工作原理。

上载验证程序

现在，将代码上传到ESP32。确保选择了正确的板和COM端口。

上传后，以115200的波特率打开串口监视器。按ESP32复位按钮。ESP32 IP地址应在串口监视器中打印。

Web服务器演示

打开浏览器，输入ESP32 IP地址。您的Web服务器应显示最新的传感器读数。

请注意，温度和湿度读数会自动更新，而无需刷新网页。

在本教程中，我们向您展示了如何使用ESP32构建异步Web服务器以显示来自DHT11或DHT22传感器的传感器读数以及如何自动更新读数。

代码手机电脑管理类软件开发，其中可拖放使用的输入框类显示元件包括：字符输入框元件（Text Field）、多行文本输入框元件（Text Area）、密码输入框元件（Password Field）、数字输入框元件（Number Field）、日期输入框元件（Date Field）、带标签字符输入框元件（Text Labeled Field）、带标签数字输入框元件（Number Labeled Field）、带标签日期输入框元件（Date Labeled Field）、带标签下拉选择菜单元件（Selection Labeled Field）

各类输入框元件：主要是提供用户在前端输入信息用，即放即用，这些元件直接显示在前端。

1、属性可以定义显示的样式，比如定义宽度大小、边框颜色等，用法与其他元件一样设定属性的“html.style”值即可，同时也可以用“html.maxLength”定义输入值的长短，超过长度则无法输入：

输入框元件属性中样式设定

2、输入框因类型不同，可输入的数据形式固定，比如数字输入框无法录入文字字符；但字符输入框可以输入数字，数据是字符型的；密码输入框输入时不显示内容但显示占位符号；日期选框会出现一个日期选项板（日期格式可改为中文）：

日期输入框在前端的效果

3、带标签的输入框只是提供了一个默认的字符标签，命名后标签显示名称；这个标签本身是一个与输入框并行放置的文本显示元件；在使用时也可以直接放一个字符常量显示元件，外加不带标签的输入框；也可以对标签单独进行样式定义处理：

带标签的输入框，标签显示名称

4、输入框中可以添加一个“<On Change>”的行业处理，当输入完成后回车或TAB键或光标移出点击其他位置时可以触发逻辑处理，比如检查字符输入时是否要求输入的邮箱字符包含有@符号，以及数字输入时是否数字不为零，如果不包含或是零，则提示需重输入：

输入框添加一个逻辑行为

5、支持<Placeholder>、<Visible>、<Disabled>等H5标签使用：<Placeholder>是将一个常量文本放入，主要是提示输入信息用；<Visible>可以用于复用模块中，有些无需让用户看见或配合上第4点当某个条件符合时隐去不显示简化用户作业让界面也简单化，传布尔值就可以（在常量元件中有是和否的常量）；<Disabled>可以作为是否不让输入任何内容用，布尔值传值给他就行：

输入框中提示信息设定

提示信息用户前端显示

下拉选择菜单元件（Selection Labeled Field）：

1、下拉选择菜单元件与以上其他输入元件一样，没有差别，可参考以上处理；

2、下拉选框的中的<Options>是选项，可放入多个内容；可以为下拉框添加一个默认的最常用的选项，如下：

下拉菜单选项设定

一部分：HTML简介

什么是HTML？

HTML代表超文本标记语言（Hypertext Markup Language）。它是一种用于构建网页的标记语言。HTML文件包含一组标签，这些标签用于定义网页的结构和内容。浏览器读取HTML文件，并根据标记中的指示呈现网页内容。

HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式，并提供交互元素，例如表单和按钮。

HTML的基本结构

每个HTML文档都应该遵循以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 内容在这里 -->
</body>
</html>

让我们逐步解释这个结构：

<!DOCTYPE html>：这是文档类型声明，它告诉浏览器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
<html>：HTML文档的根元素。所有其他元素都包含在<html>标签内。
<head>：包含与文档相关的元信息，如页面标题、字符集声明和外部样式表链接。
<title>：定义网页的标题，显示在浏览器标签页上。
<body>：包含网页的主要内容，如文本、图像和其他媒体。

HTML标签和元素

HTML标签是由尖括号括起来的名称，例如<p>表示段落，<img>表示图像。标签通常成对出现，有一个开始标签和一个结束标签。例如：

<p>这是一个段落。</p>

<p>是开始标签，</p>是结束标签，文本位于两个标签之间。标签定义了元素的类型和结构。

有些HTML标签是自封闭的，不需要结束标签，例如<img>用于插入图像。

HTML注释

在HTML中，你可以使用注释来添加说明性文字，注释不会在浏览器中显示。HTML注释使用结尾，如下所示：

<!-- 这是一个注释 -->

注释通常用于添加文档说明、调试代码或标记未来的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素：

<p>：定义一个段落。
<h1>到<h6>：定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。
<strong>：定义强调文本，通常以粗体显示。
<em>：定义强调文本，通常以斜体显示。
<a>：定义超链接，允许用户点击跳转到其他页面。

示例：

<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>

图像

要在网页中插入图像，可以使用<img>标签。它是一个自封闭标签，需要指定图像的src属性来指定图像文件的路径。

示例：

htmlCopy code
<img src="image.jpg" alt="图像描述">

src：指定图像文件的路径。
alt：提供图像的替代文本，用于无法加载图像时的文字描述。

链接

通过使用<a>标签，可以在网页中创建链接。链接通常包含在文本或图像中，并使用href属性指定目标URL。

示例：

<a href="https://www.example.com">访问示例网站</a>

href：指定链接的目标URL。

列表

HTML支持有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）。

无序列表

无序列表使用<ul>标签定义，每个列表项使用<li>标签。

示例：

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

有序列表使用<ol>标签定义，每个列表项使用<li>标签。

示例：

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

定义列表使用<dl>标签定义，每个定义项目使用<dt>标签定义术语，使用<dd>标签定义描述。

示例：

<dl>
    <dt>术语1</dt>
    <dd>描述1</dd>
    <dt>术语2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表单

HTML表单允许用户与网页进行交互，提交数据。以下是HTML表单的基本元素：

<form>元素

<form>元素用于创建表单，可以包含文本字段、复选框、单选按钮、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表单元素在这里 -->
</form>

action：指定表单数据提交的目标URL。
method：指定提交方法，通常是"post"或"get"。

输入字段

输入字段用于接收用户输入的数据，常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。

文本框

文本框使用<input>标签，type属性设置为"text"。

示例：

<input type="text" name="username" placeholder="用户名">

type：指定字段类型。
name：指定字段的名称。
placeholder：设置文本框的占位符文本。

密码框

密码框使用<input>标签，type属性设置为"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密码">

单选按钮

单选按钮使用<input>标签，type属性设置为"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

name：指定单选按钮组的名称。
value：指定每个选项的值。

复选框

复选框使用<input>标签，type属性设置为"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">订阅新闻

下拉列表

下拉列表使用<select>和<option>标签创建。<select>定义下拉列表，而<option>定义选项。

示例：

<select name="country">
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
</select>

name：指定下拉列表的名称。
每个<option>标签表示一个选项，使用value属性定义选项的值。

第四部分：HTML样式和CSS

HTML用于定义网页的结构和内容，但要使网页看起来更吸引人，需要使用CSS（层叠样式表）。CSS允许你定义字体、颜色、布局等样式。

内联样式

可以在HTML元素内部使用style属性来定义内联样式。

示例：

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

外部样式表

外部样式表将样式规则保存在独立的CSS文件中，并通过<link>标签将其链接到HTML文档。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中链接外部样式表：

<link rel="stylesheet" type="text/css" href="style.css">

这使得可以在整个网站上共享相同的样式。

总结

HTML是构建现代网页的基础。通过学习HTML的基本语法和元素，你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单，HTML提供了丰富的工具来呈现内容和实现用户交互。

这篇文章提供了HTML的基础知识，但HTML是一个广泛的主题，还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助，让你能够开始创建自己的网页。继续学习和实践，你将成为一个熟练的网页开发者。

在线咨询

上一篇：店招个性是如何被“一刀切”的：“美丽街区”背后的政策扭曲
下一篇：踩过许多坑后，送你这份H5交互的页面跳转方式总结

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

ESP32 DHT11 / DHT22 Web服务器

一部分：HTML简介

什么是HTML？

HTML的基本结构

HTML标签和元素

HTML注释

第二部分：HTML基本元素

文本

图像

链接

列表

无序列表

有序列表

定义列表

第三部分：HTML表单

<form>元素

输入字段

文本框

密码框

单选按钮

复选框

下拉列表

第四部分：HTML样式和CSS

内联样式

外部样式表

总结

您的项目需求