您的位置:主页 > 新闻动态 > 环亚国际平台建设专题 >

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

日期:2014-06-29 09:21     来源:未知    作者admin    阅读:
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创建一个附注栏,其中包含与主文章相关的内容或者链接。
<友情连结> 天祥科技/ 合肥优派信息技术有限公司/ 申泽seo管理系统/ 福建拾方易网络科技有限公司/ 博客西藏/