zoukankan      html  css  js  c++  java

  • 10段实用的HTML5代码

    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="__VIDEO__.MP4"  type="video/mp4" />
    3.     <source src="__VIDEO__.OGV"  type="video/ogg" />
    4.     <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
    5.         <param name="movie" value="__FLASH__.SWF" />
    6.         <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
    7.         <img src="__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="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{ 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="#">Writer</a> - <a href="#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="#">Writer</a> - <a href="#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://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="MooTools">
    4.     <option value="Moobile">
    5.     <option value="Dojo Toolkit">
    6.     <option value="jQuery">
    7.     <option value="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="350 5th Ave New York, NY 10018 (Empire State Building)" />
    5.    <input type="submit" value="Get directions" />
    6. </form>
    复制代码


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

    1. <input type="text" title="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}" />
    复制代码
  • 相关阅读:
    最流行的javascript 代码规范
    jquery里阻止冒泡ev.stopPropagation()
    jquery里阻止冒泡ev.stopPropagation()
    响应式页面设计原理
    fromCharCode()的用法
    slice的用法
    java 反转数组
    java 一个数组的长度
    Java访问数组
    java 数组的定义
  • 原文地址：https://www.cnblogs.com/liweitao/p/3816910.html
Copyright © 2011-2022 走看看