[Day18] Esp32用STA mode + Relay - (程序码讲解)

1.前言

今天就不废话拉，直接进入主题(~~大家应该都去报复性出游了吧~~)。

2.html

其实HTML目前还有一版为HTML5，而HTML5由 W3C 与 WHATWG所共同制定的新标准，最核心技术包含HTML、CSS、JavaScript，可以让使用者不需安装额外插件，就可以绕使用者观赏到丰富的叶面内容，除此之外HTML也提供新语法、API、动画、多媒体、样式设计及跨平台等优势可另网页更多元化。

HTML原型最早在1980年制定出来，最初主要用於共享文件，而内容多为文字与连结，架构较为单纯简单。
而HTML在一个网页里扮演的角色就像是他的骨架，负责规划出网页内容与架构。

到这边都是一堆介绍，所以现在让各位看一下HTML的语法都是长怎样，就请大家现在按下F12，各位应该会看到像是下方那张图一样

图片取自：使用者拍摄

能看到许多程序码都有标签<></>两两一组

<p>Hello World!!!</p>

<>，为起始标签
</>，为结束标签
内容，中间的Hello World!!!为内容
元素，由起始标签、结束标签及内容所组成

而元素还可以有属性，如下方范例

<p class="test">Hello World</p>

当然属性可以设定许多东西，如字体、字型大小、颜色、位置等种类。

像是上方图片下面的栏位，分别设定位置、高度、字体、行高、颜色、字型大小、背景颜色，而这部份都是CSS的部分。

HTML就像是人，CSS像是衣服一样，装饰着人，而JavaScript就人所做的动作，控制人的动作。

而HTML的基本框架

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
      Hello World
  </body>
</html>

现在讲完这些，那就可以把这些知识带入之前那些程序码当中。

            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>ESP32 Web Server</h1>");
            
            // Display current state, and ON/OFF buttons for GPIO 22  
            client.println("<p>GPIO 22 - State " + output22State + "</p>");
            // If the output22State is off, it displays the ON button       
            if (output22State=="off") {
              client.println("<p><a href=\"/22/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/22/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 23  
            client.println("<p>GPIO 23 - State " + output23State + "</p>");
            // If the output23State is off, it displays the ON button       
            if (output23State=="off") {
              client.println("<p><a href=\"/23/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/23/off\"><button class=\"button button2\">OFF</button></a></p>");
            }
            client.println("</body></html>");

94-96行，HTML开头

99-102行，设置按钮的CSS样式

105行，进入页面的文字(那个大文字)

108-114行，控制GPIO 22的按钮状态(ON/OFF)

117-123行，控制GPIO 23的按钮状态(ON/OFF)

124行，HTML结尾语句

如果对HTML有兴趣可以上网查询，有许多教学，那我这边也稍微推荐一个HTML教学

欢迎交流

好了，终於花了4篇时间，把程序码大部分的功能都讲解各位听了，除此之外还有一些程序基本观念或是一些小介绍跟大家说，希望可以帮助到各位的进步，那这次输出元件只会介绍到LED及继电器(Relay)，其它可以留给各位慢慢玩，那下一篇会如之前预告相同，开始进入读取资料的篇章，一样会有AP mode的与STA mode，除此之外还会有结合其它服务去进行推播等功能些，希望大家可以继续关注拉，我们明天见拉~

<<: Day4 横空出世的 kernel_clone

>>: [Day 14] 实作 API Role-Based Authorization

[Day18] Esp32用STA mode + Relay - (程序码讲解)

1.前言

2.html

欢迎交流

[Day29] 沟通之术 - 老板篇

[ Day 9 ] - 函式

Day15 Gin's Router And RESTful API

来做一个简单的 To-do List 吧！ (上)

android studio 30天学习笔记-day 1 - 前言

day30: 完赛了，做个总结吧

免下载、免费！Windows 10 内建的萤幕录影工具总整理

为了转生而点技能-JavaScript，day11(函式内的变数、Callback function

#06 No-code 之旅 — 用 Next.js 解决前後端？API Routes 简介

在 Fedora 34 上安装 VirtualBox 6.1.26