HTML5基本布局

HTML4布局

HTML5布局

基本的HTML5文档的模式为：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>HTML5 Demo</title>
 6 <body>
 7 <header></header>
 8 <nav></nav>
 9 <section>
10     <article>
11         <section></section>
12     </article>
13 </section>
14 <aside></aside>
15 <footer></footer>
16 </body>
17 </html>

View Code

经常在项目中会用到reset的样式，在这里罗列出来参考下：

HTML5 Reset Stylesheet

  1 /* 
  2 html5doctor.com Reset Stylesheet
  3 v1.6.1
  4 Last Updated: 2010-09-17
  5 Author: Richard Clark - http://richclarkdesign.com 
  6 Twitter: @rich_clark
  7 */
  8 
  9 html, body, div, span, object, iframe,
 10 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 11 abbr, address, cite, code,
 12 del, dfn, em, img, ins, kbd, q, samp,
 13 small, strong, sub, sup, var,
 14 b, i,
 15 dl, dt, dd, ol, ul, li,
 16 fieldset, form, label, legend,
 17 table, caption, tbody, tfoot, thead, tr, th, td,
 18 article, aside, canvas, details, figcaption, figure, 
 19 footer, header, hgroup, menu, nav, section, summary,
 20 time, mark, audio, video {
 21     margin:0;
 22     padding:0;
 23     border:0;
 24     outline:0;
 25     font-size:100%;
 26     vertical-align:baseline;
 27     background:transparent;
 28 }
 29 
 30 body {
 31     line-height:1;
 32 }
 33 
 34 article,aside,details,figcaption,figure,
 35 footer,header,hgroup,menu,nav,section { 
 36     display:block;
 37 }
 38 
 39 nav ul {
 40     list-style:none;
 41 }
 42 
 43 blockquote, q {
 44     quotes:none;
 45 }
 46 
 47 blockquote:before, blockquote:after,
 48 q:before, q:after {
 49     content:'';
 50     content:none;
 51 }
 52 
 53 a {
 54     margin:0;
 55     padding:0;
 56     font-size:100%;
 57     vertical-align:baseline;
 58     background:transparent;
 59 }
 60 
 61 /* change colours to suit your needs */
 62 ins {
 63     background-color:#ff9;
 64     color:#000;
 65     text-decoration:none;
 66 }
 67 
 68 /* change colours to suit your needs */
 69 mark {
 70     background-color:#ff9;
 71     color:#000; 
 72     font-style:italic;
 73     font-weight:bold;
 74 }
 75 
 76 del {
 77     text-decoration: line-through;
 78 }
 79 
 80 abbr[title], dfn[title] {
 81     border-bottom:1px dotted;
 82     cursor:help;
 83 }
 84 
 85 table {
 86     border-collapse:collapse;
 87     border-spacing:0;
 88 }
 89 
 90 /* change border colour to suit your needs */
 91 hr {
 92     display:block;
 93     height:1px;
 94     border:0;   
 95     border-top:1px solid #cccccc;
 96     margin:1em 0;
 97     padding:0;
 98 }
 99 
100 input, select {
101     vertical-align:middle;
102 }

View Code

参照：http://html5doctor.com/html-5-reset-stylesheet/

推荐一个HTML5模板的在线编辑器

http://jsbin.com/#javascript,html