首页 > 代码库 > 第2章 —— HTML 5 的结构
第2章 —— HTML 5 的结构
在HTML 5对HTML 4所做的各方面修改中,一个比较重大的修改就是为了使文档结构更加的清晰明确,容易阅读,增加了很多新的结构元素。
(1) 新增的主题结构元素
1. article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一片论坛体诶、一段用户评论或一个独立的插件。
除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里)。
<article> <header> <h1>苹果</h1> <p>发表日期:<time>2016-10-29</time></p> </header> <p><b>苹果</b>,植物类水果</p> <footer> <p><small>著作权归罗浩然公司所有。</small></p> </footer> </article>
2. section元素
section元素用来对网站或应用程序中页面上的内容进行分块,一个section元素通常有内容和标题组成。但section并非是一个普通的容器元素。当一个容器需要直接定义样式或通过脚本定义行为是,推荐使用div。
我们也可以这样理解:section元素中的内容可以单独存储到数据库中或输出到word文档中。
通常不推荐为那些没有标题的内容使用section元素。
我们来看看section和article的区别和联系:
<article> <h1>苹果</h1> <section> <h2>红富士</h2> <p>红富士是容普通富士..</p> </section> <section> <h2>国光</h2> <p>国光苹果,又名小国光...</p> </section> </article>
该文章每一个部分都有一个独立的标题,因此使用了两个section元素。
在HTML 5中,article元素可以看做成特殊的section元素,它比section元素更加强调独立性。section强调分段或者分块。具体来说,如果一段内容比较完整、独立的时候,使用article。而将一块内容分为几块的时候,用section元素进行分段。
3. nav元素
nav元素是一个可以用来作为页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。
4. aside元素
aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。
① 包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的参考资料、名词解释等。
② 在article之外使用,作为页面或站点全局的附属信息部分。
(2) 新增的非主体结构元素
1. header元素
header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容。
需要强调的一点是,一个页面不限制只有一个header元素。你可以为每一个内容区域加上一个header。
在HTML5中,一个header元素通常至少要包含一个heading(h1~h6),也可以包括hgroup元素,还可以包含nav。
2. footer元素
footer元素可以作为其上层父级内容区域或一个根区块的脚注。footer通常包括相关区块的脚注信息,如作者、相关订阅链接以及版权信息等。
3. address元素
address元素用来在文档中呈现联系信息。address应该不只是用来呈现电子邮箱或真实地址,还可以用来展示跟文档相关的联系人的所有联系信息。
4. main元素
main元素表示展示网页中的主要内容。
每个网页内部只能放置一个main元素。不能将main元素放在任何article、aside、footer、header或者nav元素内部。
第2章 —— HTML 5 的结构