初识HTML5

　　作为一个前端人员，不学习HTML5也太out了吧！之前也看过一些网站用html5做出的华丽的效果，很想自己也试一试。

　　先对html5做一个大致的了解。

一.目标

　　致力于将Web平台提升到一个新的高度，一小组人在2004年成立了WHATWG，他们创立了HTML5规范，同时开始专门针对Web应用开发新功能----这被WHATWG认为是HTML中最薄弱的环节。Web2.0这个新词也就正是在哪个时候被发明的。

二.开发团队

　　1、WHATWG：来自各大浏览器厂商的人组成，负责开发HTML和Web应用API，同时为各浏览器厂商以及其他有意向的组织提供开放式合作。

　　2、W3C：负责发布HTML5规范。

　　3、IETF：负责Internet协议的团队。HTML5定义的一种新API（WebSocket API）依赖于新的WebSocket 协议。

三、核心理念

　　1、保持一切新特性平滑过渡。

　　2、效率和用户，HTML5规范是基于用户优先准则编写的，起宗旨是“用户即上帝”。

　　3、化简为繁。

copy的第一份HTML5代码

View Code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8" />
 5         <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
 6         Remove this if you use the .htaccess -->
 7         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 8         <title>html5</title>
 9         <meta name="description" content="" />
10         <meta name="author" content="smirk" />
11         <meta name="viewport" content="width=device-width; initial-scale=1.0" />
12         <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
13         <link rel="shortcut icon" href="/favicon.ico" />
14         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
15         <link rel="stylesheet" href="html5.css" />
16     </head>
17     <body>
18 
19         <header>
20             <h1>Header</h1>
21             <h2>Subtitle</h2>
22             <h4>html5</h4>
23         </header>
24             
25         <div id="container">
26             <nav>
27                 <h3>Nav</h3>
28                     <a href="/">Home</a>
29                     <a href="/">Page</a>
30                     <a href="/">Article</a>
31             </nav>
32             
33             <section>
34                 <article>
35                     <header>
36                         <h1>Article Header</h1>
37                     </header>
38                     
39                     <p>I never have a dream come true.</p>
40                     <p>Beginning HTML5.</p>
41                     <footer>
42                         <h2>Article Footer</h2>
43                     </footer>
44                 </article>
45                 
46                 <article class="ar">
47                     <header>
48                         <h1>Article Header</h1>
49                     </header>
50                     
51                     <p>I never have a dream come true.</p>
52                     <p>Beginning HTML5.</p>
53                     <footer>
54                         <h2>Article Footer</h2>
55                     </footer>
56                 </article>
57                 
58                 <article>
59                     <header>
60                         <h1>Article Header</h1>
61                     </header>
62                     
63                     <p>I never have a dream come true.</p>
64                     <p>Beginning HTML5.</p>
65                     <footer>
66                         <h2>Article Footer</h2>
67                     </footer>
68                 </article>
69             </section>
70                 <aside>
71                     <h3>Aside</h3>
72                     <p>HTML5: FJLASJ;LF FDJKF FDSJ KFSJFLFfklajfl fdjaklfjs fhgiwjfi</p>
73                 </aside>
74             <footer>
75                 <p>
76                     &copy; Copyright  by smirk
77                 </p>
78             </footer>
79         </div>
80     </body>
81 </html>

css文件

View Code

body {
        background-color: #CCCCCC;
        font-family: Geneva,Arial, Helvetica, sans-serif;
        margin: 0px auto;
        max- 900px;
        border-color: #FFF;
}

header {
        background-color: #F47D31;
        display: block;
        color: #FFF;
        text-align: center;
}

header h2 {
        margin: 0px;
}

h1 {
        font-size: 72px;
        margin: 0px;
}

h2 {
        font-size: 24px;
        margin: 0px;
        text-align: center;
        color: #F47D31;
}

h3 {
        font-size: 18px;
        margin: 0px;
        text-align: center;
        color: #F47D31;
}

h4 {
        color: #F47D31;
        background-color: #FFF;
        -webkit-box-shadow: 2px 2px 20px #888;
        -webkit-transform: rotate(-45deg);
        -moz-box-shadow: 2px 2px 20px #888;
        -moz-transform: rotate(-45deg);
        position: absolute;
        top: 50px;
        left: -120px;
        text-align:center;
}

nav {
        display: block;
        25%;
        float:left;
}

nav a:link, nav a:visited {
        display: block;
        border-bottom: 3px solid #fff;
        padding 10px;
        text-decoration: none;
        font-weight: bold;
        margin 5px;
}

nav a:hover {
        color: white;
        background-color: #F47D31;
}

nav h3 {
        margin: 15px;
        color:white;
}

#container {
        background-color: #888;
}

section {
        display: block;
         50%;
        float: left;
}

article {
        background-color: #eee;
        display: block;
        margin: 10px;
        padding: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 2px 2px 20px #888;
        -webkit-transform: rotate(-10deg);
        -moz-box-shadow: 2px 2px 20px #888;
        -moz-transform: rotate(-10deg);
}

.ar {
        background-color: #eee;
        display: block;
        margin: 10px;
        padding: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 2px 2px 20px #888;
        -webkit-transform: rotate(10deg);
        -moz-box-shadow: 2px 2px 20px #888;
        -moz-transform: rotate(10deg);
}

article footer {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        padding: 5px;
}

article h1{
        font-size: 18px;
}

aside {
        display: block;
         25%;
        float: left;
}

aside h3 {
        margin: 15px;
        color: white;
}

aside p {
        margin: 15px;
        color: white;
        font-weight: bold;
        font-style: italic;
}

footer {
        clear: both;
        display: block;
        background-color: #F47D31;
        color: #FFF;
        text-align: center;
        padding: 15px;
}

footer h2 {
        font-size: 14px;
        color: #FFF;
}

a {
        color:#F47D31;
}

a:hover {
        text-decoration: underline;
}