为什么我们在div中使用div？

Question

我很难理解为什么我们在 div 中使用如此多的 div 。例如，为什么我们要在彼此下面使用三个连续的 div（div id="showcase"然后div class="container"然后div class="showcase-content"）我在很多人的代码中都看到过这一点，那么这样做的好处是什么？div仅使用下面示例中的那个不是更有意义吗？<div id="showcase">  <div class="container">    <div class="showcase-content">      <h1><span class="text-primary">Enjoy</span> Your Stay</h1>      <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor,       eligendi laboriosam. Repellendus officia harum eaque.</p>      <a class="btn" href="about.html">About Our Hotel</a>    </div>  </div></div>

Answer 1

HTML 标签有两个部分很重要。

首先，HTML 是一种标记语言，它使用标签来构造信息并赋予其语义。Adiv本身没有语义意义，因此对此使用嵌套div并不会增加太多，特别是如果 a 的唯一子级div是 another div。所以从 HTML 的角度来看，这些div没有意义。如果可能的话，它们应该被替换为更有意义的元素，例如section, article, ... 或使用 ARIA 属性赋予它们语义。

另一部分是当您想要在浏览器中呈现 HTML 时，可以在此处为每个标签应用样式。如果这些嵌套div是必要的，那么在不知道元素的样式如何的情况下很难判断。在样式化的情况下，如果具有语义含义的元素不足以实现所需的样式，则可以添加诸如div或 之类的元素。span

如果使用像 bootstrap 或 Foundation 这样的组件库，那么关于嵌套结构就没有太多选择，因为这是由这些库给出的。但这并不意味着元素div不能被类似的东西替换section，因为这些库通常只通过类名和属性定义嵌套方式。

Answer 2

每个 div 都是应用不同 css 样式的元素，并且当 css 样式应用于盒模型时，它应该是一个单独的块，因此其结构是这样的！

Answer 3

我认为这取决于偏好。我个人使用了很多 div，因为我发现自己与元素的预定义行为作斗争，而不是它们真正帮助我。

例如，如果我用于<h1>标题，十分之九我必须调整字体大小、字符间距、颜色、边距/填充。对我来说，我宁愿重新开始并从头开始设计它，使其看起来像我想要的那样，因为我知道我想要的一切以及 div 如何响应这些样式。

我认为这两种方式都没有任何优点/缺点，这取决于你觉得自己适合什么以及你是如何学习的。

如果您觉得按照您在那里展示的方式进行操作很舒服，那么就开始吧！