了解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"); 
} 

假设我想用不同的样式为此代码添加另一节。我如何做到这一点，使其语义正确和搜索引擎优化友好？

我一直在做的是<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>