HTML5新布局元素

来源：互联网发布：德惠农业科技网络书屋编辑：程序博客网时间：2024/05/24 07:06

1、header和footer
header:用于设置一个页面的标题部分，通常包含标题，LOGO，导航等。
通常会放置在文章的头部。
footer:通常会设置一个网页的底部，会包含友情链接、版权声明，文件建立日期，联系方式等。通常会放在页面的页脚。

2、article

用于定义一个独立的内容区块，比如一篇文章，一篇博客等。
article元素内可以嵌套其他元素，它可以有自己的头、尾、主体元素。

3、section元素

用来定义元素中的章节（通常应该有标题和段落）
定义文档中的特定的内容区块，可视为一个区域分组元素，用来给网页中的内容分块。
用来定义文档的主体内容。
用一句话来概括，它的作用就是给内容分段，页面分区。
article元素和section元素的区别：
前者强调内容的独立性，后者强调内容的关联性。
前者是独立完整的元素，后者是页面内容的分块。
本质上都是带有语义的div块元素。

4、aside/nav

aside
aside元素通常用来设置侧边栏。
用于定义article元素之外的内容，前提是这些内容与article元素的内容相关。
同时也可以嵌套在article元素的内部使用，作为主要内容的附属信息，比如与主内容有关的参考名次解释。
nav主要同于设置导航中的超链接。

5、time元素
HTML5中的微格式是为了简化浏览器对数据的提取，方便收索引擎的收索。
time元是HTML5新增的用于表示日期的元素。
time元素代表24小时中某个时刻或某个日期，表示时刻时间允许时间差。
datetime属性中的日期和时间要用文字“T”隔开。
pubdate属性是可选标签。表示文章的发表日期，新闻的发表日期。

6、hgroup/address
hgroup元素通常用来给标题分组，通常放在header中，但并非强制要求也，也不是绝对的。
address:通常用来说明作者的联系信息，例如：名字、电话号码等。

adress元素中的内容通常以斜体的形式显示。

具体例子如下：

<span style="font-size:14px;"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>HTML5新语义</title></head><body><header>这里是一个页面的标题部分通常包含标题、LOGO、导航等，通常放置在文章的开头。<hgroup>通常用于给标题分组，放在header中。但并非强制要求的。<h1>标题1</h1><h2>标题2</h2></hgroup><nav>这里主要用于设置导航中的超链接</nav><mark>展示文档中应该被高亮或者突出显示的部分，例如搜索词。</mark></header><nav><h1>标题q</h1><ul><!-- SideBar links --></ul></nav><section>给内容分段，页面分区。<article>定义一个独立的内容区块，如一篇文章、博客，里面可以嵌入其他元素，他有自己的头、尾主题部分。</article><aside>定义页面中独立于主要内容的区域，包含同一主题的信息，但是又和主题内容不相同，例如广告等。</aside></section><footer>通常会放在一个网页的底部会包含友情链接、版权声明、文章建立的日期、联系方式等，通常会放在页脚。<address>通常用来说明作者的联系信息，例如：名字、电话号码等。</address></footer></body></html></span>

1 0