Question

这是我的代码：

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

Answer 1

我认为这就是原因：

<p>标记只能包含内联元素。标题标记是块级元素，即使您将它们设置为内嵌显示样式，也无法进入<p>标记。

Answer 2

这是基本的HTML（或任何其他标记语言）。您应该将paragraph, <p></p>与heading, <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?

Answer 3

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

使用W3C markup validator确保文档的有效性

Answer 4

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

因为您的标题与文章的标题相似 - 您不会将标题放在段落中。使用<p>代码，您只是撰写文章的内容，因此您无法在p代码中设置标题标记的样式，因为您很可能会对标题和内容进行样式设置。

Answer 5

如果您遇到HTML结构问题请参阅Lynda HTML5课程非常值得您花时间澄清如何构建文档。除了原因。你将更好地理解什么是风格，什么是大多数人挣扎的结构，我会包括自己。

还有官方网络标准“万维网联盟”的链接，是的我知道它是付费的服务但它帮助我避免或理解为什么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教程！当文档结构正确时，它是可读的，更多的应用程序和设备。像读者一样。

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

5 个答案: