在制作教程的时候，为了显示出湿度，将温度计的网页界面进行复制，改成湿度计。在简单的复制中发现一些问题。如下是上次制作的温度监控界面，本次复制一个温度计作为湿度计。

如下段代码是前段的温度计界面，这个在前面的物联网WiFi温度监控中有提到过。这次需要复制出来显示湿度，形成温湿度的监控。

很简单，将这段代码复制之后，则会出现两个温度计复制后的结果是，这两个温度计并不在同一行上，因此这就是要解决的一个问题。

查阅资料，在原本的代码外围增加div，并且设置style="float:left;width:200px;"，其中float:left;是让第一个温度计居左，width:200px;是这是温度计的宽度，否则两个温度计会挨的特别近。

以上就完成了两个温度计的复制，接下来针对第二个温度计作为湿度计进行内容的修改。湿度范围是0到100%，其实这个应该根据DHT11的湿度范围20%到90%更改。

接下来对湿度数据进行提取，之前的温度计中已经接收到数据，所以非常方便。在js代码中获取到前端的控件，包括湿度计高度和数据显示。如下端代码的range2和humidity。

代码中的range2和humidity分别对应湿度计数值和高度。

最终接收到代码数据。

通过测试，实现了单片机控制DHT11采集温湿度数据，控制WiFi模块上传温湿度数据到网页进行远程监控。