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>
经常在项目中会用到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 }
参照：http://html5doctor.com/html-5-reset-stylesheet/
推荐一个HTML5模板的在线编辑器
http://jsbin.com/#javascript,html