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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。