Question

为什么我们永远不会将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中）并选择了inspect元素选项来检查它。我在chrome中看到它，但其他两个浏览器也表现得相同（css selecter＆＃39; p ul＆＃39;并没有很好地工作）。

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

Answer 1

请检查HTML specification，其中明确指出禁止在段落元素中放置列表，并举例说明可以做什么：

列表元素（特别是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>标记无家可归，通常会被忽略。

Answer 3

<p>只能将内联元素作为子元素而不能使用块元素（例如，请参见MDN）。另一方面，<ul>是块级元素（MDN）！

浏览器解释您的代码的原因在于HTML5解析规范。该规范列出了一个非常类似于您自己的示例：whatwg link。

另一个有趣的相关问题可能是：HTML: Include, or exclude, optional closing tags?

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

3 个答案: