ul元素永远不能是p元素的子元素

Question

为什么我们永远不会将ul元素作为ap元素的子元素？我用以下代码制作了一个网页

<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中)并选择inspect元素选项来检查它.我在chrome中看到了它,但其他2个浏览器也表现得相同(css selecter'p ul'并不能很好地工作).

为什么会这样？任何人都可以告诉浏览器发生此类更改的一般情况吗？

Answer 1

请检查HTML规范,该规范明确指出禁止在段落元素中放置列表,并举例说明可以做什么:

列表元素(特别是ol和ul元素)不能是p元素的子元素.因此,当一个句子包含项目符号列表时,人们可能想知道它应该如何标记.

例如,这个梦幻般的句子有子弹有关

• 向导,
• 快于光的旅行,和
  
• 心灵感应,

并在下面进一步讨论.

解决方案是认识到用HTML术语表示的段落不是逻辑概念,而是结构概念.在上面的奇妙示例中,实际上有五个段落由此规范定义:一个在列表之前,一个用于每个子弹,一个在列表之后.

因此,上述示例的标记可以是:

  <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>

希望方便地设计由多个"结构"段落组成的这种"逻辑"段落的作者可以使用div元素而不是p元素.

因此,例如上面的例子可能变成如下:

   <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> 

这个例子仍然有五个结构段落,但是现在作者可以只设置div而不必分别考虑示例的每个部分.

Answer 2

HTML中的规则始终是p元素只能包含文本和文本级标记,而不是例如列表.因此,浏览器</p>在p元素打开时会暗示结束标记<ul>,并且遇到块级元素的开始标记.在您的示例中,</p>后面的标记</ul>是无家可归的,通常会被忽略.