翡翠，父母下的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

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

请考虑使用<div>或其他内容。

Answer 2

将如下所示::

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

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