Почему появляется синяя черточка

Я работаю над проектом IoT, в котором используется модуль WIFI ESP8266. Для тех, кто не знаком, достаточно сказать, что это SOC с возможностями Wi-Fi, который можно использовать в режиме станции или точки доступа. Есть несколько способов загружать программы в это маленькое чудо, я использую платформу NodeMCU с Lua.

Теперь суть проблемы заключается в попытке загрузить через интерпретатор Lua строку HTML, которая будет отображаться в виде веб-страницы для управления IoT. У меня это работало, но мне пришлось перестроить систему, чтобы добавить больше контрольных точек. Помимо проблем с загрузкой (проблемы с интерпретатором Lua), которые не требуют внимания, у меня есть проблемы со строкой, созданной для отправки в браузер при доступе.

В основном у меня есть две кнопки рядом, и я хотел разделить их с помощью  . Первоначально это работало, но теперь во всех браузерах, которые я пробовал, отображается синяя черта. Строка, которую нужно отправить, выглядит следующим образом:

<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-кода, сохраняется в файл и открывается в браузере, он выглядит нормально?! Любое понимание?


html iot esp8266 nodemcu esplorer
person flagtrax    schedule 14.05.2016    source источник
comment
Извините, на мобильном, так что лучше отформатировать не могу. Выберите код и нажмите Ctrl+K, чтобы сделать его блоком кода.   -  person rockerest    schedule 14.05.2016
comment
Вроде как выбирается?   -  person dmi3y    schedule 14.05.2016
comment
Для этого следует использовать CSS, а не  . Поставьте отступы к кнопкам: margin: 10px;   -  person dec    schedule 14.05.2016
comment
@flagtrax это можно закрыть или вам нужен другой вклад?   -  person Marcel Stör    schedule 18.05.2016

Ответы (1)


arrow_upward
2
arrow_downward

Как ни странно, когда фрагмент программы, содержащий строку HTML-кода, сохраняется в файл и открывается в браузере, он выглядит нормально?!

Нет, как только вы очистите все синтаксические проблемы, это больше не будет выглядеть нормально:

введите здесь описание изображения

Ваша проблема не имеет ничего общего с NodeMCU, ESPlorer и др. Ваш код просто не соответствует стандарту HTML5 согласно документу спецификации HTML5. из W3C:

Модель содержания: прозрачная, но не должен быть потомком интерактивного содержимого.

Элемент 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>

Однако то, что вам действительно следует делать, это использование простых 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=› похожей на кнопку?).

person Marcel Stör    schedule 14.05.2016