（三）html5的结构
2015-07-01 16:19
363 查看
一、新增的主题结构元素
在html5中，为了使文档的结构更加清晰明确，追加了几个页眉。页脚、内容区块等文档结构相关的结构元素，
1、article元素
article元素代表文档、页面或者应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客挥着报刊中的文章，一片论坛中的帖子或者其他任何独立的内容；除了内容部分，一个article元素通常有他自己的标题（一般放在一个header元素中），有时还有自己的脚注。
<article>
<header>
<h1>苹果</h1>
<p>发表日期：<time pubdate="pubdate">2015/6/30</time></p>
</header>
<p><b>苹果</b>是一种植物类水果，多次花果。。。（正文）</p>
<footer>
<p><small>著作权归刘梦冰所有</small></p>
</footer>
</article>
article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联（与下面section配合起来使用）；
另外，article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样：
<article>
<h1>苹果</h1>
<object>
<param name="allowFullScreen" value="true"></param>
<embed src="#" width="600" height="395"></embed>
</object>
</article>
2、section元素
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。section元素中的内容可以单独存储到数据库中或者输出到word文档中。
<section>
<h1>苹果</h1>
<p><b>苹果</b>是一种植物类水果。。。（正文）</p>
</section>
section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，请不要与“有着自己完整的、独立的内容的”article元素混淆。section元素强调分段或者分块，而article强调独立性。在html5中，你可以将所有页面的从属部分，譬如导航条、菜单、版权说明等包含在一个统一的页面中，以便统一使用CSS样式来进行装饰。
section元素的使用禁忌：
（1）不要将section元素用作设置样式的页面容器，那是div的工作；
（2）如果article元素、aside元素或者nav元素更符合使用条件，不要使用section元素；
（3）不要为没有标题的内容区块使用section元素。
section与article结合使用：
<article>
<h1>苹果</h1>
<p>发表日期：<time pubdate="pubdate">2015/6/30</time></p>
<section>
<h2>红富士苹果</h2>
<p>红富士苹果是从普通的芽变中选取的。。。</p>
</section>
<section>
<h2>国光苹果</h2>
<p>国光苹果，又名小国光，原产于美国。。。</p>
</section>
</article>
=====================================================
<section>
<h1>水果</h1>
<article>
<h2>苹果</h2>
<p>苹果是一种水果。。。</p>
</article>
<article>
<h2>橘子</h2>
<p>橘子是一种水果。。。</p>
</article>
<article>
<h2>香蕉</h2>
<p>香蕉是一种水果。。。</p>
</article>
</section>
3、nav元素
nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或者当前页面的其他部位。并不是所有的链接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。
<body>
<h1>水果</h1>
<!-- 用于页面导航，将页面跳转到其他页面上去 -->
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">开发文档</a></li>
</ul>
</nav>
<article>
<header>
<h1>HTML5与CSS3</h1>
<!-- 用作这篇文章中两个组成部分的页内导航 -->
<nav>
<ul>
<li><a href="#">HTML5的历史</a></li>
<li><a href="#">CSS3的历史</a></li>
</ul>
</nav>
</header>
<section id="HTML5">
<h1>HTML5的历史</h1>
<p>讲述HTML5的历史</p>
</section>
<section id="CSS3">
<h1>CSS3的历史</h1>
<p>讲述CSS3的历史</p>
</section>
<footer>
<p>
<a href="#">编辑</a>
<a href="#">删除</a>
<a href="#">重命名</a>
</p>
</footer>
</article>
<footer>
<p><small>版权所有：刘梦冰</small></p>
</footer>
</body>
总结nav元素可以用于以下场合：
（1）传统导航条。现在主流网站上都有不同层级的导航条，起作用是将当前页面跳转到网站的其他页面上；
（2）侧边栏导航。作用是将页面从当前文章或当前商品跳转到其他文章或者其他商品页面上去；
（3）页内导航。作者是在本页面几个主要的组成部分之间进行跳转；
（4）翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。
注意：在html5中不要用menu元素代替nav元素；menu元素是用在一系列发出命令的菜单上，是一种交互性的元素，或者更确切地说是使用在web应用程序中的。
4、aside元素
表示当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有以下两种使用方法：
(1)被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等；
（2）在article元素之外使用，作为页面或者站点全局的附属信息部分。最典型的形式就是侧边栏，其中的个内容可以是友情链接，博客中的其他文章列表、广告单元等。
<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href="#">Tom</a> 10-24 14:28</li>
<li>
<a href="#">Lily</a> 10-24 14:28<br/>
<a href="#">作者见解独到，文章看了很受用！</a>
</li>
</ul>
</nav>
</aside>
5、time元素与微格式
<time date="2015-6-30">2015年6月30日</time>
<time date="2015-6-30T20:00">2015年6月30日晚上8点(date属性中日期与时间之间要用T文字分隔，T表示时间)</time>
<time date="2015-6-30T20:00z">2015年6月30日晚上8点(加上Z文字表示给机器编码时使用UTC标准时间)</time>
<time date="2015-6-30T20:00+09::00">2015年6月30日晚上8点的美国时间(加上了时差)</time>
6、pubdate属性
可选的boolean值的属性，用到time元素上，代表文章（article元素）或者整个网页的发布日期。
二、新增的非主题结构元素
1、header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或者页面内容区块的标题，但也可以放置其他内容，例如数据表格、搜索表单或者相关的logo图片。注意：一个网页内并未限制header元素的个数，可以拥有多个，可以为每一个区块加一个header元素。
<header><h1>页面标题</h1></header>
2、hgroup元素
hgroup元素是将标题以及子标题进行分组的元素。通常会降h1-h6元素进行分组，譬如：一个内容区块的标题及其子标题算一组；
<article>
<header>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
</header>
<p>文章正文</p>
</article>
3、footer元素
footer元素可以作为其上层父级内容区块或是一个跟区块的脚注。
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
4、address元素
address元素用来在文档中呈现联系信息，包括文档作者或者文档维护者的名字。网站链接、电子邮箱、真实地址、电话号码等。
<address>
<a href="#">Tom</a>
<a href="#">Mary</a>
<a href="#">Lily</a>
</address>
三、HTML5的结构
在HTML5中，使用各种结构元素所描述出来的整个网页的层次结构就是网页的大纲。因此，在组织这份大纲时不能使用div元素，因为div元素只能作为容器，在需要对网页中某个局部使用整体样式时才使用。
大纲的编排规则：
1、显示编排内容区块（更加清晰明确）
显示编排是指明确使用section等元素创建文档结构，再每个内容区块内使用标题（h1-h6、hgroup等）；
2、隐式编排内容区块
所谓隐式编排，是指不明确使用section等元素，而是根据页面中所书写的各级标题（h1-h6、hgroup等）把各级内容区块自动创建出来。因为html5分析器只要看到书写了某个级别的标题，就会判断存在相应的内容区块。
3、标题分级
不同的标题有不同的级别，h1级别最高，h6级别最低。在进行隐式编排时按如下规则自动生成内容区块。
（1）如果新出现的标题比上一个标题级别低，将生成下级内容区块；
（2）如果新出现的标题比上一个标题级别高，或者两者级别相等，将生成新的内容区块。
因为隐式编排容易使自动生成的整个文档结构与所想要的文档结构不一样，而且也容易引起文档结构的混乱，所以尽量使用显示编排。
4、不同内容区块可以使用相同级别的标题
不同内容区块可以使用相同级别的标题。例如：父内容区块与子内容区块可以使用相同的级别的标题h1.这样做的好处是：每个级别的标题都可以单独设计，如果既需要“整个网页的标题”又需要“文章的标题”，这样做将会带来很大的便利。
5、网页编排示例
<!DOCTYPE html>
<head>
<title>网页编排示例</title>
<meta charset="utf-8"></meta>
</head>
<body>
<!-- 网页标题 -->
<header>
<h1>网页标题</h1>
<!-- 网站导航链接 -->
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">帮助</a></li>
</ul>
</nav>
</header>
<!-- 文章正文 -->
<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
<!-- 文章评论 -->
<section class="comments">
<article>
<h1>评论标题</h1>
<p>评论正文</p>
</article>
</section>
</article>
<!-- 版权信息 -->
<footer>
<small>版权所有：刘梦冰</small>
</footer>
</body>
6、对新的结构元素使用样式
因为很多浏览器尚未对html5中新增的结构元素提供支持，我们无法知道客户端使用的浏览器是否支持这些元素，所以需要使用CSS追加如下声明，目的是通知浏览器页面中使用的HTML5中的新增元素都以块方式显示。
//追加block说明
article,aside,dialog,figure,footer,header,legend,nav,section{
display:block;
}
//正常使用样式
nav{ float;left;width:20%; }
article{ float:right;width:79%; }
另外，IE8之前的浏览器是不支持使用CSS的方法来使用这些尚未支持的结构元素的，为了在IE浏览器中正常使用这些结构元素，需要使用javascript脚本，如下所示：
<!-- 在脚本中创建元素 -->
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
</script>
<style>
<!-- 正常使用样式 -->
nav{ float;left;width:20%; }
article{ float:right;width:79%; }
</style>
虽然这段javascript脚本在其他浏览器中是不需要的，但是它不会对这些浏览器造成不良的影响。另外，在IE9之后，就不要这段脚本了。
在html5中，为了使文档的结构更加清晰明确，追加了几个页眉。页脚、内容区块等文档结构相关的结构元素，
1、article元素
article元素代表文档、页面或者应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客挥着报刊中的文章，一片论坛中的帖子或者其他任何独立的内容；除了内容部分，一个article元素通常有他自己的标题（一般放在一个header元素中），有时还有自己的脚注。
<article>
<header>
<h1>苹果</h1>
<p>发表日期：<time pubdate="pubdate">2015/6/30</time></p>
</header>
<p><b>苹果</b>是一种植物类水果，多次花果。。。（正文）</p>
<footer>
<p><small>著作权归刘梦冰所有</small></p>
</footer>
</article>
article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联（与下面section配合起来使用）；
另外，article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样：
<article>
<h1>苹果</h1>
<object>
<param name="allowFullScreen" value="true"></param>
<embed src="#" width="600" height="395"></embed>
</object>
</article>
2、section元素
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。section元素中的内容可以单独存储到数据库中或者输出到word文档中。
<section>
<h1>苹果</h1>
<p><b>苹果</b>是一种植物类水果。。。（正文）</p>
</section>
section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，请不要与“有着自己完整的、独立的内容的”article元素混淆。section元素强调分段或者分块，而article强调独立性。在html5中，你可以将所有页面的从属部分，譬如导航条、菜单、版权说明等包含在一个统一的页面中，以便统一使用CSS样式来进行装饰。
section元素的使用禁忌：
（1）不要将section元素用作设置样式的页面容器，那是div的工作；
（2）如果article元素、aside元素或者nav元素更符合使用条件，不要使用section元素；
（3）不要为没有标题的内容区块使用section元素。
section与article结合使用：
<article>
<h1>苹果</h1>
<p>发表日期：<time pubdate="pubdate">2015/6/30</time></p>
<section>
<h2>红富士苹果</h2>
<p>红富士苹果是从普通的芽变中选取的。。。</p>
</section>
<section>
<h2>国光苹果</h2>
<p>国光苹果，又名小国光，原产于美国。。。</p>
</section>
</article>
=====================================================
<section>
<h1>水果</h1>
<article>
<h2>苹果</h2>
<p>苹果是一种水果。。。</p>
</article>
<article>
<h2>橘子</h2>
<p>橘子是一种水果。。。</p>
</article>
<article>
<h2>香蕉</h2>
<p>香蕉是一种水果。。。</p>
</article>
</section>
3、nav元素
nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或者当前页面的其他部位。并不是所有的链接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。
<body>
<h1>水果</h1>
<!-- 用于页面导航，将页面跳转到其他页面上去 -->
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">开发文档</a></li>
</ul>
</nav>
<article>
<header>
<h1>HTML5与CSS3</h1>
<!-- 用作这篇文章中两个组成部分的页内导航 -->
<nav>
<ul>
<li><a href="#">HTML5的历史</a></li>
<li><a href="#">CSS3的历史</a></li>
</ul>
</nav>
</header>
<section id="HTML5">
<h1>HTML5的历史</h1>
<p>讲述HTML5的历史</p>
</section>
<section id="CSS3">
<h1>CSS3的历史</h1>
<p>讲述CSS3的历史</p>
</section>
<footer>
<p>
<a href="#">编辑</a>
<a href="#">删除</a>
<a href="#">重命名</a>
</p>
</footer>
</article>
<footer>
<p><small>版权所有：刘梦冰</small></p>
</footer>
</body>
总结nav元素可以用于以下场合：
（1）传统导航条。现在主流网站上都有不同层级的导航条，起作用是将当前页面跳转到网站的其他页面上；
（2）侧边栏导航。作用是将页面从当前文章或当前商品跳转到其他文章或者其他商品页面上去；
（3）页内导航。作者是在本页面几个主要的组成部分之间进行跳转；
（4）翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。
注意：在html5中不要用menu元素代替nav元素；menu元素是用在一系列发出命令的菜单上，是一种交互性的元素，或者更确切地说是使用在web应用程序中的。
4、aside元素
表示当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有以下两种使用方法：
(1)被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等；
（2）在article元素之外使用，作为页面或者站点全局的附属信息部分。最典型的形式就是侧边栏，其中的个内容可以是友情链接，博客中的其他文章列表、广告单元等。
<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href="#">Tom</a> 10-24 14:28</li>
<li>
<a href="#">Lily</a> 10-24 14:28<br/>
<a href="#">作者见解独到，文章看了很受用！</a>
</li>
</ul>
</nav>
</aside>
5、time元素与微格式
<time date="2015-6-30">2015年6月30日</time>
<time date="2015-6-30T20:00">2015年6月30日晚上8点(date属性中日期与时间之间要用T文字分隔，T表示时间)</time>
<time date="2015-6-30T20:00z">2015年6月30日晚上8点(加上Z文字表示给机器编码时使用UTC标准时间)</time>
<time date="2015-6-30T20:00+09::00">2015年6月30日晚上8点的美国时间(加上了时差)</time>
6、pubdate属性
可选的boolean值的属性，用到time元素上，代表文章（article元素）或者整个网页的发布日期。
二、新增的非主题结构元素
1、header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或者页面内容区块的标题，但也可以放置其他内容，例如数据表格、搜索表单或者相关的logo图片。注意：一个网页内并未限制header元素的个数，可以拥有多个，可以为每一个区块加一个header元素。
<header><h1>页面标题</h1></header>
2、hgroup元素
hgroup元素是将标题以及子标题进行分组的元素。通常会降h1-h6元素进行分组，譬如：一个内容区块的标题及其子标题算一组；
<article>
<header>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
</header>
<p>文章正文</p>
</article>
3、footer元素
footer元素可以作为其上层父级内容区块或是一个跟区块的脚注。
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
4、address元素
address元素用来在文档中呈现联系信息，包括文档作者或者文档维护者的名字。网站链接、电子邮箱、真实地址、电话号码等。
<address>
<a href="#">Tom</a>
<a href="#">Mary</a>
<a href="#">Lily</a>
</address>
三、HTML5的结构
在HTML5中，使用各种结构元素所描述出来的整个网页的层次结构就是网页的大纲。因此，在组织这份大纲时不能使用div元素，因为div元素只能作为容器，在需要对网页中某个局部使用整体样式时才使用。
大纲的编排规则：
1、显示编排内容区块（更加清晰明确）
显示编排是指明确使用section等元素创建文档结构，再每个内容区块内使用标题（h1-h6、hgroup等）；
2、隐式编排内容区块
所谓隐式编排，是指不明确使用section等元素，而是根据页面中所书写的各级标题（h1-h6、hgroup等）把各级内容区块自动创建出来。因为html5分析器只要看到书写了某个级别的标题，就会判断存在相应的内容区块。
3、标题分级
不同的标题有不同的级别，h1级别最高，h6级别最低。在进行隐式编排时按如下规则自动生成内容区块。
（1）如果新出现的标题比上一个标题级别低，将生成下级内容区块；
（2）如果新出现的标题比上一个标题级别高，或者两者级别相等，将生成新的内容区块。
因为隐式编排容易使自动生成的整个文档结构与所想要的文档结构不一样，而且也容易引起文档结构的混乱，所以尽量使用显示编排。
4、不同内容区块可以使用相同级别的标题
不同内容区块可以使用相同级别的标题。例如：父内容区块与子内容区块可以使用相同的级别的标题h1.这样做的好处是：每个级别的标题都可以单独设计，如果既需要“整个网页的标题”又需要“文章的标题”，这样做将会带来很大的便利。
5、网页编排示例
<!DOCTYPE html>
<head>
<title>网页编排示例</title>
<meta charset="utf-8"></meta>
</head>
<body>
<!-- 网页标题 -->
<header>
<h1>网页标题</h1>
<!-- 网站导航链接 -->
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">帮助</a></li>
</ul>
</nav>
</header>
<!-- 文章正文 -->
<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
<!-- 文章评论 -->
<section class="comments">
<article>
<h1>评论标题</h1>
<p>评论正文</p>
</article>
</section>
</article>
<!-- 版权信息 -->
<footer>
<small>版权所有：刘梦冰</small>
</footer>
</body>
6、对新的结构元素使用样式
因为很多浏览器尚未对html5中新增的结构元素提供支持，我们无法知道客户端使用的浏览器是否支持这些元素，所以需要使用CSS追加如下声明，目的是通知浏览器页面中使用的HTML5中的新增元素都以块方式显示。
//追加block说明
article,aside,dialog,figure,footer,header,legend,nav,section{
display:block;
}
//正常使用样式
nav{ float;left;width:20%; }
article{ float:right;width:79%; }
另外，IE8之前的浏览器是不支持使用CSS的方法来使用这些尚未支持的结构元素的，为了在IE浏览器中正常使用这些结构元素，需要使用javascript脚本，如下所示：
<!-- 在脚本中创建元素 -->
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
</script>
<style>
<!-- 正常使用样式 -->
nav{ float;left;width:20%; }
article{ float:right;width:79%; }
</style>
虽然这段javascript脚本在其他浏览器中是不需要的，但是它不会对这些浏览器造成不良的影响。另外，在IE9之后，就不要这段脚本了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5实战70行代码实现《疯狂抢NIKE》游戏
- HTML5 中工作线程（Web Worker）简介
- html5(未完待续)
- HTML5 语法
- Html5 ontouchstart与ontouchend
- HTML5 获得音视频播放
- 20个大大节省你时间的HTML5开发工具
- 20个大大节省你时间的HTML5开发工具
- H5基于iScroll实现下拉刷新，上拉加载更多
- HTML5 div css3漂亮的侧边菜单栏
- （一）html5中的新增元素和废除元素
- 今日之学-bug修改
- html5桌面通知,notification的使用,右下角出现通知框
- html5之meta标签viewport应用
- html5学习笔记（2）
- html5学习笔记（1）简介
- 利用html5中的localStorage获取网页被访问的次数
- html5的本地存储localStorage和sessionStorage
- HTML5 data-* 自定义属性
- HTML5图片旋转