为什么在<img/>标记周围显示<p>标记？</p>

Question

我有这个：

<p>
    <img src="media/icons/info_ticket.png"></img>
    <h3>Ticket #TKMA<span><?php echo $_GET['CRy3sjzZOJyXE']; ?></span></h3>
</p>

当我应用CSS来改变img的样式时，它不起作用！所以，我检查了元素，我发现了这个：

<p>
    <img src="media/icons/info_ticket.png">
</p>
<h3>Ticket #TKMA<span>17</span></h3>
<p></p>

我不明白为什么会这样。

Answer 1

Because your HTML is invalid。 <p> elements can only contain phrasing content.

请参阅List of HTML5 elements that can be nested inside P element?

Answer 2

原因是，H元素中的<p>元素无效，因此浏览器会将其拉出来进行纠正。

Answer 3

因为<h3>内的<p>无效html

浏览器正在执行自动更正版本。

Answer 4

<h3>标记在<p>标记内无效。你的编辑通过将标题移到段落之外来“修复”它，只留下段落中的图像。