为什么会产生蓝色破折号答案

【问题标题】：Why does   produce blue dash为什么会产生蓝色破折号
【发布时间】：2016-09-10 08:42:55
【问题描述】：

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

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

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

<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 代码字符串的程序的 sn-p 保存到文件并使用浏览器打开时，它看起来还不错？！有什么见解吗？

【问题讨论】：

抱歉，在移动设备上，所以我无法更好地格式化。选择代码并按 Ctrl+K 使其成为代码块
有点像被选中了？
应该使用 CSS，而不是 &nbsp。为按钮设置边距：margin: 10px;
@flagtrax 可以关闭还是需要其他输入？

标签： html iot esp8266 nodemcu esplorer

【解决方案1】：

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

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

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

内容模型：Transparent，但不能有interactive content的后代。

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 或 How to make <a href=""> link look like a button?）。

【讨论】：