首页 > 代码库 > 第一章: 新的结构化元素

第一章: 新的结构化元素

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

(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: 用于这样一种内容:对理解至关重要,但可以在文档流中迁移,而不影响文档的含义。这可以用于图像或视频,也可以用于任何其他内容,包括图表、代码示例或其他媒体。

第一章: 新的结构化元素