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}" /> |
码农都是有尊严的
转载请注明来源,谢谢
http://www.cnblogs.com/benpao/