Вопрос по html – Элемент ul никогда не может быть дочерним элементом элемента p

29

Почему у нас никогда не может быть элемента ul в качестве дочернего элемента элемента p? Я сделал веб-страницу со следующим кодом

<p> some text
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
</p>

здесь элемент ul является дочерним элементом элемента p. Однако во всех основных браузерах (Chrome, Firefox, Internet Explorer) (все последние версии) он интерпретируется следующим образом.

<p> some text</p>
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
<p></p>

Я проверил это, щелкнув правой кнопкой мыши по элементу ul (в chrome) и выбрав опцию проверки элемента. Я видел это в chrome, но другие 2 браузера также вели себя одинаково (css selecter 'p ul' не работал).

Почему это так? Кто-нибудь может рассказать общий случай, когда такие изменения браузером происходят?

Возможный дубликатShould ol/ul be inside <p> or outside? TylerH

Ваш Ответ

3   ответа
4

<p> могут иметь только встроенные элементы в качестве дочерних элементов и не иметь блочных элементов (см., например, вMDN). <ul> с другой стороны, это элемент уровня блока (MDN)!

Причина, по которой браузер интерпретирует ваш код так, как вы видели, кроется в спецификации парсинга HTML5. В спецификации приведен пример, очень похожий на ваш:что за ссылка.

Еще один интересный связанный вопрос может быть таким:HTML: включить или исключить необязательные закрывающие теги?

5

p элемент может содержать только текст и текстовую разметку, а не список, например. Поэтому браузеры подразумевают закрытие</p> помечать когдаp элемент открыт и начальный тег для элемента уровня блока, как<ul>, встречается. В вашем примере</p> тег после</ul> бездомный и обычно игнорируется.

45

Спецификация HTML, в котором четко указано, что размещение списков в элементе абзаца запрещено, а также приведены некоторые примеры того, что можно сделать:

List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up.

For instance, this fantastic sentence has bullets relating to

wizards, faster-than-light travel, and
telepathy,

and is further discussed below.

The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this speciication: one before the list, one for each bullet, and one after the list.

The markup for the above example could therefore be:

  <p>For instance, this fantastic sentence has bullets relating to</p> 
   <ul>
       <li>wizards,  
       <li>faster-than-light travel, and  
       <li>telepathy, 
   </ul>
   <p>and is further discussed below.</p>

Authors wishing to conveniently style such "logical" paragraphs consisting of multiple "structural" paragraphs can use the div element instead of the p element.

Thus for instance the above example could become the following:

   <div>For instance, this fantastic sentence has bullets relating to
   <ul>
     <li>wizards,  
     <li>faster-than-light travel, and  
     <li>telepathy,
   </ul> 
   and is further discussed below.</div> 

This example still has five structural paragraphs, but now the author can style just the div instead of having to consider each part of the example separately.

@hakermania Редактор манипулирует DOM на лету (через JS). Chrome читает HTML и строит DOM из него - это другой сценарий.
Согласно whatwg.org, это действительно правильный ответ. К сожалению, MDN отправляет запутанное сообщение со своимиul/ol описание о том, чтоPermitted parents: Any element that accepts flow content. (developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) Список элементов содержимого потока содержитp также. Очень запутанно.
Значение (html-код) редактора указывается в html-файле (представьте себе,<textarea> <HTML CODE HERE> </textarea>), а затем код js редактора вызываетсяtextarea элемент. Это означает, что браузер имеет первое слово в HTML-код в текстовой области иthen редактор. Так что, если хром преобразовал<p><ol>...</ol></p> в<p></p><ol>...</ol> тогда редактор увидит последнее значение и не будет знать о первом. Я думаю, что что-то еще происходит под капотом, но я не могу это найти.
@hakermania Что бы ни было внутри тега textarea, оно не будет проверяться браузером как HTML - оно рассматривается как обычная строка.
Я использую trumbowyg и внутри редактора Chrome позволяетol Внутриp: i.imgur.com/1uyqtNO.png , За пределами HTML редактора у него та же проблема, что и у OP. Редактор дает мне HTML-код, и я должен представить его вне его, поэтому он ломается (потому что он имеетol Внутриp). Как редактор допускает это сам по себе?

Похожие вопросы