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以获得快速教学。

在尝试决定何时使用Class与ID时，请考虑该元素是否是独一无二的元素，或者是否会有多个元素。如果有更多类似的元素，那就把它变成一个类。如果它是它的唯一类型，那么可以给它一个ID。有人认为只使用类（与特异性有关）而不是给出一些元素ID，但是没有“正确的”＃39;方法

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

理解HTML 5和CSS样式

1 个答案: