作为一个前端人员，不学习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 © 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;
}