多余的 <p></p> 在浏览器中显示

Question

我正在练习使用引导程序编写html。 我是初学者。 当我在浏览器中打开html文件时出现一个奇怪的错误：源代码中没有段落标签<p></p> ，但是它们显示在浏览器中。

部分源代码：

 <div class="header" style="background-image: url(http://www.cnblogs.com/skins/WebLoad/images/o_header.jpg"> <header id="top" class="navbar navbar-static-top bs-docs-nav"> <div class="container topbar"> <div class="navbar-header"> <h1><b>Welcome to our home page！</b></h1> </div> <nav class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a id="signin-out" class="cd-signin header-item" href="#0">login/register</a></li> <li><a class="cd-signup header-item" href="#0">know more</a></li> </ul> </nav> </div> </header> <div id="name" class="bs-docs-header" tabindex="-1"> <div class="container"> <h1>team name</h1> <p>team desciption</p> </div> </div> </div> 

浏览器显示： 屏幕截图，顶部有段落空间

当我使用Firebug进行检查时，它显示的代码包括多余的段落标签 <p></p>

Answer 1

您确定身体标签上没有任何东西吗？

可能只是需要刷新的浏览器缓存（crtl + shift + R或cmd + shift + R）

您还可以检查代码中是否没有添加代码的javascript插件（在此p标签中）。

Answer 2

@Yogesh Chauhan： 清空p标签的主要原因可能是 ：

1. 您正在使用在线可视文本编辑器来编写代码，然后按Enter换行
2. 在编写HTML代码时，您要按Enter换行
3. ：empty CSS属性在HTML中的用法

如果您的HTML中仍然有空的p标签，则可以使用javascript或jQuery检查空的p标签并将其删除。

这是使用jQuery删除空p标签的代码示例。 要实现以下步骤 ：

1. 在HTML的标头部分包含最新的jQuery库
2. 关闭车身标签之前，编写代码
   <script> $('p:empty').remove(); </script>
   

这将从页面中删除所有空p标签。

 $('p:empty').remove(); 

 p { height: 30px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <p>Before empty p tags</p> <p></p> <p></p> <p></p> <p>After empty p tags</p> <div class="header" style="background-image: url(http://www.cnblogs.com/skins/WebLoad/images/o_header.jpg"> <header id="top" class="navbar navbar-static-top bs-docs-nav"> <div class="container topbar"> <div class="navbar-header"> <h1><b>Welcome to our home page！</b></h1> </div> <nav class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a id="signin-out" class="cd-signin header-item" href="#0">login/register</a></li> <li><a class="cd-signup header-item" href="#0">know more</a></li> </ul> </nav> </div> </header> <div id="name" class="bs-docs-header" tabindex="-1"> <div class="container"> <h1>team name</h1> <p>team desciption</p> </div> </div> </div>