Html 一个'；ul'；元素不能是'；p'；要素

为什么我们不能将

ul

元素作为

p

元素的子元素

我用以下代码创建了一个网页

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

我通过右键单击

ul

元素（在Chrome中）并选择inspect元素选项来检查它。我在Chrome中看到了它，但其他两个浏览器也以同样的方式运行（CSS选择器'pul'工作不好）

---

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

只能将内联元素作为子元素，而不能包含块元素（例如，请参见）<代码>

另一方面是块级元素（）
正如您所看到的，浏览器解释代码的原因在于HTML5解析规范。该规范列出了一个非常类似于您自己的示例：
另一个有趣的相关问题可能是：
请检查，其中明确规定禁止在段落元素中放置列表，并给出一些可以执行的示例：
列表元素（特别是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的样式 而不是单独考虑这个例子的每个部分。

---

HTML中的一条规则是

p

元素只能包含文本和文本级别的标记，例如不能包含列表。因此，当

p

元素打开并且遇到块级元素的开始标记（如
）时，浏览器意味着关闭
标记。在您的示例中，
之后的
标记是无家可归的，通常会被忽略。
我正在使用trumbowyg，并且在编辑器内部，chrome允许

ol

在

p

内部：。在编辑器的HTML之外，它与OP有相同的问题。编辑器给我HTML代码，我必须在它之外呈现它，因此它会中断（因为它在

p

的内部有

ol

）。编辑器本身是如何允许的？@hakermania编辑器动态地（通过JS）操纵DOM。Chrome读取HTML并从中构建DOM是另一种情况。编辑器的值（HTML代码）在文件本身的HTML中给出（想象
），然后编辑器的js代码被调用到

textarea

元素。这意味着浏览器首先对文本区域内的html代码拥有发言权，然后是编辑器。因此，如果chrome将

..

转换为

..

，那么编辑器将看到后一个值，而不知道前者。我想在引擎盖下会发生其他事情，但我找不到它。@hakermania无论textarea标记中有什么，它都不会被浏览器验证为HTML-它被视为普通字符串。根据whatwg.org，这确实是正确的答案。不幸的是，MDN发送了一条令人困惑的消息，其自身的

ul/ol

说明指出

允许的父元素：任何接受流内容的元素。

（）流内容元素列表也包含

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>