Question

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

部分源代码：

＆＃13;

<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>

＆＃13;

＆＃13; 浏览器显示： screenshot of display with paragraph space at top

当我使用萤火虫检查它时，它会显示出来 code including paragraph tags 多余<p></p>

Answer 1

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

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

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

Answer 2

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

您正在使用在线可视文本编辑器编写代码并点击输入换行
在编写HTML代码时，您需要输入新行
用法：HTML中的空CSS属性

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

以下是使用jQuery删除空p标记的代码示例。要实施以下要点：

在HTML标题部分包含最新的jQuery库
在关闭body标签之前写下代码
<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>

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

2 个答案: