HTML 学习之：新增主体结构元素 article / section /nav / aside / time / pubdate

当没有使用新增元素的时候，如果我要设计一个 HTML 的页面，布局如下：

如图所示，要不断地使用 <div> 来将整个页面分成很多尺寸不同的区域。但是有了新增的元素之后，就可以直接对整个页面布局进行设计。如下图，现在同样的页面，可以用这些标来设计，具有更高的可读性。

在进行样式设计的时候，如果 main 里面分左右两边，可以直接用 > 来指示子元素的 CSS 样式设计。

1. article 元素

1.1 最简单的 article 示例

1.2 article 的嵌套使用

1.3 article 内嵌页面

2. section 元素

2.1 创建一个简单的 section 模块

2.2 section 元素和 article 元素的区别

• article 元素是一种特殊的 section 元素，更加强调独立性，这两个元素可以相互嵌套，即，在 article 元素里面嵌套 section 或者相反的操作

• 如果你想要一块完整的元素，你可以使用 article 但如果你想将一个部分分成几个小的部分，最好选择 section

• section 元素需要一个标题

2.3 对 section 元素的总结

• 不要将 section 用作为承载页面样式 .css 的容器
• 如果 article 元素，aside 元素和 nav 元素更加符合条件，则不要使用 section 元素
• 不要为没有标题的区域块使用 section 元素，section 是需要存在一个标题的

3. nav 元素

4. aside 元素

4.1 解释 article 元素

4.2 在页面分配的时候充当侧边栏

• 在这里如果把分配给 article 标签的部分认为是 main 的主体部分，那么 aside 就是整个 main 的附带部分，也就是边缘部分

5. time 元素

6. pubdate 属性

• 这是一个布尔型的属性，可以用在 article 属性的 time 元素上，意思是 time 元素代表了整个文章的发布日期，尤其如下面一样，如果同时出现两个时间的情况，要指定一个时间作为发布的时间，所以使用 pubdate 属性