css - 了解 HTML 5 和 CSS 样式

Question

我习惯于在我的网页中滥用 div。但是，我正在努力变得更好并使用 html 5 标签。

通常我的 HTML5 代码如下所示:

<header></header>
<nav></nav>
<section></section>
<footer></footer>

然后我将设置页面大部分内容所在的部分的样式。

section {
   width:960px;
   height:960px;
   background-image:url("images/bg-img");
}

假设我想在此代码中添加另一个具有不同样式的部分。我该怎么做才能使其在语义上正确且对 SEO 友好？

我一直在做的是 <section id="Content2"></section>那很糟糕吗？

小伙伴们有什么想法？

Answer 1

如果您想查看哪些元素可用于 HTML5:https://www.w3schools.com/html/html5_new_elements.asp

以下是一些如何定位特定元素的示例。 CSS 非常强大，我建议您查看 w3 schools进行快速教学。

在尝试决定何时使用类与 ID 时，请考虑该元素是否是独一无二的元素，或者是否会有多个元素。如果会有更多类似的元素，请将其设为一个类。如果它将是同类中唯一的一个，那么可以给它一个 ID。有人反对只使用类(与特异性有关)而不是给一些元素 ID，但没有“正确”的方法。

section.tree {
  width: 50%;
  background: red;
}

section.wall {
  width: 50%;
  background: orange;
}

section.tree .acorn {
  width: 50%;
  background: yellow;
}

section.library>p {
  background: pink;
}

.first {
  font-size: 23pt;
}

<section class="tree">
  This is the tree section
</section>

<section class="wall">
  This is the wall section
</section>

<section class="tree">
  <section class="acorn">
    This is the acorn section
  </section>
</section>

<section class="library">
  <p>A paragraph</p>
  <p>Another paragraph</p>
  <p>The last paragraph</p>
</section>

<section class="tree library">
  <p class='first'>A paragraph</p>
  <p>Another paragraph</p>
  <p>The last paragraph</p>
</section>