玉，下父3个元素不产生预期的结果

Question

我有这样的玉模板：

.widget 
    p 
     h1 Title! 
     | {#Price}: 
     a(href='#{item.href}') Link 

其产生：

<div class="widget"> 
    <p></p><h1>Title</h1>$174 : 
    <a href="#">Link</a> 
    <p></p> 
    </div> 

我期望的逻辑结构：

<div> 
    <p> 
     <h1></h1> 
     <a></a> 
    </p> 
    </div> 

我在做什么错？

Answer 1

该结构可能是Jade生成的输出结果，但在HTML中，嵌套<p>（仅允许包含内联元素）下的<h1>（块元素）无效。由于HTML5不是严格XML，因此某些元素的结束标记是隐含的，包括<p>，因此<p>元素在此处结束。浏览器会看到额外的</p>并创建另一个<p>元素，因为HTML解析并不严格 - 但该部分是无效的HTML。

考虑一个<div>或其他。

Answer 2

会有这样如下::

.widget 
    p 
     h1 
      | Title! 
      | {#Price}: 
     a(href='#{item.href}') Link 

我认为这会工作，你会得到预期的结果。