第一章： 新的结构化元素

Posted 2020-08-16 Amber丶

事实再一次证明了，选一本好的书是多么的重要啊！弃掉一开始的坑，换一本书来继续我们的学习吧。

（1） 结构化构建块

div： 这是我们都知道且喜爱的一种一般性容器。它是一种无附加语义含义的流式内容元素。

section： 这是文档或应用程序的一般性小节。

article： 这是文档或网站的一个独立的小节。

听起来十分的相似对吧？确实。但是我们区分一下：

div是没有任何的语义的，比如<div class="nav">和<div class="mick">本质上对浏览器解析来说没有任何区别。

section元素类似于div，这是一个一般性容器元素，但他有一个附加语义——它包含的东西是一组逻辑相关的内容。它也是一种内容的分节元素。

article是一种特殊的section，即它是页面的一个独立的、自包含的部分。

怎么选择？

1. 如果被封装的内容在馈送阅读器中会由完整的意义吗？是，那么article。

2. 被封装的内容是相关的？是，那么用section。

3. 如果没有语义关系，那么用div。

（2） 标题

header： 用于分节元素的内容介绍和导航。

footer： 用于表现内容的附加信息，如作者、相关文档的链接等，通常出现在内容的底部。

hgroup： 是header的一种特殊形式，它只能包含<h1>~<h6>元素，用于带有副标题的标题进行组合。

<h1>~<h6>： 没有什么改变的地方。

（3） 更多的结构化元素

nav： 导航链接小节，这些链接或是链接到其他页面的，或是链接到同一页面的其他小节。

aside： 页面的一个小节，由与周边内容略微相关但又单独分开的内容所组成。

figure： 用于这样一种内容：对理解至关重要，但可以在文档流中迁移，而不影响文档的含义。这可以用于图像或视频，也可以用于任何其他内容，包括图表、代码示例或其他媒体。