HTML5基本布局
HTML4布局
HTML5布局
基本的HTML5文档的模式为：
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>HTML5 Demo</title> <body> <header><h1></h1><h2></h2></header> <nav><ul><li></li><li></li></ul></nav> <section> <article></article> <article></article> </section> <aside></aside> <footer></footer> </body> </html>
推荐一个HTML5模板的在线编辑器
http://jsbin.com/#javascript,html
经常在项目中会用到reset的样式，在这里罗列出来参考下：
HTML5 Reset Stylesheet
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h
1
, h
2
, h
3
, h
4
, h
5
, h
6
, p, blockquote,
pre
,
abbr, address, cite,
code
,
del, dfn, em, img, ins, kbd, q, samp,
small
, strong,
sub
, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table,
caption
, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin
:
0
;
padding
:
0
;
border
:
0
;
outline
:
0
;
font-size
:
100%
;
vertical-align
:
baseline
;
background
:
transparent
;
}
body {
line-height
:
1
;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display
:
block
;
}
nav ul {
list-style
:
none
;
}
blockquote, q {
quotes
:
none
;
}
blockquote:before, blockquote:after,
q:before, q:after {
content
:
''
;
content
:
none
;
}
a {
margin
:
0
;
padding
:
0
;
font-size
:
100%
;
vertical-align
:
baseline
;
background
:
transparent
;
}
/* change colours to suit your needs */
ins {
background-color
:
#ff9
;
color
:
#000
;
text-decoration
:
none
;
}
/* change colours to suit your needs */
mark {
background-color
:
#ff9
;
color
:
#000
;
font-style
:
italic
;
font-weight
:
bold
;
}
del {
text-decoration
:
line-through
;
}
abbr[title], dfn[title] {
border-bottom
:
1px
dotted
;
cursor
:
help
;
}
table {
border-collapse
:
collapse
;
border-spacing
:
0
;
}
/* change border colour to suit your needs */
hr {
display
:
block
;
height
:
1px
;
border
:
0
;
border-top
:
1px
solid
#cccccc
;
margin
:
1em
0
;
padding
:
0
;
}
input, select {
vertical-align
:
middle
;
}
|
参照：http://html5doctor.com/html-5-reset-stylesheet/
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
