学习Html5建站教程（三）Html5博客页面设计之理论

Html5博客页面设计

在做页面之前，我们应该先理解下面几个元素：

1、<header><footer>

Div是当今web设计的必备元素，但div的问题在于，它本身不反映与页面相关的任何信息。Html5改进了这种情况，可以把div替换成更具有描述性的语义元素。

例如：

<div class="header">

<h1>杨青个人博客网站/h1>

<p class="Teaser">一个站在web前端设计之路的女技术员个人博客网站</p>

<p class="Byline">design by DanceSmile</p>

</div>

.....

<div class="footer">

.....

</div>

用Html5的新语义元素<header>和<footer>来代替div。

像这样：

<header>

<h1>杨青个人博客网站/h1>

<p class="Teaser">一个站在web前端设计之路的女技术员个人博客网站</p>

<p class="Byline">design by DanceSmile</p>

</header>

.....

<footer>

.....

</footer>

<header>和<footer>元素替代了原来的div元素，如果你在修改一个大型的网站，这样直观的元素是不是就更容易辨别了呢？

2、<article>

Article这个元素，表示一篇任何形式的文章，类似新闻报道、论坛帖子、博客文章（不包括评论或者作者简介）等能够独立的内容区块。<artile>应该包含所有相关内容、包括标题、作者署名、以及文章正文。

3、<hgroup>

表示增强型的标题，分组两个或者多个标题元素，主要目的是把标题和副标题联系到一起。这是除了<header>与标题相关以外的另外一个元素，它的规范做法：

首先，如有只有一个普通标题，那使用一个（<h1>、<h2>、<h3>等）就可以了：

<h1>杨青个人博客网站</h1>

第二，如果除了主标题，还有一个副标题，那可以把这两个标题写在一个<hgroup>元素中。只能放（<h1>、<h2>、<h3>等）其他任何元素都不要放：

<hgroup>

<h1>杨青个人博客网站</h1>

<h2>用html5+css3 制作一个简单博客</h2>

</hgroup>

第三，如果文章开头的内容很多，除了主标题之外，还有其他内容，比如内容摘要、发表时间、作者、图片或者小标题链接等，那就应该把他们放在一个<header>元素中。

<header>

<h1>杨青个人博客网站</h1>

<p class="Byline">design by DanceSmile</p>

</header>

第四，如果这个文章开头中还有一个副标题，那么除了把主标题和副标题放到<hgroup>中，还应该在外面加上<header>元素。

<header>

<hgroup>

<h1>杨青个人博客网站</h1>

<h2>用html5+css3 制作一个简单博客</h2>

</hgroup>

<p class="Byline">design by DanceSmile</p>

</header>

4、<figure> <figcaption>

<figure>元素可以理解成是插图，但是与图片的概念还不完全一样，插图独立于文本内容，但也与文本内容相关。

<figcaption>元素可以理解成插图的说明，提个醒，<figcaption>不是只能包含文本，任何html元素都可以，比如链接、小图标。<figcaption>包含了对图片的完整说明，所以alt文本就显得多于了，这种情况下，可以把<img>元素中的alt属性删除：

<figure>

<img src="/d/file/jstt/bj/2013-06-19/200e781ddaa1d92cc3996637d06c38b2.jpg">

<figcaption>图片来源：腾讯CDC《浅析网页色彩应用》</figcaption>

</figure>

5、<aside>

表示独立于周围的一个完整的内容块。例如，可以用aside创建一个附注栏，其中包含与主文章相关的内容或者链接。

本文链接：http://so.lmcjl.com/news/2330/