2011九月14
HTML5 每天记录一点 （二）
拿blog举例，一般都有侧边栏。在侧边栏，我们可以记录一些友情链接、标签云等等。这些一般都和左侧文章中的正文(article）相关，html5中单独有一个标签：aside，其定义的是正文之外的内容。
<article>
今天啊，爷爷主要给你讲一下粮票的故事：
</article>
<aside>
你想买粮票吗？XXX收藏专家为您服务！
</aside>
今天啊，爷爷主要给你讲一下粮票的故事：
</article>
<aside>
你想买粮票吗？XXX收藏专家为您服务！
</aside>
有些文章上面说，aside主要是对应于article的，所以有aside就应该有article标签。但是像w3schools上面的示例也没有article标签，具体，大家自行分析！
过去，我们的一个html页面基本结构代码如下：
<div class='header'>
<div class='nav'>
</div>
</div>
<div class='content'>
<div class='left'>
</div>
<div class='right'>
</div>
</div>
<div class=‘footer'>
<div class='copyright'>
</div>
</div>
<div class='nav'>
</div>
</div>
<div class='content'>
<div class='left'>
</div>
<div class='right'>
</div>
</div>
<div class=‘footer'>
<div class='copyright'>
</div>
</div>
结构冗余，为了描述页头和页尾，我们一般使用div标签，然后通过指定className来设置样式。在html5中，我们可以使用更富有语义的header标签和footer标签，以及nav标签来完成我们的架构，代码如下：
<header>
<nav></nav>
</header>
<article>
<section></section>
<div></div>
</article>
<footer>
</footer>
<nav></nav>
</header>
<article>
<section></section>
<div></div>
</article>
<footer>
</footer>
在过去，我们一个图片下面加描述，其实一般情况下都是加一个新的标签，来写这个图片的意义。但是实际上，在搜索引擎也好，在html的结构中也好，根本无法标识出你写的描述与图片有什么关联。
现在，html5中为我们增加了figure标签，这个标签可以将其他标签与图片（传说中还有代码等）标签合为一个组标签。在里面的文字内容会是对图片的描述：
<figure>
<p>这张图是360的Logo</p>
<img src="http://img1.qihoo.com/images/2011/360/logo.png" />
</figure>
<figure>
<img src="http://img1.qihoo.com/images/2011/360/logo.png" />
<p>这张图是360的Logo</p>
</figure>
<p>这张图是360的Logo</p>
<img src="http://img1.qihoo.com/images/2011/360/logo.png" />
</figure>
<figure>
<img src="http://img1.qihoo.com/images/2011/360/logo.png" />
<p>这张图是360的Logo</p>
</figure>
好了，今天到这，赶明咱继续！
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2011/09/14/2233/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
不错哦,现在也在看HTML5,呵呵..
[回复]
又换皮了啊
[回复]
结构冗余，为了描述页头和页尾，我们一般使用div标签，然后通过指定className来设置样式
[回复]
在侧边栏，我们可以记录一些友情链接、
[回复]
[回复]
simaopig,去哪里了？这么就没回来？
[回复]
simaopig 回复:
十一月 10th, 2011 at 4:48 下午
多谢挂念，最近项目太忙，人又太懒，到家洗洗就睡了。根本不爱动啊。
[回复]
非常期待
[回复]
html5很强悍
[回复]