1

我正在开发一个使用 ESP8266 WIFI 模块的物联网项目。对于那些不熟悉的人，可以说它是一个具有 wifi 功能的 SOC，可以在站或 AP 模式下使用。有几种方法可以将程序上传到这个小奇迹，我使用的是带有 Lua 的 NodeMCU 平台。

现在问题的核心是尝试通过 Lua 解释器上传一个 HTML 字符串，以显示为物联网控制的网页。我有这个工作，但必须对系统进行一些重建以添加更多控制点。除了不需要注意的上传问题（Lua 解释器的问题）之外，我还遇到了在访问时发送到浏览器的字符串问题。

我基本上有 2 个并排的按钮，并希望使用   进行分离。这本来是可行的，但现在它在我尝试过的所有浏览器中都会产生一个蓝色破折号。要发送的字符串如下：

<p style= "font-size:90px;">
  Rear Left &nbsp;<a href=\"?pin=ON1\"><button style= \"width:150px;height:150px;font-size:90px;background:green;\">On</button></a>&nbsp;<a href=\"?pin=OFF1\"><button style= \"width:150px;height:150px;font-size:90px;background-color:red;">Off</button></a>
</p>"

奇怪的是，当包含 HTML 代码字符串的程序片段被保存到文件中并用浏览器打开时，它看起来还不错？！有什么见解吗？

4

1 回答 1

2

奇怪的是，当包含 HTML 代码字符串的程序片段被保存到文件中并用浏览器打开时，它看起来还不错？！

不，一旦你清理了所有的语法问题，它看起来就不再好了：

在此处输入图像描述

您的问题与 NodeMCU、ESPlorer 等无关。根据W3C 的 HTML5 Spec Document，您的代码根本不是有效的 HTML5 ：

内容模型： 透明，但不能有交互式内容后代。

只要其中没有交互式内容（例如按钮或其他链接），a 元素可以围绕整个段落、列表、表格等，甚至整个部分。

你不能嵌套<button>在<a>. 而是将该按钮包装在<form>标签内，如下所示：

<p style="font-size:90px; display: inline">
  Rear Left
  <form href="?pin=ON1" style="display: inline" method="get">
    <button style="width:150px;height:150px;font-size:90px;background:green;">On</button>
  </form>
  &nbsp;
  <form href="?pin=OFF1" style="display: inline" method="get">
    <button style="width:150px;height:150px;font-size:90px;background-color:red;">Off</button>
  </form>
</p>

但是，IMO 真正应该做的是使用纯 HTML 锚

<p style="font-size:90px;">
  Rear Left
  <a href="?pin=ON1">On</a>
  <a href="?pin=OFF1">Off</a>
</p>

并将这两个链接设置为按钮（例如https://designshack.net/?p=25423或如何使 <a href=""> 链接看起来像按钮？）。

于 2016-05-14T12:35:29.200 回答