整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
SP32 DHT11 / DHT22 Web服務(wù)器–使用Arduino IDE的溫度和濕度
在本項(xiàng)目中，您將學(xué)習(xí)如何使用DHT11或DHT22來(lái)構(gòu)建異步ESP32 Web服務(wù)器，該服務(wù)器使用Arduino IDE顯示溫度和濕度。
我們將構(gòu)建的網(wǎng)絡(luò)服務(wù)器無(wú)需刷新網(wǎng)頁(yè)即可自動(dòng)更新讀數(shù)。
通過(guò)這個(gè)項(xiàng)目，您將學(xué)到：
· 如何從DHT傳感器讀取溫度和濕度；
· 使用ESPAsyncWebServer庫(kù)構(gòu)建異步Web服務(wù)器;
· 自動(dòng)更新傳感器讀數(shù)，而無(wú)需刷新網(wǎng)頁(yè)。
異步Web服務(wù)器
為了構(gòu)建Web服務(wù)器，我們將使用ESPAsyncWebServer庫(kù)，該提供了一種構(gòu)建異步Web服務(wù)器的簡(jiǎn)便方法。如庫(kù)GitHub頁(yè)面中所述，構(gòu)建異步Web服務(wù)器具有多個(gè)優(yōu)點(diǎn)，例如：
· "同時(shí)處理多個(gè)連接"；
· "當(dāng)您發(fā)送響應(yīng)時(shí)，當(dāng)服務(wù)器負(fù)責(zé)在后臺(tái)發(fā)送響應(yīng)時(shí)，您將立即準(zhǔn)備處理其他連接"；
· "用于處理模板的簡(jiǎn)單模板處理引擎"；
· 以及更多。
所需部件
要完成本教程，您需要以下部分：
原理圖
進(jìn)入Web服務(wù)器之前，您需要按照以下示意圖所示將DHT11或DHT22傳感器連接到ESP32。
在這種情況下，我們將數(shù)據(jù)引腳連接到GPIO 27，但是您可以將其連接到任何其他數(shù)字引腳。您可以將此示意圖用于DHT11和DHT22傳感器。
（此原理圖使用帶有36個(gè)GPIO的ESP32 DEVKIT V1模塊版本–如果您使用的是其他型號(hào)，請(qǐng)檢查所用電路板的引腳排列。）
注意：如果您使用的模塊帶有DHT傳感器，則通常只有三個(gè)引腳。引腳上應(yīng)標(biāo)有標(biāo)簽，以便您知道如何進(jìn)行接線(xiàn)。此外，這些模塊中的許多模塊已經(jīng)帶有內(nèi)部上拉電阻，因此您無(wú)需在電路中增加一個(gè)。
安裝庫(kù)
您需要為此項(xiàng)目安裝幾個(gè)庫(kù)：
· DHT和Adafruit的統(tǒng)一傳感器驅(qū)動(dòng)器庫(kù)讀取DHT傳感器數(shù)據(jù)。
· ESPAsyncWebServer和Async TCP庫(kù)可構(gòu)建異步Web服務(wù)器。
按照以下說(shuō)明安裝這些庫(kù)：
安裝DHT傳感器庫(kù)
要使用Arduino IDE讀取DHT傳感器，您需要安裝DHT傳感器庫(kù) 。請(qǐng)按照以下步驟安裝庫(kù)。
1. 下載DHT-sensor-library-master .zip文件
2. 解壓縮.zip文件夾，您應(yīng)該獲得 DHT-sensor-library-master 文件夾
3. 重命名您的文件夾 到DHT_sensor
4. 將DHT_sensor 文件夾移至Arduino IDE安裝庫(kù)文件夾
5. 最后，重新打開(kāi)您的Arduino IDE
安裝Adafruit統(tǒng)一傳感器驅(qū)動(dòng)程序
您還需要安裝Adafruit統(tǒng)一傳感器驅(qū)動(dòng)程序庫(kù)才能使用DHT傳感器。請(qǐng)按照以下步驟安裝庫(kù)。
1. 下載 Adafruit_sensor-master.zip文件
2. 解壓縮.zip文件夾，您應(yīng)該獲得 Adafruit_sensor-master 文件夾
3. 重命名您的文件夾 到 Adafruit_sensor
4. 將Adafruit_sensor文件夾移至Arduino IDE安裝庫(kù)文件夾
5. 最后，重新打開(kāi)您的Arduino IDE
安裝ESPAsyncWebServer庫(kù)
請(qǐng)按照以下步驟安裝 ESPAsyncWebServer庫(kù)：
1. 下載ESPAsyncWebServer-master.zip文件
2. 解壓縮.zip文件夾，您應(yīng)該得到ESPAsyncWebServer-master文件夾
3. 重命名您的文件夾 到ESPAsyncWebServer
4. 將ESPAsyncWebServer 文件夾移至Arduino IDE安裝庫(kù)文件夾
為ESP32安裝異步TCP庫(kù)
該 ESPAsyncWebServer庫(kù)需要 AsyncTCP庫(kù)才能工作。請(qǐng)按照以下步驟安裝該庫(kù)：
1. 下載AsyncTCP-master.zip文件
2. 解壓縮.zip文件夾，您應(yīng)該獲得AsyncTCP-master文件夾
3. 重命名您的文件夾 到AsyncTCP
4. 將AsyncTCP文件夾移至Arduino IDE安裝庫(kù)文件夾
5. 最后，重新打開(kāi)您的Arduino IDE
程序代碼
我們將使用Arduino IDE對(duì)ESP32進(jìn)行編程，因此在繼續(xù)之前，請(qǐng)確保已安裝ESP32附加組件：
打開(kāi)您的Arduino IDE并復(fù)制以下代碼。
/*********
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>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<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>
<i class="fas fa-thermometer-half" style="color:#059e8a;"></i>
<span class="dht-labels">Temperature</span>
<span id="temperature">%TEMPERATURE%</span>
<sup class="units">°C</sup>
</p>
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>
</body>
<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>
</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用戶(hù)名和密碼插入以下變量中，該代碼將立即生效。
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
代碼如何工作
在下面的段落中，我們將解釋代碼的工作方式。
導(dǎo)入庫(kù)
首先，導(dǎo)入所需的庫(kù)。需要WiFi，ESPAsyncWebServer和ESPAsyncTCP來(lái)構(gòu)建Web服務(wù)器。Adafruit_Sensor和DHT是從DHT11或DHT22傳感器來(lái)讀取數(shù)據(jù)。
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <ESPAsyncTCP.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
設(shè)置您的WIFI網(wǎng)絡(luò)
在以下變量中插入您的用戶(hù)名和密碼，以便ESP32可以連接到您的本地WIFI網(wǎng)絡(luò)。
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
變量定義
定義DHT數(shù)據(jù)引腳連接的GPIO。在這種情況下，它已連接到GPIO 27。
#define DHTPIN 27 // Digital pin connected to the DHT sensor
然后，選擇您正在使用的DHT傳感器類(lèi)型。在我們的示例中，我們使用的是DHT22。如果您使用的是其他類(lèi)型，則只需要取消注釋傳感器并注釋所有其他傳感器即可。
#define DHTTYPE DHT22 // DHT 22 (AM2302)
使用我們之前定義的類(lèi)型和引腳實(shí)例化DHT對(duì)象。
DHT dht(DHTPIN, DHTTYPE);
在端口80上創(chuàng)建一個(gè)AsyncWebServer對(duì)象。
AsyncWebServer server(80);
讀取溫度和濕度函數(shù)
我們創(chuàng)建了兩個(gè)函數(shù)：一個(gè)讀取溫度（readDHTTemperature（）），另一個(gè)讀取濕度（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);
}
}
獲取傳感器讀數(shù)就像在dht對(duì)象上使用readTemperature（）和readHumidity（）方法一樣簡(jiǎn)單。
float t = dht.readTemperature();
float h = dht.readHumidity();
如果傳感器無(wú)法獲得讀數(shù)，我們還有一個(gè)條件返回兩個(gè)破折號(hào)（–）。
if (isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return "--";
}
讀數(shù)以字符串類(lèi)型返回。要將float轉(zhuǎn)換為字符串，請(qǐng)使用String（）函數(shù)。
return String(t);
默認(rèn)情況下，我們以攝氏度為單位讀取溫度。要獲取以華氏度為單位的溫度，請(qǐng)以攝氏度為單位注釋溫度，并以華氏度為注釋溫度，以便您具有以下條件：
//float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float t = dht.readTemperature(true);
建立網(wǎng)頁(yè)
進(jìn)入Web服務(wù)器頁(yè)面。
如上圖所示，該網(wǎng)頁(yè)顯示一個(gè)標(biāo)題和兩個(gè)段落。有一段顯示溫度，另一段顯示濕度。還有兩個(gè)圖標(biāo)可以美化我們的頁(yè)面。
讓我們看看如何創(chuàng)建此網(wǎng)頁(yè)。
所有包含樣式的HTML文本都存儲(chǔ)在index_html變量中。現(xiàn)在，我們將遍歷HTML文本，并查看每個(gè)部分的作用。
以下<meta>標(biāo)記使您的網(wǎng)頁(yè)在任何瀏覽器中都能響應(yīng)。
<meta name="viewport" content="width=device-width, initial-scale=1">
所述<鏈路>需要標(biāo)簽來(lái)從網(wǎng)站fontawesome加載的圖標(biāo)。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
風(fēng)格樣式
在<style> </ style>標(biāo)記之間，我們添加了一些CSS來(lái)設(shè)置網(wǎng)頁(yè)樣式。
<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頁(yè)面設(shè)置為顯示Arial字體的文本，該文本以不帶邊距的塊顯示，并居中對(duì)齊。
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
我們?yōu)樽x數(shù)的標(biāo)題（h2），段落（p）和單位（.units）設(shè)置字體大小。
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
讀數(shù)的標(biāo)簽樣式如下所示：
dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
先前的所有標(biāo)記應(yīng)位于<head>和</ head>標(biāo)記之間。這些標(biāo)記用于包含用戶(hù)不直接可見(jiàn)的內(nèi)容，例如<meta>，<link>標(biāo)記和樣式。
HTML主體
在<body> </ body>標(biāo)記內(nèi)是我們添加網(wǎng)頁(yè)內(nèi)容的位置。
該<h2> </ h2>標(biāo)簽標(biāo)題添加到網(wǎng)頁(yè)。在這種情況下，" ESP32 DHT服務(wù)器"文本，但是您可以添加任何其他文本。
<h2>ESP32 DHT Server</h2>
然后，有兩個(gè)段落。一個(gè)顯示溫度，另一個(gè)顯示濕度。段落由<p>和</ p>標(biāo)記分隔。溫度的段落如下：
<p>
<i class="fas fa-thermometer-half" style="color:#059e8a;"</i>
<span class="dht-labels">Temperature</span>
<span id="temperature">%TEMPERATURE%</span>
<sup class="units">°C</sup>
</p>
濕度的段落在以下摘要中：
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>
所述的<i>標(biāo)簽顯示fontawesome圖標(biāo)。
如何顯示圖標(biāo)
要選擇圖標(biāo)，請(qǐng)?jiān)L問(wèn)。
搜索您要查找的圖標(biāo)。例如，"溫度計(jì)"。
單擊所需的圖標(biāo)。然后，您只需要復(fù)制提供的HTML文本。
<i class="fas fa-thermometer-half">
要選擇顏色，您只需要通過(guò)十六進(jìn)制傳遞顏色的樣式參數(shù)，如下所示：
<i class="fas fa-tint" style="color:#00add6;"></i>
繼續(xù)HTML文本…
下一行在網(wǎng)頁(yè)中寫(xiě)入"溫度"一詞。
<span class="dht-labels">Temperature</span>
％符號(hào)之間的TEMPERATURE文本是溫度值的占位符。
<span id="temperature">%TEMPERATURE%</span>
這意味著此％TEMPERATURE％文本就像一個(gè)變量，將被DHT傳感器的實(shí)際溫度值代替。HTML文本上的占位符應(yīng)位于％符號(hào)之間。
最后，我們添加度數(shù)符號(hào)。
<sup class="units">°C</sup>
該<SUP> < / SUP>標(biāo)簽使文本標(biāo)。
對(duì)于濕度段，我們使用相同的方法，但是使用不同的圖標(biāo)和％HUMIDITY％占位符。
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>
自動(dòng)更新
最后，我們的網(wǎng)頁(yè)中有一些JavaScript代碼，每10秒自動(dòng)更新一次溫度和濕度。
HTML文本中的腳本應(yīng)位于<script> </ script>標(biāo)記之間。
<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>
要更新背景溫度，我們有一個(gè)setInterval（）函數(shù)，該函數(shù)每10秒運(yùn)行一次。
基本上，它在/ temperature URL中發(fā)出請(qǐng)求以獲取最新的溫度讀數(shù)。
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;
收到該值時(shí)，它將更新id為temperature的HTML元素。
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}
總而言之，上一節(jié)負(fù)責(zé)異步更新溫度。對(duì)濕度讀數(shù)重復(fù)相同的過(guò)程。
重要提示：由于DHT傳感器獲取讀數(shù)的速度非常慢，如果您計(jì)劃同時(shí)將多個(gè)客戶(hù)端連接到ESP32，建議您增加請(qǐng)求間隔或刪除自動(dòng)更新。
處理器
現(xiàn)在，我們需要?jiǎng)?chuàng)建processor（）函數(shù)，該函數(shù)將用實(shí)際的溫度和濕度值替換HTML文本中的占位符。
String processor(const String& var){
//Serial.println(var);
if(var == "TEMPERATURE"){
return readDHTTemperature();
}
else if(var == "HUMIDITY"){
return readDHTHumidity();
}
return String();
}
當(dāng)請(qǐng)求網(wǎng)頁(yè)時(shí)，我們檢查HTML是否具有任何占位符。如果找到％TEMPERATURE％占位符，則通過(guò)調(diào)用先前創(chuàng)建的readDHTTemperature（）函數(shù)來(lái)返回溫度。
if(var == "TEMPERATURE"){
return readDHTTemperature();
}
如果占位符為％HUMIDITY％，則返回濕度值。
else if(var == "HUMIDITY"){
return readDHTHumidity();
}
設(shè)定（）
在setup（）中，初始化串口監(jiān)視器以進(jìn)行調(diào)試。
Serial.begin(115200);
初始化DHT傳感器。
dht.begin();
連接到您的局域網(wǎng)并打印ESP32 IP地址。
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
最后，添加以下代碼行以處理Web服務(wù)器。
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());
});
當(dāng)我們?cè)诟鵘RL上發(fā)出請(qǐng)求時(shí)，我們將發(fā)送存儲(chǔ)在index_html變量中的HTML文本。我們還需要傳遞處理器函數(shù)，該函數(shù)將用正確的值替換所有占位符。
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
我們需要添加兩個(gè)其他處理程序來(lái)更新溫度和濕度讀數(shù)。當(dāng)我們?cè)? temperature URL 上收到請(qǐng)求時(shí)，我們只需要發(fā)送更新的溫度值。它是純文本，應(yīng)該以char形式發(fā)送，因此我們使用c_str（）方法。
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTTemperature().c_str());
});
對(duì)濕度重復(fù)相同的過(guò)程。
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTHumidity().c_str());
});
最后，我們可以啟動(dòng)服務(wù)器。
server.begin();
因?yàn)檫@是一個(gè)異步Web服務(wù)器，所以我們不需要在loop（）中編寫(xiě)任何內(nèi)容。
void loop(){
}
以上就是代碼的工作原理。
上載驗(yàn)證程序
現(xiàn)在，將代碼上傳到ESP32。確保選擇了正確的板和COM端口。
上傳后，以115200的波特率打開(kāi)串口監(jiān)視器。按ESP32復(fù)位按鈕。ESP32 IP地址應(yīng)在串口監(jiān)視器中打印。
Web服務(wù)器演示
打開(kāi)瀏覽器，輸入ESP32 IP地址。您的Web服務(wù)器應(yīng)顯示最新的傳感器讀數(shù)。
請(qǐng)注意，溫度和濕度讀數(shù)會(huì)自動(dòng)更新，而無(wú)需刷新網(wǎng)頁(yè)。
在本教程中，我們向您展示了如何使用ESP32構(gòu)建異步Web服務(wù)器以顯示來(lái)自DHT11或DHT22傳感器的傳感器讀數(shù)以及如何自動(dòng)更新讀數(shù)。
代碼手機(jī)電腦管理類(lèi)軟件開(kāi)發(fā)，其中可拖放使用的輸入框類(lèi)顯示元件包括：字符輸入框元件（Text Field）、多行文本輸入框元件（Text Area）、密碼輸入框元件（Password Field）、數(shù)字輸入框元件（Number Field）、日期輸入框元件（Date Field）、帶標(biāo)簽字符輸入框元件（Text Labeled Field）、帶標(biāo)簽數(shù)字輸入框元件（Number Labeled Field）、帶標(biāo)簽日期輸入框元件（Date Labeled Field）、帶標(biāo)簽下拉選擇菜單元件（Selection Labeled Field）
各類(lèi)輸入框元件：主要是提供用戶(hù)在前端輸入信息用，即放即用，這些元件直接顯示在前端。
1、屬性可以定義顯示的樣式，比如定義寬度大小、邊框顏色等，用法與其他元件一樣設(shè)定屬性的“html.style”值即可，同時(shí)也可以用“html.maxLength”定義輸入值的長(zhǎng)短，超過(guò)長(zhǎng)度則無(wú)法輸入：
輸入框元件屬性中樣式設(shè)定
2、輸入框因類(lèi)型不同，可輸入的數(shù)據(jù)形式固定，比如數(shù)字輸入框無(wú)法錄入文字字符；但字符輸入框可以輸入數(shù)字，數(shù)據(jù)是字符型的；密碼輸入框輸入時(shí)不顯示內(nèi)容但顯示占位符號(hào)；日期選框會(huì)出現(xiàn)一個(gè)日期選項(xiàng)板（日期格式可改為中文）：
日期輸入框在前端的效果
3、帶標(biāo)簽的輸入框只是提供了一個(gè)默認(rèn)的字符標(biāo)簽，命名后標(biāo)簽顯示名稱(chēng)；這個(gè)標(biāo)簽本身是一個(gè)與輸入框并行放置的文本顯示元件；在使用時(shí)也可以直接放一個(gè)字符常量顯示元件，外加不帶標(biāo)簽的輸入框；也可以對(duì)標(biāo)簽單獨(dú)進(jìn)行樣式定義處理：
帶標(biāo)簽的輸入框，標(biāo)簽顯示名稱(chēng)
4、輸入框中可以添加一個(gè)“<On Change>”的行業(yè)處理，當(dāng)輸入完成后回車(chē)或TAB鍵或光標(biāo)移出點(diǎn)擊其他位置時(shí)可以觸發(fā)邏輯處理，比如檢查字符輸入時(shí)是否要求輸入的郵箱字符包含有@符號(hào)，以及數(shù)字輸入時(shí)是否數(shù)字不為零，如果不包含或是零，則提示需重輸入：
輸入框添加一個(gè)邏輯行為
5、支持<Placeholder>、<Visible>、<Disabled>等H5標(biāo)簽使用：<Placeholder>是將一個(gè)常量文本放入，主要是提示輸入信息用；<Visible>可以用于復(fù)用模塊中，有些無(wú)需讓用戶(hù)看見(jiàn)或配合上第4點(diǎn)當(dāng)某個(gè)條件符合時(shí)隱去不顯示簡(jiǎn)化用戶(hù)作業(yè)讓界面也簡(jiǎn)單化，傳布爾值就可以（在常量元件中有是和否的常量）；<Disabled>可以作為是否不讓輸入任何內(nèi)容用，布爾值傳值給他就行：
輸入框中提示信息設(shè)定
提示信息用戶(hù)前端顯示
下拉選擇菜單元件（Selection Labeled Field）：
1、下拉選擇菜單元件與以上其他輸入元件一樣，沒(méi)有差別，可參考以上處理；
2、下拉選框的中的<Options>是選項(xiàng)，可放入多個(gè)內(nèi)容；可以為下拉框添加一個(gè)默認(rèn)的最常用的選項(xiàng)，如下：
下拉菜單選項(xiàng)設(shè)定
HTML代表超文本標(biāo)記語(yǔ)言（Hypertext Markup Language）。它是一種用于構(gòu)建網(wǎng)頁(yè)的標(biāo)記語(yǔ)言。HTML文件包含一組標(biāo)簽，這些標(biāo)簽用于定義網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容。瀏覽器讀取HTML文件，并根據(jù)標(biāo)記中的指示呈現(xiàn)網(wǎng)頁(yè)內(nèi)容。
HTML的主要作用是定義文本內(nèi)容、圖像、鏈接和其他媒體的排列方式，并提供交互元素，例如表單和按鈕。
每個(gè)HTML文檔都應(yīng)該遵循以下基本結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<title>網(wǎng)頁(yè)標(biāo)題</title>
</head>
<body>
<!-- 內(nèi)容在這里 -->
</body>
</html>
讓我們逐步解釋這個(gè)結(jié)構(gòu)：
HTML標(biāo)簽是由尖括號(hào)括起來(lái)的名稱(chēng)，例如<p>表示段落，<img>表示圖像。標(biāo)簽通常成對(duì)出現(xiàn)，有一個(gè)開(kāi)始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽。例如：
<p>這是一個(gè)段落。</p>
<p>是開(kāi)始標(biāo)簽，</p>是結(jié)束標(biāo)簽，文本位于兩個(gè)標(biāo)簽之間。標(biāo)簽定義了元素的類(lèi)型和結(jié)構(gòu)。
有些HTML標(biāo)簽是自封閉的，不需要結(jié)束標(biāo)簽，例如<img>用于插入圖像。
在HTML中，你可以使用注釋來(lái)添加說(shuō)明性文字，注釋不會(huì)在瀏覽器中顯示。HTML注釋使用<!--開(kāi)頭和-->結(jié)尾，如下所示：
<!-- 這是一個(gè)注釋 -->
注釋通常用于添加文檔說(shuō)明、調(diào)試代碼或標(biāo)記未來(lái)的修改。
HTML中的文本通常包含在段落、標(biāo)題、列表等元素中。以下是一些常見(jiàn)的文本元素：
示例：
<p>這是一個(gè)段落。</p>
<h1>這是一個(gè)標(biāo)題</h1>
<p><strong>這是強(qiáng)調(diào)文本。</strong></p>
<p><em>這是斜體文本。</em></p>
<p>訪(fǎng)問(wèn)<a href="https://www.example.com">示例網(wǎng)站</a></p>
要在網(wǎng)頁(yè)中插入圖像，可以使用<img>標(biāo)簽。它是一個(gè)自封閉標(biāo)簽，需要指定圖像的src屬性來(lái)指定圖像文件的路徑。
示例：
htmlCopy code
<img src="image.jpg" alt="圖像描述">
通過(guò)使用<a>標(biāo)簽，可以在網(wǎng)頁(yè)中創(chuàng)建鏈接。鏈接通常包含在文本或圖像中，并使用href屬性指定目標(biāo)URL。
示例：
<a href="https://www.example.com">訪(fǎng)問(wèn)示例網(wǎng)站</a>
HTML支持有序列表（<ol>）、無(wú)序列表（<ul>）和定義列表（<dl>）。
無(wú)序列表使用<ul>標(biāo)簽定義，每個(gè)列表項(xiàng)使用<li>標(biāo)簽。
示例：
<ul>
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ul>
有序列表使用<ol>標(biāo)簽定義，每個(gè)列表項(xiàng)使用<li>標(biāo)簽。
示例：
<ol>
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
<li>第三項(xiàng)</li>
</ol>
定義列表使用<dl>標(biāo)簽定義，每個(gè)定義項(xiàng)目使用<dt>標(biāo)簽定義術(shù)語(yǔ)，使用<dd>標(biāo)簽定義描述。
示例：
<dl>
<dt>術(shù)語(yǔ)1</dt>
<dd>描述1</dd>
<dt>術(shù)語(yǔ)2</dt>
<dd>描述2</dd>
</dl>
HTML表單允許用戶(hù)與網(wǎng)頁(yè)進(jìn)行交互，提交數(shù)據(jù)。以下是HTML表單的基本元素：
<form>元素用于創(chuàng)建表單，可以包含文本字段、復(fù)選框、單選按鈕、下拉列表等。
示例：
<form action="submit.php" method="post">
<!-- 表單元素在這里 -->
</form>
輸入字段用于接收用戶(hù)輸入的數(shù)據(jù)，常見(jiàn)的輸入字段類(lèi)型包括文本框、密碼框、單選按鈕、復(fù)選框等。
文本框使用<input>標(biāo)簽，type屬性設(shè)置為"text"。
示例：
<input type="text" name="username" placeholder="用戶(hù)名">
密碼框使用<input>標(biāo)簽，type屬性設(shè)置為"password"。
示例：
htmlCopy code
<input type="password" name="password" placeholder="密碼">
單選按鈕使用<input>標(biāo)簽，type屬性設(shè)置為"radio"。
示例：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
復(fù)選框使用<input>標(biāo)簽，type屬性設(shè)置為"checkbox"。
示例：
<input type="checkbox" name="subscribe" value="yes">訂閱新聞
下拉列表使用<select>和<option>標(biāo)簽創(chuàng)建。<select>定義下拉列表，而<option>定義選項(xiàng)。
示例：
<select name="country">
<option value="us">美國(guó)</option>
<option value="ca">加拿大</option>
<option value="uk">英國(guó)</option>
</select>
HTML用于定義網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容，但要使網(wǎng)頁(yè)看起來(lái)更吸引人，需要使用CSS（層疊樣式表）。CSS允許你定義字體、顏色、布局等樣式。
可以在HTML元素內(nèi)部使用style屬性來(lái)定義內(nèi)聯(lián)樣式。
示例：
<p style="color: blue; font-size: 16px;">這是一個(gè)藍(lán)色的段落。</p>
外部樣式表將樣式規(guī)則保存在獨(dú)立的CSS文件中，并通過(guò)<link>標(biāo)簽將其鏈接到HTML文檔。
示例（style.css）：
/* style.css */
p {
color: blue;
font-size: 16px;
}
在HTML中鏈接外部樣式表：
<link rel="stylesheet" type="text/css" href="style.css">
這使得可以在整個(gè)網(wǎng)站上共享相同的樣式。
HTML是構(gòu)建現(xiàn)代網(wǎng)頁(yè)的基礎(chǔ)。通過(guò)學(xué)習(xí)HTML的基本語(yǔ)法和元素，你可以創(chuàng)建吸引人且功能強(qiáng)大的網(wǎng)頁(yè)。無(wú)論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來(lái)呈現(xiàn)內(nèi)容和實(shí)現(xiàn)用戶(hù)交互。
這篇文章提供了HTML的基礎(chǔ)知識(shí)，但HTML是一個(gè)廣泛的主題，還有許多高級(jí)特性和技巧等待你探索。希望這篇文章對(duì)你入門(mén)HTML有所幫助，讓你能夠開(kāi)始創(chuàng)建自己的網(wǎng)頁(yè)。繼續(xù)學(xué)習(xí)和實(shí)踐，你將成為一個(gè)熟練的網(wǎng)頁(yè)開(kāi)發(fā)者。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
