1.HTML5 Writing CSS Reset
CSS reset can also be written as reset CSS, which resets the browser style.
- /* 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 {color: #000; text-decoration:none;}
- Mark {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 */
Copy Code
2.HTML5 Video with Flash Fallback
Explain the code, if the browser does not support HTML5 video playback, then will automatically jump back to flash playback.
- <video width= "640" height= "controls>"
- <source src= "__video__. MP4 "type=" Video/mp4 "/>
- <source src= "__video__. OGV "type=" Video/ogg "/>
- The <object width= "640" height= "type=", "Application/x-shockwave-flash" and "Data=" __flash__. SWF ">
- <param name= "movie" Value= "__flash__. SWF "/>
- <param name= "Flashvars" value= "controlbar=over&image=__poster__. jpg&file=__video__. MP4 "/>
-
- title= "No video playback capabilities, please download the video below"/>
- </object>
- </video>
Copy Code
3.HTML5 Starter Page
- <! DOCTYPE html>
- <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>
- <body>
- <nav>
- </nav>
- <footer>
- </footer>
- </body>
Copy Code
4. Create a Google static map
- <! DOCTYPE html>
- <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.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>
- <body>
- <div id= "Map" >
- </div>
- </body>
Copy Code
5. Pure HTML5 Starter Template
- <! DOCTYPE html>
-
-
- <meta charset= "Utf-8" >
- <title>Untitled</title>
- <!--[If Lt IE 9]>
- <script src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" ></script>
- <! [endif]-->
-
- <body>
- </body>
-
Copy Code
6.HTML5 page Structure
- <! DOCTYPE html>
- <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
- <title>your website</title>
- <body>
- <nav>
- <ul>
- <li>your menu</li>
- </ul>
- </nav>
- <section>
- <article>
- <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>
- <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
- </article>
- <article>
- <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>
- <p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
- </article>
- </section>
- <aside>
- <p>donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
- </aside>
- <footer>
- <p>copyright Your name</p>
- </footer>
- </body>
Copy Code
7. Context Menu
- <section contextmenu= "MyMenu" >
- <p>yes, this section right here</p>
- </section>
- <menu type= "Context" id= "MyMenu" >
- <menuitem label= "Please don't 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>
Copy Code
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>
Copy Code
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= "5th Ave New York, NY 10018 (Empire State Building)"/>
- <input type= "Submit" value= "Get directions"/>
- </form>
Copy Code
10.HTML5 e-mail Regular expression validation
- <input type= "text" title= "email" required pattern= "[^@][email protected][^@]+\. [A-za-z] {2,6} "/>
Copy Code