摘要:目前,越來越多的網站使用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}" /> |