Html笔记-头部标签+主体标签+尾部标签+div标签

面向刚刚学习Html的同学，本章的内容是Html笔记系列第二章。

本篇文章会尽可能将学习内容精简的展现给大家。

本章的学习内容：头部标签+主体标签+尾部标签+div标签

头部标签：<header></header>；

主体标签：<section></section>；

尾部标签：<footer></footer>

div标签：<div></div>

这里说一下为什么要将这4个标签排在一起：header，section，footer这个三个标签分别定义：

header：

这里说一下header、head的区别：

header：定义一个页面，区域或者文档的页眉(头部内容),里面包含标题，logo等内容，header标签相当于导航栏。

head：定义文档头部，它是所有头部元素的容器,可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。           

浏览器都支持head标签，而旧版本浏览器均不支持header标签，需要ie9+以上浏览器才支持header标签。

一个 HTML 文档中可以有多个 <header> 元素。但是，<header> 不能放在 <footer>、<address> 或另一个 <header> 元素中。

footer：

footer：定义页面，区域或者文档的页脚(尾部内容)，可以包含网页版权声明，logo，联系方式或二维码等；

footer标签不引入任何特殊样式；

footer标签只是一个语义化的元素，用于尾部区域。

section：

section为什么要最后列出来呢？

section非常特殊，当然section还有一个特殊类型的article标签。然后在section后面还有一个div标签。三者之间的用法，区别是什么呢？刚学习的人感觉都是定义区域的，我直接用div标签不就好了吗？

这就是为什么我说section特殊了，section 不仅仅是一个普通的容器标签，section 表示一段专题性的内容，一般会带有标题。

然后artivle是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。当元素内容聚合起来更加言之有物时，应该使用 article 来替换 section 。当 article 内嵌 article 的时候，内部的 article 的内容是和外层的 article 内容是有相关性的。例如，一篇博客的文章中，包含用户提交的评论的 article 就应该嵌套在包含博客文章 article 之中。就是(=)事对事！

div本身没有任何语义，仅用于布局和样式化。

而section就可以看做带有语义的 div 。

那么什么时候用section和div呢？

当元素内容明确地出现在文档大纲中时，就可以使用section，所以section可以作为除头部区域，尾部区域之外的主体内容，三者都是在主体(body)中使用！

只是为了样式化或者方便脚本使用时就适用于div标签了。

建议：header，section，footer三个标签一个Html文档里面存在一个就好了，精不在多。

上面三个标签可以帮助我们更好的规划我们的文档页面，方便我们寻找需要找到的内容。

div放在里面随便用，div没有内容，样式的情况下不占地方。

本文仅代表作者观点。

如果本篇文章对你有所帮助，记得点赞+收藏