本演示文档是一个HTML5的站点
按 → 键 进入下一页
放大/缩小: Ctrl + +/-
请使用Google Chrome浏览。阅读 免责声明。
*包括另外一些新一代网络开发技术
var el = document.getElementById('section1'); el.focus(); var els = document.getElementsByTagName('div'); els[0].focus(); var els = document.getElementsByClassName('section'); els[0].focus();
var els = document.querySelectorAll("ul li:nth-child(odd)"); var els = document.querySelectorAll("table.test > tr > td");
// use localStorage for persistent storage // use sessionStorage for per tab storage textarea.addEventListener('keyup', function () { window.localStorage['value'] = area.value; window.localStorage['timestamp'] = (new Date()).getTime(); }, false); textarea.value = window.localStorage['value'];
例子: 在客户端保存Email草稿 ,即使浏览器崩溃了数据也不会丢失。
var db = window.openDatabase("Database Name", "Database Version"); db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback); });
Chrome中查看生成的数据库: 开发人员 > 开发人员工具 > Storage
manifest="cache-manifest"> window.applicationCache.addEventListener('checking', updateCacheStatus, false);
CACHE MANIFEST # version 1 CACHE: /html5/src/refresh.png /html5/src/logic.js /html5/src/style.css /html5/src/background.png
试试断开你的网络连接,然后刷新!
main.js: var worker = new Worker(‘extra_work.js'); worker.onmessage = function (event) { alert(event.data); }; extra_work.js: // do some work; when done post message. postMessage(some_data);
Loading Route...
试着在计算航线时拖动地图 (只有在使用Worker计算时,浏览器不会假死)
var socket = new WebSocket(location); socket.onopen = function(event) { socket.postMessage(“Hello, WebSocket”); } socket.onmessage = function(event) { alert(event.data); } socket.onclose = function(event) { alert(“closed”); }
允许Web服务器实时、主动的向浏览器发送信息(COMET)
if (window.webkitNotifications.checkPermission() == 0) { // you can pass any url as a parameter window.webkitNotifications.createNotification(tweet.picture, tweet.title, tweet.text).show(); } else { window.webkitNotifications.requestPermission(); }
提示: 如果你想 重置 许可,也可以点击上面的按钮
输入一个 twitter 用户名,即可通过桌面提醒看到此用户发布最新一条信息(国内用户请爬墙看此DEMO)
document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy'; }, false);
即将支持: 从桌面拖动文件到页面。
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; map.setCenter(new GLatLng(lat, lng), 13); map.addOverlay(new GMarker(new GLatLng(lat, lng))); }); }
<header> <hgroup>Page title
Page subtitle
<nav>
rel='icon' href="/favicon.ico" /> rel='pingback' href="http://myblog.com/xmlrpc.php"> rel='prefetch' href="http://myblog.com/main.php"> ... rel='archives' href="http://myblog.com/archives">old posts rel='external' href="http://notmysite.com">tutorial rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license rel='nofollow' href="http://notmysite.com/sample">wannabe rel='tag' href="http://myblog.com/category/games">games posts ...
itemscope itemtype="http://example.org/band">My name is itemprop='name'>Neil.
My band is called itemprop='band'>Four Parts Water.
I am itemprop='nationality'>British.
UI方面: placeholder='Search inside' /> 输入检查:(不符合条件的将显示红色背景) etc...
<meter> <progress> <output> etc...
<audio src="sound.mp3" controls> document.getElementById("audio").muted=false; <video src='movie.mp4' autoplay controls > document.getElementById("video").play();
.row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; }
div { display: inline-block; }
input[type="text"] { background: #eee; }
:not(.box) { color: #00c; } :not(span) { display: block; }
h2:first-child { ... } div.text > div { ... } h2 + header { ... }
@font-face { font-family: 'Junction'; src: url(Junction02.otf); } @font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf); } @font-face { font-family: 'GG250'; src: url(General250.otf); } header { font-family: 'LeagueGothic'; }
div { text-overflow: ellipsis; }
-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
In March 1936, an unusual confluence of forces occurred in Santa Clara County.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.
Then came the wind.
It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.
This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.00px;
}
color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75);
color: hsla( 128, 75%, 33%, 1.00);
border-radius: 0px;
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(white), color-stop(0.5, white), color-stop(0.5, #66cc00))
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))
text-shadow: rgba(64, 64, 64, 0.5) 0px 0px 0px; box-shadow: rgba(0, 0, 128, 0.25) 0px 0px 0px;
text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0))); border-radius: 0px; -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0)));
#logo { background: url(logo.gif) center center no-repeat; background-size: ; }
div { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x; }
#box.left { margin-left: 0; } #box.right { margin-left: 1000px; } document.getElementById('box').className = 'left'; document.getElementById('box').className = 'right';
#box { -webkit-transition: margin-left 1s ease-in-out; } document.getElementById('box').className = 'left'; document.getElementById('box').className = 'right';
-webkit-transform: rotateY(45deg); -webkit-transform: scaleX(25deg); -webkit-transform: translate3d(0, 0, 90deg); -webkit-transform: perspective(500px)
#threed-example { -webkit-transform: rotateZ(5deg); -webkit-transition: -webkit-transform 2s ease-in-out; } #threed-example:hover { -webkit-transform: rotateZ(-5deg); }
@-webkit-keyframes pulse { from { opacity: 0.0; font-size: 100%; } to { opacity: 1.0; font-size: 200%; } } div { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; }
HTML5 =下一代Web开发的新特征