标签：
1、新增的主体元素结构
aside元素：用来表示当前页面或文章的附属信息部分，主要有两种使用方法：
（1）被包含在article元素中作为主要内容的附属信息部分。
<!DOCTYPE html>
<head>
<meta charset="utf-8" >
<title>aside元素实例</title>
</head>
<body>
<header>
<h1>F#入门</h1>
</header>
<article>
<h1>第四节 词法闭包</h1>
<p>lambda表达式可以创建词法闭包...（文章正文）</p>
<aside>
<!--因为这个aside元素被放置在一个article元素内部，所以分析器将这个aside元素理解成是和article元素的内容相关联的。-->
<h1>名词解释</h1>
<dl>
<dt>F#</dt>
<dd>词法闭包是指，将创建lambda表达式时的环境保存起来...（详细解释）</dd>
</dl>
</aside>
</article>
</body>
</html>
（2）在article元素之外使用，作为页面或站点全局的附属信息部分。典型：侧边栏
<aside>
<nav>
<h2>评论</h2>
<ul>
<li>
<a href="http://blog.sina.com.cn/1683">erway</a> 10-24 14:25
</li>
<li>
<a href="http://blog.sina.com.cn/u/1345">太阳雨</a> 10-22 23:48<br/>
<a href="http://blog.sina.com.cn/s/blog_6a9kv8f.html#comment">顶，拜读一下大神的文章</a>
</li>
<li>
<a href="http://blog.sina.com.cn/u/1259295385">新浪官博</a> 08-12 08:50<br/>
<a href="#">恭喜！您已成功开通了博客</a>
</li>
</ul>
</nav>
</aside>
time元素与微格式：time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。
<time datetime="2010-11-13">2010年11月13日</time>
<time datetime="2010-11-13T20:00">我的生日晚上8点</time>
<time datetime="2010-11-13T20:00+09:00">我的生日晚上8点的美国时间</time>
pubdate属性：表示发布日期
<article>
<header>
<h1>苹果<time datetime="2010-10-11">10月29日</time>的舞会通知</h1>
<p>发布日期
<time datetime="2010-10-29" pubdate>2010年10月29日</time>
</p>
</header>
<p>苹果，植物类水果，多次花果...（“苹果”文章正文）</p>
...
</article>
这个有点搞不懂。。。pubdate到底有什么作用，有什么区别。。？
2、新增的非主体结构元素
header元素：具有引导和导航作用的结构元素，可以有多个，一个header元素包括至少一个heading元素
<header>
<hgroup>
<h1>IT新技术</h1>
<a href="http://blog.sina.com.cn/itnewtech">http://blog.sina.com.cn/itnewtech</a>
<a href="#">[订阅]</a>
<a href="#">[手机订阅]</a>
</hgroup>
<nav>
<ul>
<li>首页</li>
<li><a href="http://blog.sina.com.cn/articlelist1.html">博文目录</a></li>
<li><a href="http://phptp.blog.sina.com.cn/itnewtechl">图片</a></li>
<li><a href="http://photo.blog.sina.com.cn/itnewtech">关于我</a></li>
</ul>
</nav>
</header>
hgroup元素：将标题及其子标题进行分组的元素。
<article>
<header>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</header>
<p>文章正文</p>
</article>
footer元素：作为其上层父级内容区块或是一个根区块的脚注，还可以在article或section元素中添加footer元素
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
address元素：呈现联系信息
<address>
<a href=http://blog.sina.com.cn/itnewtech>陆凌牛</a>
<a href=http://blog.sina.com.cn/zhangyu>张玉</a>
<a href=http://blog.sina.com.cn/baiquanli>白权立</a>
</address>
footer、time、address结合使用
<footer>
<div>
<address>
<a title="文章作者：陆凌牛" href="http://blog.sina.com.cn/itnewtech">陆凌牛</a>
</address>
发表于<time datetime="2010-10-04">2010年10月4日</time>
</div>
</footer>
3、HTML 5结构
大纲
（1）显示编排内容区块
<body>
<h1>网页级内容区块标题</h1>
<P>网页级内容区块的正文</P>
<section>
<h2>section级内容区块的标题</h2>
<p>section级内容区块的正文</p>
</section>
</body>
（2）隐式编排内容区块
<body>
<h1>网页级内容区块标题</h1>
<P>网页级内容区块的正文</P>
<!--分析器根据h2等元素判断生成内容区块-->
<h2>section级内容区块的标题</h2>
<p>section级内容区块的正文</p>
</body>
（3）标题分级：出现新的标题比上一个标题级别低，生成下级内容区块，高或相等生成新的内容区块。
<body>
<section>
<h2>section级内容区块的标题</h2>
<p>section级内容区块的正文</p>
<!--分析器根据h2等元素判断生成内容区块-->
<h1>新的section级别的内容区块的标题</h1>
<p>新的section级别的内容区块的正文</p>
</section>
</body>
（4）不同的内容区块可以使用相同级别的标题
<body>
<h1>网页的标题</h1>
<article>
<header>
<hgroup>
<h1>文章标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
</header>
</article>
</body>
（5）网页编排示例
<!DOCTYPE html>
<head>
<meta charset="utf-8" >
<title>网页编排示例</title>
</head>
<body>
<!--网页标题-->
<header>
<h1>网页标题</h1>
<!--网站导航链接-->
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="help.html">帮助</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>
</html>
对新的结构元素使用样式：通知浏览器页面中使用的HTML 5中新增的元素都是以块状方式显示的
//追加block声明
article，aside，dialog，figure，footer，header，legend，nav，section {dispaly:block;}
//正常使用样式
nav{float:left;width:20%;}
article{float:right;width:79%;}
为了IE 8及之前的版本也可正常使用，要添加Javascript脚本
<script>
docement.createElement("header");
docement.createElement("nav");
docement.createElement("article");
docement.createElement("footer");
</script>
<style>
//正常使用样式
nav{float:left;width:20%;}
article{float:right;width:79%;}
</style>
article元素的样式
一个网页中可能有多个独立的article元素，每一个article元素都允许有自己的标题与脚注等从属元素，并允许对自己的从属元素单独使用样式。
标签：
原文地址：http://www.cnblogs.com/wddx/p/5032175.html
