HTML入门:07HTML5语义化布局
HTML5提供了新的语义元素来明确一个web页面的不同部分,根据W3C HTML5文档规范,一般认为HTML5中的布局标签有八个:header、nav、section、article、aside、footer、figure、figcaption,其中最后两个figure、figcaption在HTML入门:06HTML5语义化标签 中已经讲过了,其余六个标签一般在页面中的布局位置如图所示。
下面来学习这六个布局标签的使用。
1 header标签
header标签定义文档或者文档的一部分区域的页眉。首先header标签描述了文档的头部区域,主要用于内容的介绍展示。在页面中,我们也可以同时使用多个header标签,例子如下。
示例:先输入一对head标签,在标签的中间和后面都插入内容,效果如下。
<header>
<h1>页面的头部</h1>
</header>
<p>页面的内容</p>
2 nav标签
nav用于定义页面的导航链接部分区域,但并不是所有的链接都必须包含在nav标签中。
示例:先输入nav标签并在中间位置建立几个菜单链接,效果如下。
<nav>
<a href="#">HTML</a>|
<a href="#">CSS</a>|
<a href="#">JavaScript</a>|
<a href="#">JQuery</a>
</nav>
3 section标签
section标签定义文档的节(片段、区段),比如章节、页眉、页脚或文档中的其他分节部分。 根据W3C HTML5文档,section包含了一组内容及其标题。
示例:输入section标签,并通过h1和p标签插入内容,然后再加入一组类似的代码,效果如下。
<section>
<h1>章节一标题</h1>
<p>章节一内容</p>
</section>
<section>
<h1>章节二标题</h1>
<p>章节二内容</p>
</section>
4 article标签
article标签一般用来定义语义上相对独立的内容。通常用在页面中的这几个部分:论坛帖子,报纸文章,博客条目,用户评论等等。
示例:输入article标签并插入内容,同样,再加入一组类似的代码,效果如下。
<article>
<h1>文章标题一</h1>
<p>文章内容</p>
</article>
<article>
<h1>文章标题二</h1>
<p>文章内容</p>
</article>
5 aside标签
aside标签定义页面主区域内容(即article)之外的内容,比如侧边栏。一般来说,aside标签的内容应与主区域的内容相关。
举例:输入aside标签,插入相应内容,效果如下。
<aside>
<h4>侧边栏标题</h4>
<p>侧边栏内容</p>
</aside>
6 footer标签
footer标签定义文档或者文档的一部分区域的页脚,描述了文档的底部区域。一个页脚通常包含文档的作者、著作权信息、链接的使用条款、联系信息等。
示例:输入footer标签,加入部分页面信息,效果如下。
<footer>
<p>文档的作者信息</p>
<p>文档的版权信息</p>
</footer>
通过以上几个标签的演示,大家会发现本文所介绍的标签很难从页面的呈现效果来彼此区分,这是因为这些标签只是从语义上做了区分,并不是header标签就只能放在页面的顶部,而footer标签只能放在页面的底部,之所以做了这样的规范,只是为了让标签的定义与使用在网页结构上更加语义化,使得搜索引擎及开发人员能更加迅速的理解当前网页的整个结构,也使得网络爬虫之类的程序能快速定位到相应的位置。