米可瞳
前端爱好者一枚

 

上面是Html4的结构,但是目前为止,还没有单独的标签来代替万能的div。这样html5应运而生。

研究者有研究过div的class命名。有footer,header,nav,menu,content和main.那为什么结构结点不是这些命名呢。

所以html5将header,footer,nav,article和section应用于网页中,满足大家普遍的需求,创建新型的标签。例如:

 

 

Html5简单的结构熟悉

<header> and <footer>

为了开发网站更轻松,让我们来关注一下html5新的标签属性。下面讲到一些新的html5属性。

<section>

Section属性是一种通用的文档或应用节,一种包含头部的富有主题性的内容组合。它不像div那样,创建一种有利于部分造型或脚本的节点。当你想要把内容明确地概述下来的话,section是一种不错的选择。

<aside>

Aside属性是一种跟一旁内容迫切相关的页面节。可用于侧边栏,广告,导航组合以及一切可以和主页脱离的内容。

<article>

Article属性包含很多种类,例如论坛,杂志或是新闻文章或是博客。它用于网页或网站应用,可供分配或循环利用。当你要使文章内容更有意义,你就必须用到aricle了。

<footer>

Footer属性代表了一种父节点或子节点文档。它包含了一些信息,可能有文档的信息,版权等。它普遍用于全网或一篇文章的底部。

<header>

Header属性象征一个介绍性,导航型的组合。包含了头部(h1~h6)

<nav>

Nav属性是由导航链接组成,并不是所有的组合或链接都要用nav.紧紧是主导导航模块才可以。

<address>

Address属性代表跟文章最近的信息。

<time>

Time属性用于表达日期或时间。

Css3简单的属性

box-shadow

盒子阴影

-moz-box-shadow: 0px 0px 8px red;

-khtml-box-shadow: 0px 0px 8px red;

-webkit-box-shadow: 0px 0px 8px red;

box-shadow: 0px 0px 8px red;

 

border-radius

边框圆角

-moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;


text-shadow


字体阴影
text-shadow: 1px 1px 1px #2c0306;

参考网站:http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

未完待续……

 

posted on 2013-11-22 16:24  米可瞳  阅读(389)  评论(0编辑  收藏  举报