10个最佳的HTML5代码段，以简化您的开发任务
jopen 10年前
In this article, we have compiled 10 HTML5 Code Snippets which will help you enable HTML5 markup on your site and web related projects quick and hassle free.
1. HTML5 Ready CSS Reset
/* 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, h1, h2, h3, h4, h5, h6, 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
<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>
3. HTML5 Starter Page
<!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>
4. Creating a Google Static Map
<!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>
5. Plain HTML5 Starter Template
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>Untitled</title> 6. <!--[if lt IE 9]> 7. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 8. <![endif]--> 9. </head> 10. <body> 11. 12. </body> 13. </html>
6. HTML5 Page Structure
<!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>
7. Context Menu with HTML5
<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 非死book" onclick="window.location.href = 'http://非死book.com/sharer/sharer.php?u=' + window.location.href;"> </menuitem> </menu> </menu>
8. HTML5 Datalist
<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>
9. Get Directions from (Google Maps)
<form action="http://maps.google.com/maps" method="get" target="_blank"> <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>
10. HTML5 Email Regexp Validate
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />