Question

检查此html代码

<p>test</p>
<p>
  <ul>
    <li>
    <span style=\"line-height: 1.42857;\">1
    </span>
    <br>
    </li>
    <li>
    <span style=\"line-height: 1.42857;\">2&nbsp;
    </span>
    <br>
    </li>
    <li>
    <span style=\"line-height: 1.42857;\">3
    </span>
    <br>
    </li>
    <li>
    <span style=\"line-height: 1.42857;\">4
    </span>
    <br>
    </li>
  </ul>
  <p>
    <span style=\"line-height: 20px;\">more text
    </span>
  </p>
</p>

出于某种原因，<ul>前后空正在渲染（我到目前为止尝试过chrome和ff）。

检查此plunker here并尝试检查结果，您会看到类似的内容

<body>
    <p>test
</p>
<p> <----------THIS 
  </p>
<ul>
    <li>
    <span style="\&quot;line-height:" 1.42857;\"="">1
    </span>
    <br>
    </li>
    <li>
    <span style="\&quot;line-height:" 1.42857;\"="">2&nbsp;
    </span>
    <br>
    </li>
    <li>
    <span style="\&quot;line-height:" 1.42857;\"="">3
    </span>
    <br>
    </li>
    <li>
    <span style="\&quot;line-height:" 1.42857;\"="">4
    </span>
    <br>
    </li>
  </ul>
  <p>
    <span style="\&quot;line-height:" 20px;\"="">more text
    </span>
  </p>
<p></p> <-------------- AND THIS 


</body>

无法弄清楚原因。任何提示？

Answer 1

段落不能包含列表（或其他段落）。

段落的结束标记是可选的。

UL开始标记隐式关闭P元素。

Validators是有用的工具。

Answer 2

您正试图错误地嵌套标签。 代码不能包含其他或列表（<ul>或<ol>）代码。

来自the specification：

列表元素（特别是ol和ul元素）不能是p元素的子元素。因此，当一个句子包含项目符号列表时，可能会想知道它应该如何标记。

...

希望方便地设置由多个“结构”段落组成的“逻辑”段落的作者可以使用div元素而不是p元素。

您所看到的是浏览器尝试通过分别为不匹配的开始和结束标记提供关闭和打开标记来处理无效标记（misnested tags）。当浏览器看到<ul>时，它会关闭仍然打开的。当它看到您示例中的最终时，它会提供来匹配。

正如昆汀的回答所指出的那样，你应该使用HTML validator。

附注：您的HTML中有很多\"个，您应该只有"。我认为这是因为这个HTML实际上是由PHP或其他语言准备的，但这就是为什么你会得到像style="\"line-height:" 1.42857;\"=""这样奇怪的属性。

浏览器在UL之前和之后渲染不需要的P.

2 个答案: