Браузер автоматически добавляет <a>-Tag без JavaScript

Я только что столкнулся с проблемой на немного большем сайте, чем в приведенном ниже примере, который заставил меня провести расследование в течение нескольких часов, пока я не нашел причину ошибки. Моя проблема заключалась в том, что браузер автоматически появлялся <a>-Заголовки без причины.

Допустим, у меня есть некоторый HTML-код, который выглядит следующим образом:

<a href="#">Link<a/>
<!-- Some code-magic; after a while you have something like: -->
<div>Not a link</div>

Конечно, проблема в этом случае довольно очевидна. Но если страница немного сложнее, и вы не заметите неправильное закрытие <a>-Тег выше, у тебя будет плохое время.

Зачем? Ну, это легко показать. Вы можете ожидать, что все, что следует, кликабельно. Это на самом деле правда. Но - и это то, что я не знал, - добавляет браузер <a>-Tags после загрузки страницы. Это означает, что в инспекторе (протестированном в Chrome и Firefox) вы найдете что-то вроде этого:

<a href="#">Link</a>
<a>
    <!-- Some code-magic; after a while you have something like: -->
    <div>Not a link</div>
</a>

Интересно, а? Браузер закрывает <a>-Tag правильно на первой строке и открывает новую вокруг div. Вы можете догадаться, что я начал отлаживать все JavaScripts на странице (а их было много), потому что я думал, что JavaScript - это единственное, что изменяет код после того, как страница была извлечена с сервера.

Ну, теперь я знаю, это не единственное. При попытке отладки этой проблемы я не нашел в интернете никакой информации об этом, поэтому я решил поделиться своими знаниями с парнем, у которого точно такая же проблема в будущем (и мы все знаем: он скоро будет там)).

Но есть еще один вопрос без ответа: почему? Я не вижу причины, по которой Браузер должен это исправить и создать новые теги. Это не имеет смысла для меня.

Источник

2 ответа

Решение

Фактический вопрос должен быть: зачем вам намеренно кормить браузер неверным HTML?

Но вернемся по теме. Исторически HTML был языком разметки. Люди без понятия DOM будут писать HTML, такие как:

<B><U>hi, </B> shall I be underlined or not?</U>

Выше явно недействительный HTML. Тем не менее, браузер не будет рвать, если вы кормите его с недопустимым HTML. Он попытается восстановить документ так, как считает автор.

Элементы в DOM (что показывает инспектор) могут иметь только один родительский элемент. Логично, что <U> должен быть закрыт до <B> закрыто. Но <U> не было закрыто автором, поэтому браузер предполагает, что остальная часть текста тоже должна быть подчеркнута. Следовательно, неверный HTML восстанавливается примерно до следующей структуры DOM:

<B><U>hi, </U></B><U> shall I be underlined or not?</U>

И в вашем конкретном случае, <a> теги не могут быть автоматически закрыты в HTML, поэтому:

<a>...<a/>

/ интерпретируется как синтаксический сахар, и браузер считает, что вы открыли секунду <a> элемент без закрытия первого. Скорее всего, он будет вызывать якорный элемент во всем документе, пока не встретится необходимое закрытие </a>Находится в процессе восстановления.

Источник

Две вещи:

  1. <a/> может интерпретироваться как попытка самозакрывающегося тега привязки, так что фактически новая привязка
  2. Вложенные привязки недопустимы, поэтому браузер закрывает первую перед открытием второй.

Однако у меня нет никаких доказательств этого, это в значительной степени предположение.

Больше предположений: это, вероятно, зависит от браузера и связано с тем, почему браузеры автоматически создают <tbody> теги в таблицах. Они просто уже знают, если нет <thead>, автор сайта намерен использовать <tbody>,

Так как только самозакрывающийся <a/> появился, он закончил незамкнутый якорь и начал новый. Хотя с тех пор <a> должен быть контейнером, он не может быть самодействующим. Затем якорь заканчивается в соответствии с правилами XHTML, т.е. закрывает содержащиеся теги перед контейнерами.

Это потребует большого количества запросов как о спецификациях HTML, так и об индивидуальном поведении браузера.

Источник
Другие вопросы по тегам