您的位置：首页 > Web前端 > HTML5

HTML5新布局元素

2016-09-01 23:00 381 查看

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></ul>
</nav>
<section>
给内容分段，页面分区。
<article>
定义一个独立的内容区块，如一篇文章、博客，里面可以嵌入其他元素，他有自己的头、尾主题部分。
</article>
<aside>
定义页面中独立于主要内容的区域，包含同一主题的信息，但是又和主题内容不相同，例如广告等。
</aside>
</section>
<footer>
通常会放在一个网页的底部会包含友情链接、版权声明、文章建立的日期、联系方式等，通常会放在页脚。
<address>
通常用来说明作者的联系信息，例如：名字、电话号码等。
</address>
</footer>
</body>
</html></span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航