HTML5 代码片断

时间 2019-11-18

标签 html5 html 代码片断栏目 HTML5 繁體版

原文原文链接

随着xp的退役，ie6的困扰将慢慢的消失，广大的程序员们没有必要再为这个头疼的浏览器废寝忘食。而html5 是html的一个新的版本，他具备不少新的特新，好比说：新的语法特征，< video> , < audio> ,和< canvas> 元素，这些元素更加简化了咱们在网站中处理多媒体。下面咱们来看下经常使用的 html5 代码片断。

让ie更好的兼容html5

如今ie8已经提供了html5支持，但一些旧版浏览器仍是让咱们头疼。为了更好的支持html5。咱们可使用js来处理。防止咱们的html5在一个旧版浏览器展现出现意想不到的问题。javascript

<!--[if IE]>  
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->

Falsh 嵌入

主要是方便使用flashphp

<object type="application/x-shockwave-flash"  
  data="your-flash-file.swf"  
  width="0" height="0">  
  <param name="movie" value="your-flash-file.swf" />  
  <param name="quality" value="high"/>  
</object>

正则表达式验证表单

之前，咱们大多数时候是使用正则来验证表单内容。如今能够用 html5的 pattern 属性，更加方便的验证咱们的表单内容了。css

验证邮件地址

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

验证密码强度

<input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />

验证电话号码

<input type="text" required pattern="(\+?\d[- .]*){7,13}" title="international, national or local phone number"/>

html5 的预加载

html提供了一个预加载的功能,可以获取非当前页面资源。提升用户的浏览体验html

<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">

HTML5 Datalist

一个新的元素，为输入框提供选择html5

<datalist>  
 <option value="MooTools">  
 <option value="Moobile">  
 <option value="Dojo Toolkit">  
 <option value="jQuery">  
 <option value="YUI">  
</datalist>

指定id的输入框java

<input name="frameworks" list="frameworks" />

HTML5 常见输入类型

提供一些经常使用类型。验证用户输入，对于不支持的浏览器，会变成普通输入框jquery

<input type="number"/> (Spinner)  
<input type="range"/> (Slider)  
<input type="date"/> (Popup Calendar)  
<input type="color"/> (Color Chooser)  
<input type="email"/> (Email Entry)  
<input type="url"/> (URL Entry)  
<input type="tel"/> (Telephone Input)  
<input type="search"/> (Search Query Input)

HTML5 右键菜单内容

如今好像只有 Firefox 支持了，但愿其余的浏览器跟进啊，很好的功能git

<section contextmenu="mymenu">  
<p>Yes, this section right here</p>  
</section>

<menu type="context">  
  <menuitem label="Please do not 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>

HTML5 嵌入多媒体回退

<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&amp;image=__POSTER__.JPG&amp;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>

创建静态的google 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>

  </div>  
 </body>  
</html>

HTML5 中隐藏节点

<p hidden>This text will be hidden.</p>

HTML5 css重写

/*&nbsp;&nbsp;&nbsp;html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5   baseline)&nbsp;&nbsp;v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark&nbsp;&nbsp;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,&nbsp;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;  
}

自动获取焦点

autofocus 属性规定当页面加载时 input 元素应该自动得到焦点。程序员

<!-- These all work! -->  
<input autofocus="autofocus" />  
<button autofocus="autofocus">Hi!</button>  
<textarea autofocus="autofocus"></textarea>

播放音频文件

加载一个mp3。。ajax

<audio src="sound.mp3"></audio>  
<div>  
    <button onclick="document.getElementById('player').play()">Play</button>  
    <button onclick="document.getElementById('player').pause()">Pause</button>  
    <button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>  
    <button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>  
</div>

下载文件

强制文件下载

<!-- will download as "expenses.pdf" -->  
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>