為什么會產生藍色破折號

Question

我正在使用ESP8266 WIFI模塊的IoT項目中工作。 對於那些不熟悉的人，可以說這是具有wifi功能的SOC，可以在站點或AP模式下使用。 有幾種方法可以將程序上傳到這個小奇跡，我正在使用帶有Lua的NodeMCU平台。

現在，問題的症結在於嘗試通過Lua解釋器上載HTML字符串，以將其顯示為用於IoT控制的網頁。 我已經進行了這項工作，但是必須重新構建系統以添加更多控制點。 除了不需要引起注意的上載問題（Lua解釋器的問題）之外，我還遇到了將String構建為在訪問時發送給瀏覽器的問題。

我基本上並排有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代碼字符串的程序片段保存到文件中並用瀏覽器打開時，看起來還不錯嗎？ 有見識嗎？

Answer 1

奇怪的是，將包含HTML代碼字符串的程序片段保存到文件中並用瀏覽器打開時，看起來還不錯嗎？

不，一旦清理了所有語法問題，它看起來就不再好了：

您的問題與NodeMCU，ESPlorer等無關。 根據W3C的HTML5規范文檔，您的代碼根本就是無效的HTML5：

內容模型： 透明 ，但必須沒有交互式內容后代。

只要其中沒有交互內容（例如按鈕或其他鏈接），該元素可以被包裝在整個段落，列表，表格等等，甚至是整個部分中。

您不能將<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="">鏈接看起來像按鈕？ ）。