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變量中?，F在，我們將遍歷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

內聯樣式

外部樣式表

總結

您的項目需求

什么是HTML？