33

为什么我们永远不能有一个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 中看到它，但其他两个浏览器的行为方式也相同（CSS 选择器“p ul”效果不佳）。

为什么会这样？是否存在浏览器进行此类更改的一般情况？

4

3 回答 3

47

请查看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 的样式，而不必分别考虑例子的每个部分。

于 2012-05-15T13:10:28.370 回答
5

HTML 中一直有一条规则，即p元素只能包含文本和文本级标记，而不是列表。</p>因此，当p元素打开并且遇到块级元素的开始标签（如）时，浏览器会暗示一个结束标签<ul>。在您的示例中，</p>之后的标签</ul>是无家可归的，通常会被忽略。

于 2012-05-15T14:22:24.847 回答
4

<p>只能有内联元素作为子元素，没有块元素（参见，例如，在MDN中）。<ul>另一方面是块级元素（MDN）！

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

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

于 2012-05-15T13:10:16.830 回答