在Tumblr中，我可以在<p>标签内使用<pre>标签吗？

Question

今天我在Tumblr上稍微玩了一下。 我试图将预格式化文本添加到描述段落块中，像这样：

{block:Description}
    <p id="description">{Description}</p>
{/block:Description}

然而，<pre>元素被渲染在<p>元素之后而不是里面，这不是我想要的。

我做错了什么还是这是一个bug？

- digitalfleisch

Answer 1

在HTML中，您不能嵌套诸如<pre>这样的块级元素在<p>内，因此Tumblr行为正确。在插入预格式文本之前，应关闭段落。

如果需要行内代码样式文本，请尝试使用<code>标签。如果需要，可以使用CSS进行补充。

<p>I like to use the <code>code</code> tag in my HTML files.</p>

code
{
    padding: 2px 4px;
    color: #000000;
    background-color: #eeeeee;
    border-radius: 3px;
}

- johnsyweb

---

有趣的是，我尝试将<p>替换为块元素<div>，它也起作用了！而且嵌套<div>不是常见的做法吗？我又感到困惑了... - digitalfleisch

很高兴能够帮助。<div>是一种分组元素，可以嵌套使用；它在使用CSS时非常有用，类似于<span>。 - johnsyweb

那么有一些块级元素是不能嵌套的，除非它是一个分组块级元素？显然我低估了HTML的复杂性 :). 你能提供一个链接让我学习更多关于这个概念吗？ - digitalfleisch

<div>和<span>不是块级元素，它们是分组元素。在我的回答中，我链接了HTML文档的全局结构（适用于HTML 4.01），这应该能帮到你。 - johnsyweb

Answer 2

此外，我刚刚意识到我在将代码粘贴到Tumblr的<pre>和<code>标签中时遇到了类似的问题，这是因为仅仅将代码包裹在这些标签中并不能防止您不得不使用<和>转义符而不是直接使用尖括号。请注意保留HTML标签。

- Joel Glovier

Answer 3

HTML5术语是：

• p的“内容模型”为“短语内容”：“https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element
• pre的“类别”为：“流内容”和“可触知内容”：https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element

由于pre的类别不包括“短语内容”，因此不能将pre放在p中。

也许可以使用CSS样式来模拟pre：如何使用CSS将span更改为pre？，但我不确定是否允许在p中这样做。

另请参阅：可嵌套在P元素内的HTML5元素列表？

- Ciro Santilli OurBigBook.com