为什么我的<p>标签会自动关闭？</p>

Question

正如您将在this fiddle中看到的那样，我在加载时向textarea放置一个简单的html字符串，该字符串等同于以下（更易读）版本：

<p custom-attr-id='100'>
    <div>text 1</div>
</p>
<p custom-attr-id='101'>
    <div> text 2</div>
</p>

位于textarea正下方的是div，可在textarea内显示已呈现的字符串。如果您注意上面的DOM结构，并单击输出区域，您会注意到<div>text 1</div>部分不再显示为<p custom-attr-id='100'></p>的子元素。

这是我不明白的。 <p>标记仍然应该包裹<div>，但它会以某种方式展开它并单独放置，因为我所做的就是使用jQuery的html()方法显示内容。这是一个小提琴行为还是html()方法？

Answer 1

你应该反过来这样做。您显示的代码在div元素内部有p。这是无效的，因为div是一个块元素，而p元素只允许将inline个元素放在其中。

有关详细信息，请参阅http://www.w3.org/TR/html4/sgml/dtd.html。

特别是以下部分：

<!ELEMENT P - O (%inline;)* -- paragraph -->