容器标签，或者说是「集装箱标签」
HTML提供了一组容器标签。这些标签可以包含一组未详细说明的（unspecified）其它标签。
我们有：
articlesectiondiv理解它们之间的区别可能会让人感到confuse（困惑、混淆）
让我们看看什么时候使用它们中的每一个
articlearticle 标签标识了一个东西，而这个东西是在页面里边独立于其它东西的东西
例如，主页（homepage）中的博客文章列表（a list of blog posts）或者是链接列表（a list of links）。
<div>
<article>
<h2>A blog post</h2>
<a ...>Read more</a>
</article>
<article>
<h2>Another blog post</h2>
<a ...>Read more</a>
</article>
</div>
我们并不局限于列表（lists）：一篇文章（article）也可以成为页面中的主要元素（main element）。
<article>
<h2>A blog post</h2>
<p>Here is the content...</p>
</article>
在 article 标签内部，我们应该有一个标题( h1 - h6 )和
section表示文档的一个部分(section)。每个部分有一个标题标签( h1-h6 ) ，然后是section body（章节正文）。
例子：
<section>
<h2>A section of the page</h2>
<p>...</p>
<img ...>
</section>
把一篇长文章分成不同的sections是很有用的。
不应该把 section 这个元素用作通用容器元素（generic container element）。而 div 才是为此而设计的。
div才是通用容器元素哈！
divdiv 是通用容器元素
<div>
...
</div>
你经常向该元素添加一个 class 或 id 属性，以允许使用CSS对其进行样式设置。
何时使用 div 呢？
我们需要一个容器，但现有的标签不适合作为容器，所以我们就直接用 div 作为容器
div作为容器随处可见……有人说div是用来划分页面的！我以前只知道只有div被用作容器，没想到还有article和section，我意识到，当你想要了解一个东西的时候，请对比一下是否还有其它东西也能做一样的东西，以及它们之间有啥区别 -> 说白了，找方案，分析方案 -> 找问题，分析问题 -> 找方案，分析方案 -> ……如用div作为容器，分析为啥要用它来作为容器，而不用其它的，分析div作为容器的条件以及其它的作为容器的条件，如果都满足，则再分析，最终确定唯一方案……
与页面相关的标签
nav此标签用于创建定义页面导航（page navigation）的标记。
为此，我们通常需要添加 ul 或 ol 列表：
<nav>
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ol>
</nav>
asideaside 标签用于添加一段与主要内容相关的内容。
a piece of content 与 main content 相关
例如，一个添加quote的box，或者一个侧边栏（sidebar）。
例子：
<div>
<p>some text..</p>
<aside>
<p>A quote..</p>
</aside>
<p>other text...</p>
</div>
使用 aside 是一个信号，表明它包含的内容不是它所在的部分的常规流中（regular flow）的一部分。
说白了，aside是个旁白，与主要内容间接相关
headerheader 标签表示页面的一部分，即引言（introduction，简介、介绍）部分。
例如，它可以包含一个或多个标题标签( h1 - h6 )，文章的标语（tagline），一张图片（image）。
<article>
<header>
<h1>Article title</h1>
</header>
...
</div>
mainmain 标签代表页面的主要部分
<body>
....
<main>
<p>....</p>
</main>
</body>
footerfooter 标签用于确定文章的页脚（footer）或者是页面的页脚：
<article>
....
<footer>
<p>Footer notes..</p>
</footer>
</article>