主体结构元素:section、article、nav、aside
【注】内容区块:是指将页面按逻辑进行分割的单位。例如对于书籍来说,章、节都可以成为内容区块;对于博客来说,导航菜单,文章正文,文章评论等每一个部分都可以称为内容区块。
article:可独自被外部引用的内容,可以是一篇博文,或报刊中的文章、一片论坛帖子。
苹果
发表日期:
苹果 ,植物类水果,多次花果...(“苹果”文章正文)
评论
发表者:陆凌牛
我喜欢苹果,我最喜爱的品种是红富士。
section:此元素通常有内容及其标题组成,但section元素并非一个普通的容器元素,当一个容器需要被定义样式或javascript定义行为时,推荐使用div而非section,
或者这样理解:section元素中的内容可以单独存储到数据库中或输出到word文档中
*通常不推荐为那些没有标题的内容使用section
也许很多人会将section和article两者混淆,下面贴段代码帮助理解。
苹果
苹果 ,植物类水果,多次花果...
红富士
红富士是从普通富士的芽(枝)变中选育出的着色系富的统称...
国光
国光苹果品,又名小国光、万寿。原产美国,1600年发现的偶然实生苗...
在上述代码中,内容首先是一段独立的、完整的内容,因此使用article元素。该内容是一篇关于苹果的文章,该文章分为3段,每一段都有一个独立的标题,因此使用了两个section。
在HTML5里,section元素强调的是分段或分块,而article强调独立性
section元素的使用禁忌:
1)不要将section元素用作设置样式的页面容器,那是div元素的工作。
2)如果article元素、aside元素或nav元素更符合使用条件,就不要使用section元素。
3)不要为没有标题的内容区块使用section元素。
nav:用作页面导航的链接组。
HTML5与CSS3的历史
HTML5的历史
讲述HTML5的历史的正文
...more... CSS3的历史
讲述CSS3的历史的正文
使用场合:传统导航条、侧边栏导航、页内导航、翻页操作。
aside:用来标示当前页面或文章的附属信息部分。
1):被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前article内容有关的参考资料、名词解释、文献等等。
第四节 词法闭包
lambda表达式可以创建词法闭包...(文章正文)
2):在article元素之外使用,作为页面或站点全局的附属信息部分。最典型的形式是侧边栏,其中的内容可以是友情链接,博客中的其他文章列表,广告单元等等。
非主体结构元素:header、hgroup、footer
header:通常用来放置整个页面或页面内的一个内容区块的标题,当然也可以包含其他内容,例如数据表格,搜索表单,相关logo等。
网页标题
文章标题
文章正文
强调:一个网页内并未限制header元素的个数!在HTML5规范中,一个header元素通常包括至少一个heading元素(h1-h6),也可以包括hgroup元素。
hgroup:将标题及其子标题进行分组的元素。hgroup通常会将h1~h6元素进行分组,如果文章只有一个主标题,就不需要hgroup元素。
文章标题
文章正文
如果有多个标题,则如下所示:
文章主标题
文章子标题
文章正文
footer:作为其上层父级内容区块或一个根区块的脚注。通常包含其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。与header一样,页面并未限制footer的个数。