时间戳

首页 > 解决方案 > 可以不一直使用 div 吗？

html - 可以不一直使用 div 吗？

问题描述

我是 Html 新手，当我在 YouTube 上看教程时，我遇到了作者一直使用 div 的情况，也就是说，在标题部分他想使用 h1、p 和图像。编码：

   <header id="showcase">
<div class="content">
<img src="img/action-america-architecture-378570.jpg" alt="The City">
<div class="heading">
    <h1>Mirasan</h1>
</div>
<div class="text">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt sequi placeat rerum maxime eius, impedit molestiae totam! Ipsum ex numquam nobis nisi necessitatibus fugit laudantium natus, vel facilis, nemo quisquam.</p>
</div>
</div>

    </header>

如您所见，首先将 h1、p 和 image 放入 div class="content" 中，然后将 h1 和 p 放入各自的 div 中。我的问题是放 h1 可以吗？p 和图像到标题中，并从标题中删除所有 div，如内容、标题和文本。像这样：

    <header id="showcase">
<img src="img/action-america-architecture-378570.jpg" alt="The City">
    <h1>Mirasan</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt sequi placeat rerum maxime eius, impedit molestiae totam! Ipsum ex numquam nobis nisi necessitatibus fugit laudantium natus, vel facilis, nemo quisquam.</p>
    </header>

标签： html

解决方案

您可以将它们divs视为容器（就像 ap是您的文本h1的容器并且是您的标题的容器）。

这些容器 ( p, h1) 是语义化的，它们意味着一些东西——一个段落、一个标题。但是，divs 是更通用的容器（非语义）。

仅当它们不向页面添加任何内容时，它们才是多余的-正如我在评论中提到的，通常它们作为分组机制添加（即h1， theimg和 thep相关并由div容器保持在一起）-像这样分组它们可以让您定义一个CSS规则并将相同的规则应用于相同的所有容器.class

在您的示例代码中，可以将.text类p直接应用于标签，例如：

<p class="text">lorem ipsum... </p>

h1标签的概念相同，例如：

<h1 class="heading">Mirasan</h1>

为什么原作者选择将它们包装在容器中，我们不得而知。divs 仅包含一个元素（ ap或 an ），因此作者h1没有对元素进行分组。在这种情况下，它似乎是多余的。

推荐阅读