Как браузер вставляет HTML и заголовок?

#html #webstorm

Вопрос:

Я создал HTML-файл в Webstorm my-file.html

 <body>
    hi
</body>
 

Я замечаю, что браузер вставляет теги html и head

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

Как и почему браузер вставляет это?

Комментарии:

1. HTML-страница должна иметь тип документа, элемент, элемент и элемент. html head body Тип документа технически необязателен, но его всегда следует включать, чтобы предотвратить нежелательное поведение (см. developer.mozilla.org/en-US/docs/Web/HTML/… ).

2. Итак, chrome просто вставляет это от моего имени, если я не укажу это?

3. Да, хороший браузер попытается простить многие грехи, такие как неправильно вложенные или незамкнутые теги. Причина заключается в первую очередь в том, чтобы улучшить работу пользователя. Вопрос » как » на самом деле не подходит для этого места.

Ответ №1:

Современные браузеры следуют алгоритму синтаксического анализа, описанному в стандарте HTML living, который отличается высокой устойчивостью к ошибкам. Он автоматически вставит необходимые теги, отсутствующие закрывающие теги и так далее, если они отсутствуют. Например:

 <title>title</title>
<p>para
 

Анализирует следующие элементы DOM:

 <html><head><title>title</title>
</head><body><p>para</p></body></html>
 

ДЕМОНСТРАЦИЯ

 const textarea = document.querySelector('textarea')

const update = () => {
    const parser = new DOMParser()
    const doc = parser.parseFromString(textarea.value, 'text/html')

    document.querySelector('pre').textContent =
        doc.documentElement.outerHTML
}

textarea.addEventListener('input', update)
update() 
 textarea { width: 100%; min-height: 100px; } 
 <textarea><title>Edit me!</title>
<p>para</textarea>

<pre></pre>