为什么我不能在p标签内使用标题标签并用CSS进行样式设计？

Question

为什么我不能在p标签内使用标题标签并用CSS进行样式设计？

8

这是我的代码：

<html>
    <head>
        <style>
              div p h1 {
                  background-color: red;
              }
       </style>
    </head>
    <body>
        <div>
            <p><h1>hello2</h1></p> 
        </div>
    </body>
</html>

- Bisu

1

这是基本的HTML（或其他标记语言）。你应该将段落与标题元素分开。如果你想在主标题下放置一个副标题，我建议你这样做：<div><h1>主标题</h1><p>副标题</p></div> 在创建新元素之前关闭HTML元素是非常重要的。除非是用于收集主题相关元素的div、span或section。还有很多可以说的，但我建议你阅读更多关于HTML和标记语言的内容。 - chrisv

但我可以在<h>标签内添加<p>标签，例如<h1><p>你好</p></h1>，我认为反过来也是可能的。 - Bisu

我添加了一个新的答案，其中包含更多细节和一些好的参考/阅读材料，供您（以及访问此问题的其他人）查看！希望它有所帮助。 :) - chrisv

5个回答

3

这是基本的HTML（或任何其他标记语言）。您应该将段落<p></p>与标题<h1></h1>元素分开。

如果您想在主标题下方放置子标题，我建议您做类似的事情。

<div>
    <h1>Main heading</h1>
    <h2>Smaller heading</h2>
    <p>Some information or a quote</p>
</div>

重要的是在创建新元素之前关闭html元素。除非它是用于收集主题相关元素的div, span或section。

还有很多可以说的，但我建议你继续阅读有关HTML和标记语言的更多内容。一个好的起点是http://www.w3schools.com/html/html_basic.asp和http://www.w3schools.com/html/html_elements.asp...

如果您特别想知道哪些元素可以嵌套在段落中，请查看此问题的答案：List of HTML5 elements that can be nested inside P element?

- chrisv

关闭 </p> 标签是完全可选的。关闭它们并不重要。规范说明，每当打开新的块级元素时，它们会被隐式关闭。 - recursive

1

没错，但因为他/她仍在 HTML 语义语法阶段，所以我认为最好从答案中省略它。尽管浏览器可以正确显示，但关闭所有元素仍然是最佳实践，因此我仍然建议 OP 关闭段落。 ;) - chrisv

1

在 p 元素内部放置一个 H1 元素是无效的标记。当浏览器遇到这种标记时，它会尝试通过将 H1 移动到 p 外部来自动修复它。一旦发生了这种情况，选择器就不再匹配任何内容。

使用 W3C 标记验证器来确保您的文档的有效性。

- danwellman

0

<div>
   <h1>hello2</h1>
   <p>im the best</p> 
</div>

因为您的标题就像文章的标题一样 - 您不会将标题放在段落中。使用<p>标签，您只是编写文章的内容，因此您无法在p标签中设置标题标签的样式，因为您很可能会以不同的方式设置标题和内容的样式。

- Mohamed

-1

如果您在HTML结构方面遇到问题，请查看Lynda HTML5课程，它真的值得您花时间学习。它阐明了如何构建文档以及原因。您将更好地理解样式和结构的区别，这是大多数人都很困惑的问题，我也包括在内。

此外，它还提供了指向官方Web标准“万维网联盟”的链接。是的，我知道这是一个付费服务，但它帮助我避免或理解为什么当您将元素移动到无效位置时，HTML和CSS会产生反应。

请注意，h1-h6标签不是用于样式化的，这与我在HTML早期使用它们的想法不同。是的，我们使用它们是因为它似乎很容易用CSS进行定位。但是，h1-h6更多地用于页面上部分或内容的重要性结构。如果需要，我会使用div、span或Bold标签。

developer.mozilla.org是一个很好的资源。

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure 以上链接提供了一个很好的结构示例！

<body>
     <!-- Main header used across all the pages website -->
        <header>
          <h1>Header</h1>
        </header>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
          </ul>
           <form>
             <input type="search" name="q" placeholder="Search query">
             <input type="submit" value="Go!">
           </form>
         </nav>
        <!-- Here is our page's main content -->
        <main>
          <!-- It contains an article -->
          
          <article>

<!-----------***** As you can see the h1-h6 is for structure not style****** -->
            <h2>Article heading              Rank2</h2>
              <p>This is Paragraph</p>

                <h3>subsection               Rank3</h3>
                   <p>This is Paragraph </p>
                   <p>This is Paragraph </p>

                    <h4>Another subsection   Ranked</h4>
                       <p>This is Paragraph </p>

                <h3>Another subsection       Ranked</h3>
                   <p>This is Paragraph </p>
                   <p>This is Paragraph </p>
          </article>
          <aside>
            <h2>Related</h2>

            <ul>
              <li><a href="#">beside the seaside</a></li>
              <li><a href="#">beside the sea</a></li>
            </ul>
          </aside>

        </main>

        <!-- main footer that is used across all the pages of site -->

        <footer>
          <p>©Copyright 2050 by nobody. All rights reversed.</p>
        </footer>

但是真的要看看Lynda HTML 5 Essentials教程！当一个文档被正确地结构化时，它更易读，并且可以在更多应用程序和设备上使用。比如阅读器。

- Geovanni Petty

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mtch9 · Accepted Answer

我认为原因是：

<p>标签只能包含内联元素。标题标签是块级元素，即使您将其样式设置为显示内联，也不能放在<p>标签中。