摘要:目前,越来越多的网站使用HTML5进行开发,本文提供了10段HTML5代码,它们可以帮你快速启动HTML5项目。
随着HTML5的流行,许多网站开始介绍HTML5元素和属性的用法,以及各种教程,并且越来越多老的浏览器开始兼容HTML5。
本文作者编译了10段非常实用的HTML5代码片段,开发者可以直接拿过去使用,帮你快速完成HTML5项目的开发工作,你也可以把它们当做一个学习资源,进行参考。
1.HTML5编写的CSS Reset
CSS Reset也可以写成Reset CSS,即重设浏览器样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
/* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/*/
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, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin
:
0
;
padding
:
0
;
border
:
0
;
outline
:
0
;
font-size
:
100%
;
vertical-align
:
baseline
;
background
:
transparent
;
}
article, aside, figure, footer, header,
hgroup, 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
; }
ins {
background-color
:
#ff9
;
color
:
#000
;
text-decoration
:
none
; }
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
#000
;
cursor
:
help
; }
/* tables still need cellspacing="0" in the markup */
table {
border-collapse
:
collapse
;
border-spacing
:
0
; }
hr {
display
:
block
;
height
:
1px
;
border
:
0
;
border-top
:
1px
solid
#ccc
;
margin
:
1em
0
;
padding
:
0
; }
input, select {
vertical-align
:
middle
; }
/* END RESET CSS */
|
2.HTML5 Video with Flash Fallback
解释下该段代码,如果浏览器不支持HTML5视频播放,那么会自动跳回Flash播放。
1
2
3
4
5
6
7
8
9
10
|
<
video
width
=
"640"
height
=
"360"
controls>
<
source
src
=
"__VIDEO__.MP4"
type
=
"video/mp4"
/>
<
source
src
=
"__VIDEO__.OGV"
type
=
"video/ogg"
/>
<
object
width
=
"640"
height
=
"360"
type
=
"application/x-shockwave-flash"
data
=
"__FLASH__.SWF"
>
<
param
name
=
"movie"
value
=
"__FLASH__.SWF"
/>
<
param
name
=
"flashvars"
value
=
"controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4"
/>
<
img
src
=
"__VIDEO__.JPG"
width
=
"640"
height
=
"360"
alt
=
"__TITLE__"
title
=
"No video playback capabilities, please download the video below"
/>
</
object
>
</
video
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE HTML>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
></
title
>
<
link
rel
=
"stylesheet"
href
=
"style.css"
>
<
script
type
=
"text/javascript"
src
=
"http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
></
script
>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<
script
scr
=
"script/script.js"
></
script
>
</
head
>
<
body
>
<
header
>
<
nav
>
</
nav
>
</
header
>
<
footer
>
</
footer
>
</
body
>
<
html
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
http-equiv
=
"content-type"
content
=
"text/html; charset=utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no"
/>
<
title
>Geo Location</
title
>
<
style
type
=
"text/css"
media
=
"screen"
>
html{ height: 100%; }
body{ height: 100%; margin: 0; padding: 0; }
#map{ width: 100%; height: 100%; }
</
style
>
<!-- jQuery Min -->
<
script
type
=
"text/javascript"
charset
=
"utf-8"
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"
></
script
>
<!-- Google Maps -->
<
script
type
=
"text/javascript"
charset
=
"utf-8"
src
=
"http://maps.google.com/maps/api/js?sensor=true"
></
script
>
<
script
charset
=
"utf-8"
type
=
"text/javascript"
>
mapWidth = screen.width;
mapHeight = screen.height;
$(document).ready(function(){
var geo = navigator.geolocation;
if( geo ){
//Used for Static Maps
geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
}
function createStaticMarker( markerColor, markerLabel, lat, lng ){
return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng;
}
function createStaticMap( position ){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var zoom = 20;
var sensor = true;
var img = $("<
img
>");
img.attr( { src: "http://maps.google.com/maps/api/staticmap?" +
"center=" +
lat + "," +
lng +
"&zoom=" + zoom +
"&size=" + mapWidth + "x" + mapHeight +
createStaticMarker( "blue", "1", lat, lng ) +
"&sensor=" + sensor } );
return img;
}
function showLocation( position ){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var latlng = new google.maps.LatLng( lat, lng );
$("#map").html( createStaticMap( position ) )
}
function mapError( e ){
var error;
switch( e.code ){
case 1:
error = "Permission Denied";
break;
case 2:
error = "Network or Satellites Down";
break;
case 3:
error = "GeoLocation timed out";
break;
case 0:
error = "Other Error";
break;
}
$("#map").html( error );
}
});
</
script
>
</
head
>
<
body
>
<
div
id
=
"map"
>
</
div
>
</
body
>
</
html
>
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Untitled</
title
>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</
head
>
<
body
>
</
body
>
</
html
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE HTML>
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
/>
<
title
>Your Website</
title
>
</
head
>
<
body
>
<
header
>
<
nav
>
<
ul
>
<
li
>Your menu</
li
>
</
ul
>
</
nav
>
</
header
>
<
section
>
<
article
>
<
header
>
<
h2
>Article title</
h2
>
<
p
>Posted on <
time
datetime
=
"2009-09-04T16:31:24+02:00"
>September 4th 2009</
time
> by <
a
href
=
"#"
>Writer</
a
> - <
a
href
=
"#comments"
>6 comments</
a
></
p
>
</
header
>
<
p
>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</
p
>
</
article
>
<
article
>
<
header
>
<
h2
>Article title</
h2
>
<
p
>Posted on <
time
datetime
=
"2009-09-04T16:31:24+02:00"
>September 4th 2009</
time
> by <
a
href
=
"#"
>Writer</
a
> - <
a
href
=
"#comments"
>6 comments</
a
></
p
>
</
header
>
<
p
>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</
p
>
</
article
>
</
section
>
<
aside
>
<
h2
>About section</
h2
>
<
p
>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</
p
>
</
aside
>
<
footer
>
<
p
>Copyright 2009 Your name</
p
>
</
footer
>
</
body
>
</
html
>
|
1
2
3
4
5
6
7
8
9
|
<
section
contextmenu
=
"mymenu"
>
<
p
>Yes, this section right here</
p
>
</
section
>
<
menu
type
=
"context"
id
=
"mymenu"
>
<
menuitem
label
=
"Please do not steal our images"
icon
=
"img/forbidden.png"
></
menuitem
>
<
menu
label
=
"Social Networks"
>
<
menuitem
label
=
"Share on Facebook"
onclick
=
"window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;"
> </
menuitem
>
</
menu
>
</
menu
>
|
1
2
3
4
5
6
7
8
|
<
input
name
=
"frameworks"
list
=
"frameworks"
/>
<
datalist
id
=
"frameworks"
>
<
option
value
=
"MooTools"
>
<
option
value
=
"Moobile"
>
<
option
value
=
"Dojo Toolkit"
>
<
option
value
=
"jQuery"
>
<
option
value
=
"YUI"
>
</
datalist
>
|
1
2
3
4
5
6
|
<
label
for
=
"saddr"
>Enter your location</
label
>
<
input
type
=
"text"
name
=
"saddr"
/>
<
input
type
=
"hidden"
name
=
"daddr"
value
=
"350 5th Ave New York, NY 10018 (Empire State Building)"
/>
<
input
type
=
"submit"
value
=
"Get directions"
/>
</
form
>
|
1
|
<
input
type
=
"text"
title
=
"email"
required
pattern
=
"[^@]+@[^@]+\.[a-zA-Z]{2,6}"
/>
|