Warum produziert blue dash

Question

Ich arbeite an einem IoT-Projekt, das ein ESP8266 WIFI-Modul verwendet. Für diejenigen, die nicht vertraut sind, genügt es zu sagen, es ist ein SOC mit WLAN-Funktionen, die im Bahnhof oder AP-Modus verwendet werden können. Es gibt mehrere Möglichkeiten, Programme auf dieses kleine Wunder zu laden, ich benutze eine NodeMCU-Plattform mit Lua.

Jetzt versucht das Fleisch des Problems, über den Lua-Interpreter eine HTML-Zeichenfolge hochzuladen, um als eine Webseite für IoT-Kontrolle angezeigt zu werden. Ich hatte dies funktioniert, musste aber das System neu aufbauen, um weitere Kontrollpunkte hinzuzufügen. Abgesehen von Problemen mit dem Hochladen (Probleme mit dem Lua-Interpreter), die keine Aufmerksamkeit erfordern, habe ich Probleme mit dem String, der zum Senden an einen Browser erstellt wird, wenn auf ihn zugegriffen wird.

Ich habe im Grunde 2 Tasten nebeneinander und wollte Trennung mit & nbsp. Das funktionierte ursprünglich, aber jetzt produziert er einen blauen Strich in allen Browsern habe ich tried.The String gesendet werden soll, wie folgt:

<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>" 

Merkwürdig, wenn ein Ausschnitt des Programms den HTML-Code Zeichenfolge enthält gespeichert zu einer Datei und geöffnet mit einem Browser sieht es gut aus ?! Irgendeine Einsicht?

Answer 1

Merkwürdig, wenn ein Ausschnitt des Programms den HTML-Code Zeichenfolge enthält in einer Datei gespeichert wird und mit einem Browser geöffnet es gut aussieht ?!

Nein, wenn Sie Bereinigungs alle Syntaxprobleme ist es nicht gut aussehen mehr:

Ihr Problem hat nichts mit NodeMCU, esplorer et.al. zu tun Der Code ist einfach nicht gültig HTML5 nach dem HTML5 Spec Document from W3C:

Inhalt Modell:Transparent, aber es darf keine interactive content Nachkomme sein.

Das a-Element kann um ganze Absätze, Listen, Tabellen und sogar ganze Abschnitte gewickelt werden, solange sich darin kein interaktiver Inhalt befindet (z. B. Schaltflächen oder andere Links).

Sie können <button> in <a> nicht verschachteln. Stattdessen wickelt diese Schaltfläche in einem <form> Tag als solche:

<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> 

Doch was sollte man IMO wirklich einfachen HTML-Anker

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

und Stil diese beiden Links wie Tasten (zB https://designshack.net/?p=25423 oder How to make <a href=""> link look like a button? tut, ist mit).