让ie更好的兼容html5
现在ie8已经提供了html5支持，但一些旧版浏览器还是让我们头疼。为了更好的支持html5。我们可以使用js来处理。防止我们的html5在一个旧版浏览器展示出现意想不到的问题。
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->Falsh 嵌入
主要是方便使用flash
<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 属性，更加方便的验证我们的表单内容了。
验证邮件地址
<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提供了一个预加载的功能,能够获取非当前页面资源。提高用户的浏览体验
<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">HTML5 Datalist
一个新的元素，为输入框提供选择
<datalist>
<option value="MooTools">
<option value="Moobile">
<option value="Dojo Toolkit">
<option value="jQuery">
<option value="YUI">
</datalist>指定id的输入框
<input name="frameworks" list="frameworks" />HTML5 常见输入类型
提供一些常用类型。验证用户输入，对于不支持的浏览器，会变成普通输入框
<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 支持了，希望其他的浏览器跟进啊，很好的功能
<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&image=__POSTER__.JPG&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重写
/* 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;
}自动获取焦点
autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。
<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>播放音频文件
加载一个mp3。。
<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>
2027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
