Для целей данного обсуждения пробелы определены здесь: https://infra.spec.whatwg.org/#ascii-whitespace
Пробел ASCII равен U + 0009 TAB, U + 000A LF, U + 000C FF, U + 000D CRили U + 0020 SPACE.
Неразрывные пробельные символы и другие символы Unicode обрабатываются очень похоже на любой другой непробельный символ. (U + 000B может также использоваться в качестве пробела, даже если он не указан выше.)
Итак, из того, что я до сих пор определил, теперь я лучше понимаю обработку пробелов в HTML:
<textarea> - это особый случай, когда почти весь пробел внутри является значительным, поскольку он напрямую влияет на значение, назначенное текстовой области в качестве поля ввода. В то время как рендеринг этого элемента можно изменить с помощью CSS, пробелы остаются значимыми для значения ввода независимо от рендеринга. <pre>, конечно, специально разработан, чтобы сделать почти все пробелы, значимые в том, как будет отображаться текст. - Причина, по которой я использовал слово «почти» выше, заключается в том, что начальные и конечные символы новой строки являются исключением. Один начальный символ новой строки или один завершающий символ новой строки будут игнорироваться. Две новые строки (начальная или конечная) требуются для отображения одной новой строки (или, в случае
<textarea>, чтобы одна новая строка стала частью входного значения). Из того, что я могу сказать, эта специальная обработка новой строки выходит за рамки того, что может быть указано с помощью CSS. Внутри любого другого элемента одиночные символы новой строки вступают в силу, если вы используете CSS whitespace: pre и относящиеся к ним стили. (См. Пример здесь: https://jsfiddle.net/kshetline/a510tq4v)
Теги
<script> и <style>, очевидно, представляют собой особые случаи, имеющие специфическое для языка значение пробела. Однако, за исключением содержимого значений в кавычках и новой строки, необходимой в конце комментария строки JavaScript (//), все пробелы могут быть либо сокращены до одного пробела, либо пропущены там, где синтаксически не требуется.
Пробелы внутри разделов CDATA следует оставить как есть, хотя они могут отображаться или не отображаться в зависимости от обстоятельств.
Все пробелы являются значимыми внутри указанных значений атрибутов.
Если оставить в стороне вышеуказанные случаи или применить свойство CSS whitespace, все смежные последовательности пробелов в противном случае будут обрабатываться одинаково: как один пробел. Три пробела, двадцать новых строк, дюжина чередующихся символов перевода строки и табуляции - все это одно и то же.
Не допускается никаких пробелов между <, который запускает тег, и именем тега, например, <br> работает, но < br> - нет. Не вдаваясь в подробности, вполне очевидно, что дополнительный интервал может помешать правильному синтаксическому анализу конечного тега, комментария и т. Д.
Пробел необходим синтаксически для отделения имен тегов отимена атрибутов, а также имена атрибутов из других имен атрибутов и значений атрибутов, когда цитирование не дает четкого разделения.
Теперь вот реальный смысл предмета, который я пытался найтидля выполнения переформатирования HTML, не влияя на то, как HTML обычно отображается в большинстве браузеров:
В отличие от того, что я буду называть элементами
block , элементами форматирования, такими как
<b> или
<code> или
<strong>, а также элементом
<span> являются
встроенные элементы. Вот список встроенных элементов, как это показано в коде, над которым я сейчас работаю, полученный в основном из настроек HTML-форматирования Intellij IDEA:
inline: new Set(['a', 'abbr', 'acronym', 'b', 'basefont', 'bdo', 'big', 'br', 'cite', 'cite', 'code', 'dfn',
'em', 'font', 'i', 'img', 'input', 'kbd', 'label', 'q', 's', 'samp', 'select', 'small', 'span',
'strike', 'strong', 'sub', 'sup', 'text', 'tt', 'u', 'var']),
Для текста внутри встроенных элементов все непрерывные внутренние пробелы рассматриваются как одно пространство. Начальное пространство обрезается, когда оно находится в начале элемента блока или сразу после элемента блока. Конечный пробел обрезается, когда он находится в конце элемента блока или непосредственно предшествует элементу блока. Для целей рендеринга раздел CDATA рассматривается как встроенный, если речь идет о соседнем тексте.
Рассмотрим:
<p> Hello,<i> world!</i> </p> It's Tuesday.
Пробел перед "Hello""не будет отображено, потому что это в начале блока. Пространство перед «миром», однако, будет оказано. Пробел после </i> не будет отображаться, потому что он находится в конце блока. Пробел перед «Это» не будет отображаться, потому что он следует за блоком.
Теперь рассмотрим это:
<p>I'm <b> not </b> going to pay a lot for this muffler.</p>
Пробел после «I»m "и пробел перед" not "вместе будут рассматриваться как один пробел. Так же будет пробел после «не» и пробел перед «уходом». Какие места сохранены, а какие выброшены? Небольшой стиль CSS, дающий <b> цвет фона, показывает ведущие пробелы, отбрасываемые в пользу конечных пробелов:
Это выглядит непротиворечивымиспользуя Chrome, Firefox, Safari, IE и Edge.
А теперь действительно простой пример:
<div> tree
bark </div>
Ничто из этого начального или конечного пробелов не имеет значения - оно не будет отображаться. Без пробела, без пробела, без дополнительных разрывов строк. Просто "кора дерева".