pug - Jade，父项下的 3 个元素不产生预期结果

Question

我有这个 Jade 模板：

  .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

<h1>该结构可能是 Jade 产生的输出，但在 HTML 中，在 a 下嵌套（块元素）是无效的<p>（只允许包含内联元素）。由于 HTML5 不是严格意义上的 XML，因此某些元素的结束标记是隐式的，包括<p>, 所以<p>元素就在那里结束。然后浏览器会看到一个额外的元素</p>并创建另一个<p>元素，因为 HTML 解析并不严格——但那部分是无效的 HTML。

考虑一个<div>或其他东西。

Answer 2

会有这样的::

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

我认为这会奏效，你会得到预期的结果。