首页 > 代码库 > 10段实用的HTML5代码

10段实用的HTML5代码

2024-07-10 06:39:44   224人阅读

1.HTML5编写的CSS Reset
CSS Reset也可以写成Reset CSS，即重设浏览器样式。

  1. /*   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/*/
  2. html, body, div, span, object, iframe,
  3. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  4. abbr, address, cite, code,
  5. del, dfn, em, img, ins, kbd, q, samp,
  6. small, strong, sub, sup, var,
  7. b, i,
  8. dl, dt, dd, ol, ul, li,
  9. 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 { color:#000; text-decoration:none; }
  29. mark { 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播放。

  1. <video width="640" height="360" controls>
  2.     <source src="http://www.mamicode.com/__VIDEO__.MP4"  type="video/mp4" />
  3.     <source src="http://www.mamicode.com/__VIDEO__.OGV"  type="video/ogg" />
  4.     <object width="640" height="360" type="application/x-shockwave-flash" data="http://www.mamicode.com/__FLASH__.SWF">
  5.         <param name="movie" value="http://www.mamicode.com/__FLASH__.SWF" />
  6.         <param name="flashvars" value="http://www.mamicode.com/controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
  7.         <img src="http://www.mamicode.com/__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
  8.              title="No video playback capabilities, please download the video below" />
  9.     </object>
  10. </video>
复制代码


3.HTML5 Starter页面

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset = "utf-8">
  5.         <title></title>
  6.         <link rel="stylesheet" href="http://www.mamicode.com/style.css">
  7.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  8.         
  9. <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  10.         <script scr ="script/script.js"></script>
  11.     </head>
  12. <body>
  13.      <header>
  14.        <nav>
  15.        </nav>
  16.     </header>
  17.     <footer>
  18.     </footer>
  19.   </body>
  20. <html>
复制代码


4.创建谷歌静态地图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" />
  6.     <title>Geo Location</title>
  8.     <style type="text/css" media="screen">
  9.         html{ height: 100%; }
  10.         body{ height: 100%; margin: 0; padding: 0; }
  11.         #map{ width: 100%; height: 100%; }
  12.     </style>
  13.         
  14. <!-- jQuery Min -->
  15.         <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  16.         
  17. <!-- Google Maps -->
  18.         <script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  19.         <script charset="utf-8" type="text/javascript">
  20.         mapWidth = screen.width;
  21.         mapHeight = screen.height;
  23.         $(document).ready(function(){
  24.             var geo = navigator.geolocation;
  25.             if( geo ){
  26.                 //Used for Static Maps
  27.                 geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
  28.             }
  29.             function createStaticMarker( markerColor, markerLabel, lat, lng ){
  30.                 return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng;
  31.             }
  33.             function createStaticMap( position ){
  34.                 var lat = position.coords.latitude;
  35.                 var lng = position.coords.longitude;
  36.                 var zoom = 20;
  37.                 var sensor = true;
  39.                 var img = $("<img>");
  40.                     img.attr( { src: "http://maps.google.com/maps/api/staticmap?" +
  41.                                 "center=" +
  42.                                 lat + "," +
  43.                                 lng +
  44.                                 "&zoom=" + zoom +
  45.                                 "&size=" + mapWidth + "x" + mapHeight +
  46.                                 createStaticMarker( "blue", "1", lat, lng ) +
  47.                                 "&sensor=" + sensor } );
  48.                     return img;
  49.             }
  50.             function showLocation( position ){
  51.                 var lat = position.coords.latitude;
  52.                 var lng = position.coords.longitude;
  53.                 var latlng = new google.maps.LatLng( lat, lng );
  55.                 $("#map").html( createStaticMap( position ) )
  56.             }
  57.             function mapError( e ){
  58.                 var error;
  59.                 switch( e.code ){
  60.                     case 1:
  61.                         error = "Permission Denied";
  62.                     break;
  63.                     case 2:
  64.                         error = "Network or Satellites Down";
  65.                     break;
  66.                     case 3:
  67.                         error = "GeoLocation timed out";
  68.                     break;
  69.                     case 0:
  70.                         error = "Other Error";
  71.                     break;
  72.                 }
  73.                 $("#map").html( error );
  74.             }
  75.         });
  76.         </script>
  77.     </head>
  78.     <body>
  79.         <div id="map">
  80.         </div>
  81.     </body>
  82. </html>
复制代码


5.纯HTML5 Starter模板

  1. <!DOCTYPE html>
  2.     <html>
  3.         <head>
  4.             <meta charset="utf-8">
  5.             <title>Untitled</title>
  6.             
  7. <!--[if lt IE 9]>
  8.             
  9. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  10.             
  11. <![endif]-->
  12.         </head>
  13.         <body>
  14.         </body>
  15.     </html>
复制代码


6.HTML5页面结构

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.         <title>Your Website</title>
  6. </head>
  7. <body>
  8.         <header>
  9.                 <nav>
  10.                         <ul>
  11.                                 <li>Your menu</li>
  12.                         </ul>
  13.                 </nav>
  14.         </header>
  15.         <section>
  16.                 <article>
  17.                         <header>
  18.                                 <h2>Article title</h2>
  19.                                 <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="http://www.mamicode.com/#">Writer</a> - <a href="http://www.mamicode.com/#comments">6 comments</a></p>
  20.                         </header>
  21.                         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  22.                 </article>
  23.                 <article>
  24.                         <header>
  25.                                 <h2>Article title</h2>
  26.                                 <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="http://www.mamicode.com/#">Writer</a> - <a href="http://www.mamicode.com/#comments">6 comments</a></p>
  27.                         </header>
  28.                         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  29.                 </article>
  30.         </section>
  31.         <aside>
  32.                 <h2>About section</h2>
  33.                 <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  34.         </aside>
  35.         <footer>
  36.                 <p>Copyright 2009 Your name</p>
  37.         </footer>
  38. </body>
  39. </html>
复制代码


7.上下文菜单

  1. <section contextmenu="mymenu">
  2. <p>Yes, this section right here</p>
  3. </section>
  4. <menu type="context" id="mymenu">
  5.   <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
  6.   <menu label="Social Networks">
  7.   <menuitem label="Share on Facebook" onclick="window.location.href = http://www.mamicode.com/‘http://facebook.com/sharer/sharer.php?u=‘ + window.location.href;">   </menuitem>
  8.   </menu>
  9. </menu>
复制代码


8.HTML5 Datalist

  1. <input name="frameworks" list="frameworks" />
  2. <datalist id="frameworks">
  3.     <option value="http://www.mamicode.com/MooTools">
  4.     <option value="http://www.mamicode.com/Moobile">
  5.     <option value="http://www.mamicode.com/Dojo Toolkit">
  6.     <option value="http://www.mamicode.com/jQuery">
  7.     <option value="http://www.mamicode.com/YUI">
  8. </datalist>
复制代码


9.从谷歌地图上获取路线

  1. <form action="http://maps.google.com/maps" method="get" target="_blank">
  2.    <label for="saddr">Enter your location</label>
  3.    <input type="text" name="saddr" />
  4.    <input type="hidden" name="daddr" value="http://www.mamicode.com/350 5th Ave New York, NY 10018 (Empire State Building)" />
  5.    <input type="submit" value="http://www.mamicode.com/Get directions" />
  6. </form>
复制代码


10.HTML5电子邮件正则表达式验证

  1. <input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
复制代码


联系
我们