随着HTML5的流行,许多网站开始介绍HTML5元素和属性的用法,以及各种教程,并且越来越多老的浏览器开始兼容HTML5。
本文作者编译了10段非常实用的HTML5代码片段,开发者可以直接拿过去使用,帮你快速完成HTML5项目的开发工作,你也可以把它们当做一个学习资源,进行参考。
1.HTML5编写的CSS Reset
CSS Reset也可以写成Reset CSS,即重设浏览器样式。
01 | /* 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/*/ |
02 | html, body, div, span, object, iframe, |
03 | h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , p, blockquote, pre , |
04 | abbr, address, cite, code , |
05 | del, dfn, em, img, ins, kbd, q, samp, |
06 | small , strong, sub , sup, var, |
07 | b, i, |
08 | dl, dt, dd, ol, ul, li, |
09 | fieldset, form, label, legend, |
10 | table, caption , tbody, tfoot, thead, tr, th, td, |
11 | article, aside, figure, footer, header, hgroup, menu, nav, section, menu, |
12 | time, mark, audio, video { |
13 | margin : 0 ; |
14 | padding : 0 ; |
15 | border : 0 ; |
16 | outline : 0 ; |
17 | font-size : 100% ; |
18 | vertical-align : baseline ; |
19 | background : transparent ; |
20 | } |
21 | article, aside, figure, footer, header, |
22 | hgroup, nav, section { display : block ; } |
23 | nav ul { list-style : none ; } |
24 | blockquote, q { quotes : none ; } |
25 | blockquote:before, blockquote:after, |
26 | q:before, q:after { content : '' ; content : none ; } |
27 | a { margin : 0 ; padding : 0 ; font-size : 100% ; vertical-align : baseline ; background : transparent ; } |
28 | ins { background-color : #ff9 ; color : #000 ; text-decoration : none ; } |
29 | mark { background-color : #ff9 ; color : #000 ; font-style : italic ; font-weight : bold ; } |
30 | del { text-decoration : line-through ; } |
31 | abbr[title], dfn[title] { border-bottom : 1px dotted #000 ; cursor : help ; } |
32 | /* tables still need cellspacing="0" in the markup */ |
33 | table { border-collapse : collapse ; border-spacing : 0 ; } |
34 | hr { display : block ; height : 1px ; border : 0 ; border-top : 1px solid #ccc ; margin : 1em 0 ; padding : 0 ; } |
35 | input, select { vertical-align : middle ; } |
36 | /* END RESET CSS */ |
2.HTML5 Video with Flash Fallback
解释下该段代码,如果浏览器不支持HTML5视频播放,那么会自动跳回Flash播放。
01 | <video width= "640" height= "360" controls> |
02 | <source src= "__VIDEO__.MP4" type= "video/mp4" /> |
03 | <source src= "__VIDEO__.OGV" type= "video/ogg" /> |
04 | <object width= "640" height= "360" type= "application/x-shockwave-flash" data= "__FLASH__.SWF" > |
05 | <param name= "movie" value= "__FLASH__.SWF" /> |
06 | <param name= "flashvars" value= "controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> |
07 | <img src= "__VIDEO__.JPG" width= "640" height= "360" alt= "__TITLE__" |
08 | title= "No video playback capabilities, please download the video below" /> |
09 | </object> |
10 | </video> |
3.HTML5 Starter页面
01 | <!DOCTYPE HTML> |
02 | <html> |
03 | <head> |
04 | <meta charset = "utf-8" > |
05 | <title></title> |
06 | <link rel= "stylesheet" href= "style.css" > |
07 | <script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script> |
08 | <!--[if IE]><script src= "http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script><![endif]--> |
09 | <script scr = "script/script.js" ></script> |
10 | </head> |
11 | <body> |
12 | <header> |
13 | <nav> |
14 | </nav> |
15 | </header> |
16 | <footer> |
17 | </footer> |
18 | </body> |
19 | <html> |
4.创建谷歌静态地图
01 | <!DOCTYPE html> |
02 | < html lang = "en" > |
03 | < head > |
04 | < meta http-equiv = "content-type" content = "text/html; charset=utf-8" > |
05 | < meta name = "viewport" content = "width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" /> |
06 | < title >Geo Location</ title > |
07 | |
08 | < style type = "text/css" media = "screen" > |
09 | html{ height: 100%; } |
10 | body{ height: 100%; margin: 0; padding: 0; } |
11 | #map{ width: 100%; height: 100%; } |
12 | </ style > |
13 | <!-- jQuery Min --> |
14 | < script type = "text/javascript" charset = "utf-8" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" ></ script > |
15 | <!-- Google Maps --> |
16 | < script type = "text/javascript" charset = "utf-8" src = "http://maps.google.com/maps/api/js?sensor=true" ></ script > |
17 | < script charset = "utf-8" type = "text/javascript" > |
18 | mapWidth = screen.width; |
19 | mapHeight = screen.height; |
20 | |
21 | $(document).ready(function(){ |
22 | var geo = navigator.geolocation; |
23 | if( geo ){ |
24 | //Used for Static Maps |
25 | geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } ); |
26 | } |
27 | function createStaticMarker( markerColor, markerLabel, lat, lng ){ |
28 | return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng; |
29 | } |
30 | |
31 | function createStaticMap( position ){ |
32 | var lat = position.coords.latitude; |
33 | var lng = position.coords.longitude; |
34 | var zoom = 20; |
35 | var sensor = true; |
36 | |
37 | var img = $("< img >"); |
38 | img.attr( { src: "http://maps.google.com/maps/api/staticmap?" + |
39 | "center=" + |
40 | lat + "," + |
41 | lng + |
42 | "&zoom=" + zoom + |
43 | "&size=" + mapWidth + "x" + mapHeight + |
44 | createStaticMarker( "blue", "1", lat, lng ) + |
45 | "&sensor=" + sensor } ); |
46 | return img; |
47 | } |
48 | function showLocation( position ){ |
49 | var lat = position.coords.latitude; |
50 | var lng = position.coords.longitude; |
51 | var latlng = new google.maps.LatLng( lat, lng ); |
52 | |
53 | $("#map").html( createStaticMap( position ) ) |
54 | } |
55 | function mapError( e ){ |
56 | var error; |
57 | switch( e.code ){ |
58 | case 1: |
59 | error = "Permission Denied"; |
60 | break; |
61 | case 2: |
62 | error = "Network or Satellites Down"; |
63 | break; |
64 | case 3: |
65 | error = "GeoLocation timed out"; |
66 | break; |
67 | case 0: |
68 | error = "Other Error"; |
69 | break; |
70 | } |
71 | $("#map").html( error ); |
72 | } |
73 | }); |
74 | </ script > |
75 | </ head > |
76 | < body > |
77 | < div id = "map" > |
78 | </ div > |
79 | </ body > |
80 | </ html > |
5.纯HTML5 Starter模板
01 | <!DOCTYPE html> |
02 | < html > |
03 | < head > |
04 | < meta charset = "utf-8" > |
05 | < title >Untitled</ title > |
06 | <!--[if lt IE 9]> |
07 | <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> |
08 | <![endif]--> |
09 | </ head > |
10 | < body > |
11 | </ body > |
12 | </ html > |