玉，下父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 

我認爲這會工作，你會得到預期的結果。